A demon’s Show/Hide Toogle Mootools Slidebar

I’ve just received a few emails asking me how to make the NAVIGATION layer on top of this website and below’s just a very silly code to do it. I’m not an expert in Mootools and javascripts, so use it at your own risk :)

First, prepare an image like this:

Nav Button

(Some of my friends say it’s ugly :( Accept this criticism and will try to work for a better one.)

Then, go to Mootools and get the .js file.

In your header.php (for Wordpress people) and the HEAD section for others, add the following line:

Wordpress users
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/mootools.js"></script>

Others
<script type="text/javascript" src="/js/mootools.js"></script>

Add the following code below the one mentioned above.

<script type="text/javascript">
window.onload = function() {
//Navigation Stuffs
		var navlink = $(’navlink’);
	var b1Toggle = new Fx.Height(’navcontent’, {duration: 200});
	navlink.addEvent(’click’, function(){
		b1Toggle.toggle();
		navlink.toggleClass(’navlink_’);
		return false;
	});
$(’navcontent’).setStyle(’display’,'block’);
}	
//–>
</script>

Now it’s time to create the content inside the “hidden layer”, in my example, I use this:

<div id="navcontent" style="display:none;">
Hello, I love Mootools! It’s lightweighted and good…
My bandwidth is limited so I need to save it for other things
</div>

The style=”display:none;” code is used to hide the layer.

Then add the button to the place you want it to appear.

<div id="navlink" class="navlink">
<img src="/images/navbutton.gif" alt="navigation" width="154" height="31" />
</div>

Note: The width is half the image size…

Things are messy and now comes our great friend CSS who’ll spice things up with style.

#navlink {
	display:block;
	cursor:pointer;
	text-align:center;
	overflow: hidden;
	width: 77px;
}
.navlink_ {
	text-indent: -77px;
}
#navcontent {
	background: #ccc;
	width: 100%;
	height:0;
	}

Try it out and let me know if you need further help or explanation……

« Why the mean ones are poor Previous
Next Happy New Year! »

This entry was posted on Sunday, February 11th, 2007 at 1:53 am and is filed under Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

2 Responses to “A demon’s Show/Hide Toogle Mootools Slidebar”

  1. leeoh Says:
    October 24th, 2007 at 12:37 pm

    i find it very helpful. i have download the mootools ver 1.1.1 which is not working. have try even download the whole set of library. but still with no luck.
    what makes it work is directly link to your mootool library .js

    did u make any chance to the library?
    thx

  2. Stchatterbox Says:
    October 24th, 2007 at 6:04 pm

    Hi Leo,
    Thanks for your comment and I’m happy to know you find this tutorial useful.
    No, I did not change any of the codes, but one thing you have to be sure: you got to link the files EXACTLY to where they are located; otherwise it won’t work.
    It’s been quite a few months since I last play around with codes so in case you’re running into problems again, please send me your link and I’m happy to help you to test it :)
    Cheers, Cintia

Leave a Reply