Haseebzone template: 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:

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

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

... and copy the following code below the previous code:

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

Haseebzone template

Pages

Thursday, 28 August 2008

Elegant glass style navigation bar using CSS and toggle animated effect

No comments:

Post a Comment