Navigation bar is an important element of website design: this is an example which uses a dynamic submenu to display sublinks of the main tabs. This tutorial illustrates how to design an elegant glass style navigation bar with a nice toggle animation effect, using CSS and MooTools. The result is something like this:
Moving your mouse over a tab in the main menu, the submenu display several links related to the "topic" of the tab. On the right of the navigation bar, clicking on Hide submenu link, the submenu disappears/appears with a nice toggle animation.
Download the full code of this tutorial, ready to be customized and used in your web projects.
Download source code1. HTML code
First of all, take a look at HTML code I used to design our navigation bar: all tabs are contained into a layer with id="navigation" and I used a list to design them. The structure is:
...and the code is:
<div id="navigation">
<a href="#" class="right_link" id="op1">Hide submenu</a>
<ul id="mymenu">
</div>
<a href="#" class="right_link" id="op1">Hide submenu</a>
<ul id="mymenu">
<li id="s1"><a href="#">Home</a></li>
<li id="s2"><a href="#">Tutorials</a></li>
<li id="s3"><a href="#">Showcases</a></li>
<li id="s4"><a href="#">Freebies</a></li>
</ul><li id="s2"><a href="#">Tutorials</a></li>
<li id="s3"><a href="#">Showcases</a></li>
<li id="s4"><a href="#">Freebies</a></li>
</div>
The submenu contains, for each tab, several links within some unordered lists:
<div id="sublinks">
<ul id="s1_m">
<ul id="s2_m">
<ul id="s3_m">
<ul id="s4_m">
</div>
<ul id="s1_m">
<li><a href="#">Upcoming</a></li>
<li><a href="#">Popular</a></li>
<li><a href="#">Best of...</a></li>
</ul><li><a href="#">Popular</a></li>
<li><a href="#">Best of...</a></li>
<ul id="s2_m">
<li><a href="#">Ajax</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Photoshop</a></li>
</ul><li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Flash</a></li>
<li><a href="#">Photoshop</a></li>
<ul id="s3_m">
<li><a href="#">CSS Websites</a></li>
<li><a href="#">Flash Websites</a></li>
<li><a href="#">Images</a></li>
</ul><li><a href="#">Flash Websites</a></li>
<li><a href="#">Images</a></li>
<ul id="s4_m">
<li><a href="#">Fonts</a></li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Icons</a></li>
</ul><li><a href="#">Wallpapers</a></li>
<li><a href="#">Icons</a></li>
</div>
Each list is related to a tab in the main menu (for example,
<ul id="s4_m">
<li><a href="#">...your links within li tag... </a></li>
...
</ul>
</div>...
</ul>
How you can see it's not complicated. If you are interested on CSS code download the source code of this tutorial. Now we are ready to take a look at the JavaScript code to enable animated effect.
3. Mootools + unobtrusive JavaScript code
At this point, we can try to implement all animation effects for this navigation bar using unobtrusive JavaScript technique, to separe JavaScript code form the content of the page. How I said, I used MooTools to implement toggle effect, so we have to add a link to MooTools framework copying the following code within the <head> tag of the web page:
<script type="text/javascript" src="mootools.svn.js"></script>
... and copy the following code below the previous code:
<script type="text/javascript">
window.addEvent('load', function(){
window.addEvent('load', function(){
// Hide all submenu link
$('sublinks').getElements('ul').setStyle('display', 'none');
// Show by default the first submenu related to the tab "Home"
$('s1_m').setStyle('display', 'block');
$$('#mymenu li').each(function(el){
el.getElement('a').addEvent('mouseover', function(subLinkId){
var layer = subLinkId+"_m";
// Display current submenu
$('sublinks').getElements('ul').setStyle('display', 'none');
$(layer).setStyle('display', 'block');
}.pass( el.id) );
});
// --------------------------------------- //
// SHOW and HIDE Submenu with MooTools Toggle animation
// Get the layer to animate
var mySlide = new Fx.Slide('sublinks');
// Prepare onClick event for the link with ID="op1"
$('op1').addEvent('click', function(e){
</script>$('sublinks').getElements('ul').setStyle('display', 'none');
// Show by default the first submenu related to the tab "Home"
$('s1_m').setStyle('display', 'block');
$$('#mymenu li').each(function(el){
el.getElement('a').addEvent('mouseover', function(subLinkId){
var layer = subLinkId+"_m";
// Display current submenu
$('sublinks').getElements('ul').setStyle('display', 'none');
$(layer).setStyle('display', 'block');
}.pass( el.id)
});
// --------------------------------------- //
// SHOW and HIDE Submenu with MooTools Toggle animation
// Get the layer to animate
var mySlide = new Fx.Slide('sublinks');
// Prepare onClick event for the link with ID="op1"
$('op1').addEvent('click', function(e){
// Get text contained into the link :"Hide submenu"
var textLink = $('op1').innerHTML;
// When an user click on this link update text: "Hide submenu" or "Display submenu"
if(textLink=='Hide submenu'){
$('op1').innerHTML = 'Display submenu';
} else {
$('op1').innerHTML = 'Hide submenu';
}
// Event Toggle for the Submenu
e = new Event(e);
mySlide.toggle();
e.stop();
});
});var textLink = $('op1').innerHTML;
// When an user click on this link update text: "Hide submenu" or "Display submenu"
if(textLink=='Hide submenu'){
$('op1').innerHTML = 'Display submenu';
} else {
$('op1').innerHTML = 'Hide submenu';
}
// Event Toggle for the Submenu
e = new Event(e);
mySlide.toggle();
e.stop();
});
The code is very simple. I used all we already saw in my previous post about MooTools, but if you are a newbie I suggest you to take a look at this post and this post.
For suggests or questions please add a comment! Thanks!
Download source code
I am 
Nice woork, thanks! I like your tutorials and your site. It's incredible... the better Blogger template I never saw!
Nice post! It would be awesome if you included a link to a working demo when you put up a tutorial. That way we can see if the tutorial is some thing worth putting more time into.
I read this blog a lot.
I don't understand why don't you do live demos. I first see it working, and if I'm intereseted, then I read the post.
@nacho: In general for simple tutorials I use Bravenet to publish the live preview because using Blogger I can't publish custom pages on-line...
But I don't like Bravenet... it's full of advertising... (...but it's free...) so I prefer to add a link to the source code.
Someone can suggest me a free service to publish my live preview? Thanks!
Good job, I like so much your Wo(o)rk :) but MikeTheVike and Nacho are reasonably asking for working demos (when possible) when you put up a tutorial.
What about a live demo to better explain your posts? I can suggest you to try Netsons.org: its hosting free solution is Italian, completely free, fully customizable and without advertising.
Let's have a look at it!
@antonio:
I can't believe that you have your blog at blogger.com. With your skills you should have your own blog (try serendipity, forget wordpress) on your own webspace.! Imagine the possibilities! It's not that expensive…
I disagree with this comment
"
I can't believe that you have your blog at blogger.com. With your skills you should have your own blog (try serendipity, forget wordpress) on your own webspace.! Imagine the possibilities! It's not that expensive…"
I THINK YOUR WORK WITH BLOGGER IS GREAT, IT SHOWS HOW FANTASTIC YOU ARE WITH MAKING AN AVERAGE BLOG LOOK LIKE A WORK OF ART.
YOU SHOULD DO A POST AND SHOW PEOPLE HOW TO MAKE THEIR BLOGGER LOOK LIKE YOURS :)) KEEP UP THE FANTASTIC WOORK
PETER
@antonio: you could try byethost's free hosting (www.byethost.com) to put up your tutorials...
any chance you publish some jquery tutorials? not everyone uses mootools...
Have you thought about some quick youtube videos of the working demos?
I really like this script, but sadly it doesn't work in IE 7... Can you make it work in this browser as well?
Thanks!
Really nice work! thanks!
Demo
Demo
Demo
Great concept, beautiful glass effect!
It is similar to colourlovers.com navigation, which also rocks. The only thing I would say is that, like colourlovers, the lists themselves would be much more semantic if the sub-links were nested within relevant parent list navigation items - strip away the presentation (CSS) and the navigation does not make much sense.
Fantastic blog by the way.
Hi!
I would be happy to offer you server space for any demos you have, let me know! email me at: support [a t] athenadesign.co.uk
Great blog by the way!
thanks
Steve
thanks for the code. I need this. Its awesome man and its working.
great work. is there a way to keep the rollover state for hte main tab when you are hovering over the subnav for that section? it seems odd to have the rollover effect dissapear when you move down onto the subnav.
how do i center this menu on my site without everything else on my site getting centered?
Very nice and elegant, i'm a beginner in javascript and would you please tell me how to put the submenu on HIDE at loading page (not displaying the submenu).
Thks
Very nice work, is it possible to code it so that on mouseout the submenu reverts to the active or current tab submenu?
Great insights,
This is really such nice post...
You have nicely described.
Thanks for the post...
Can someone tell me how to center the whole menu? I have tried it, but can't figure it out...
Someone...?
I want the menu to be 800 pixels wide and centered in the middle of the page. I now have the main menu bar 800px wide and centered. I also have the submenu 800px wide, but it won't center. How can I do this?
Why does it always show the first tab subtabs? For example, let's say I have the HOME tab with subelements: what's new, what's latest, and more to come. Well every page always shows these. How do I get around that? How can I get it to stay on the current tabs subtabs instead?
Can someone help me to modify this Menu. Instead of : mouseover to show the submenu, i want : mouseclick.
Thanks.