Create an Attractive jQuery Menu with Fadein and Fadeout Effect

HTML is very simple, just a list of links.

• Test 1
• Test 2
• Test 3
• Test 4
• Test 5
• Test 6

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

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('');
 
 
    $('#navMenu li').hover(
         
        //Mouseover, fadeIn the hidden hover class
        function() {
             
            $(this).children('div').fadeIn('1000');
         
        },
     
        //Mouseout, fadeOut the hover class
        function() {
         
            $(this).children('div').fadeOut('1000');   
         
    }).click (function () {
     
        //Add selected class if user clicked on it
        $(this).addClass('selected');
         
    });
 
});