Introduction
I got this tutorial request from a reader, if you have any request at all, please contact me, give me some suggestions for the upcoming tutorial! :)
Apparently, I have seen this kind of menu before, in Dragon Interactive . During the implementation, I was having a bit of problem, I thought it's just a simple fadein and fadeout effect, but it actually required a lot of CSS works and the right images.

1. HTML
HTML is very simple, just a list of links. :)
<ul id="navMenu"> <li><a href="#">Test 1</a></li> <li><a href="#">Test 2</a></li> <li><a href="#">Test 3</a></li> <li><a href="#">Test 4</a></li> <li><a href="#">Test 5</a></li> <li><a href="#">Test 6</a></li> </ul>
2. CSS
CSS is little bit complicated this time, therefore, I have put a lot of comments. I hope it will explain everything you need to know.
body { background:#222; } #navMenu { margin:0; padding:0; list-style:none; font-family:arial; text-align:center; line-height:60px; } #navMenu li { float:left; /* default background image */ background:url(default.jpg) no-repeat center center; /* width and height of the menu item */ width:120px; height:70px; /* simulate pixel perfect using border */ border-left:1px solid #111; border-right:1px solid #333; border-top:1px solid #555; border-bottom:1px solid #333; /* must set it as relative, because .hover class top and left with absolute position will be positioned according to li. */ position:relative; } #navMenu li a { /* z-index must be higher than .hover class */ z-index:20; /* display as block and set the height according to the height of the menu to make the whole LI clickable */ display:block; height:70px; position:relative; color:#777; } #navMenu li .hover { /* mouseover image */ background:url(over.jpg) no-repeat center center; /* must be postion absolute */ position:absolute; /* width, height, left and top to fill the whole LI item */ width:120px; height:70px; left:0; top:0; /* display under the Anchor tag */ z-index:0; /* hide it by default */ display:none; } #navMenu li.selected { /* selected image */ background:url(selected.jpg) no-repeat center center; }
3. Javascript
We are using the jQuery built-in fade in and face out effect. First of all, we need to append the div.hover to the list. After that, just a normal mouse hover event with the fadein and fadeout transition.
$(document).ready(function () { //Append a div with hover class to all the LI $('#navMenu li').append('<div class="hover"><\/div>'); $('#navMenu li').hover( //Mouseover, fadeIn the hidden hover class function() { $(this).children('div').stop(true, true).fadeIn('1000'); }, //Mouseout, fadeOut the hover class function() { $(this).children('div').stop(true, true).fadeOut('1000'); }).click (function () { //Add selected class if user clicked on it $(this).addClass('selected'); }); });
Conclusion
This is it, I haven't tested it on IE6 (I don't have one :()... if you having problem with that, please let me know, hopefully I will able to find a way to solve it, or if you can come out with a solution that'd be highly appreaciated! :) Thanks.
Last but not least, I need your support :) If you like this article, please help me to promote it by adding this post to your bookmark. Or you can subscribe to my RSS for more jQuery tutorial and design inspiration posts! Thanks!
Comments will be moderated and
rel="nofollow"
will be added to all links. You can wrap your coding with[code][/code]
to make use of built-in syntax highlighter.Thanks for the great tutorial! I actually incorporated this into my WordPress theme with custom menus and it works great. However, the one issue I'm running into is the sub menus and I was hoping you could offer some insight.
The sub menus are adopting the same overstate effect and height from the primary nav. I actually want the sub menus to be thinner and not have the cool Jquery effect. I've been toying around with this for some hours but then figured I'd ask the creator of the program to begin with :)
Thanks again for your help and time!
D
I want time liner code with some example. Can you help me ?
tahnk you in advance.