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:
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:
<a href="#" class="right_link" id="op1">Hide submenu</a>
<ul id="mymenu">
<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:
<ul id="s1_m">
<li><a href="#">Popular</a></li>
<li><a href="#">Best of...</a></li>
<ul id="s2_m">
<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="#">Flash Websites</a></li>
<li><a href="#">Images</a></li>
<ul id="s4_m">
<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>
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:
window.addEvent('load', function(){
$('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){
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
Custom Search
Wednesday, October 22, 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.
<div id="navigation">
<li id="s1"><a href="#">Home</a></li>
</ul><div id="sublinks">
<li><a href="#">Upcoming</a></li>
</ul> <li><a href="#">Ajax</a></li>
</ul> <li><a href="#">CSS Websites</a></li>
</ul> <li><a href="#">Fonts</a></li>
</ul> <ul id="s4_m">
<li><a href="#">...your links within li tag... </a></li>
</div><script type="text/javascript" src="mootools.svn.js"></script>
<script type="text/javascript">
// Hide all submenu link );
</script>// Get text contained into the link :"Hide submenu"
});
Subscribe to:
Post Comments (Atom)
Posts
No comments:
Post a Comment