This blog has moved here: woorkup.com | FOLLOW ME ON TWITTER @woork
Thursday, August 28, 2008

Elegant glass style navigation bar using CSS and toggle animated effect

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 code


1. 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">
<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>
</div>


The submenu contains, for each tab, several links within some unordered lists:

<div id="sublinks">
<ul id="s1_m">
<li><a href="#">Upcoming</a></li>
<li><a href="#">Popular</a></li>
<li><a href="#">Best of...</a></li>
</ul>

<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>

<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>

<ul id="s4_m">
<li><a href="#">Fonts</a></li>
<li><a href="#">Wallpapers</a></li>
<li><a href="#">Icons</a></li>
</ul>
</div>


Each list is related to a tab in the main menu (for example, ID tab= S1 -> ID list=S1_m). If you want to add other elements to the submenu you have just to add a new <ul> element with a progressive ID such as:

<ul id="s4_m">
<li><a href="#">...your links within li tag... </a></li>
...
</ul>
</div>


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(){

// 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){

// 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();
});
});
</script>


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


Elegant ScrollPanes with jQuery and CSS3Perfect pagination style using CSSHow to implement a launching soon page with PHP and jQuerySuper simple way to work with Twitter API (PHP + CSS)

blog comments powered by Disqus
JB said...

Nice woork, thanks! I like your tutorials and your site. It's incredible... the better Blogger template I never saw!

MikeTheVike said...

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.

Nacho said...

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.

Antonio said...

@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!

Kobayashi said...

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!

Michael Kaiser said...

@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…

Anonymous said...

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

NeonDragon said...

@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...

Joe said...

Have you thought about some quick youtube videos of the working demos?

Willem said...

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!

Antonio said...

Really nice work! thanks!

Rob said...

Demo

Demo

Demo

DanD said...

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.

Steve Clifford said...

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

soman said...

thanks for the code. I need this. Its awesome man and its working.

Anonymous said...

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.

Anonymous said...

how do i center this menu on my site without everything else on my site getting centered?

Anonymous said...

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

jjscott said...

Very nice work, is it possible to code it so that on mouseout the submenu reverts to the active or current tab submenu?

Web Design Company said...

Great insights,
This is really such nice post...
You have nicely described.
Thanks for the post...

Anonymous said...

Can someone tell me how to center the whole menu? I have tried it, but can't figure it out...

Anonymous said...

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?

Briton said...

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?

Karim said...

Can someone help me to modify this Menu. Instead of : mouseover to show the submenu, i want : mouseclick.

Thanks.

  • Twitter Follow woork on Twitter
  • RSS Feed Subscribe to stay up to date
  • Podcast Coming soon...
  • 0 delicious lovers save
Share your links. Do you want to suggest any interesting link about web design or tech news? Submit your link.
Submit a News