Jquery Fade Menu

User Rating: / 0
PoorBest 

In this tutorial a will show you a menu example with fade effect. Is made with Jquery, CSS and HTML. Every button can be add or remove by simplay deleting a line html code. Also you can change the color of the menu both the initial state and the hover ( text and background menu).

In the HEAD section you have this:

  <link rel="stylesheet" type="text/css" href="style.css">
  <script language="javascript" src="jQuery.js"></script>
 
  <script type="text/javascript">

//<![CDATA[


$(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').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');
       
    });

});

//]]>

</script>

Now in the BODY create the html buttons:

The smallText class is for the texts under the name of the button, if you want the change propery go to the css file and find the .smalltext.

<ul id="navMenu"> 
        <li><a href="#">Home <div class="smallText">something about company  </div> </a></li> 
        <li><a href="#">About Us <div class="smallText">who we are </div> </a></li> 
        <li><a href="#">Service <div class="smallText">who we made </div> </a></li> 
        <li><a href="#">Portofolio <div class="smallText">what clients say </div> </a></li> 
        <li><a href="#">Gallery <div class="smallText">world in images </div> </a></li> 
        <li><a href="#">Contact <div class="smallText"> want say hellow? </div> </a></li> 
</ul>

The CSS file should look like:

I wrote some information in the cod, if you don't know css very good.

body {
    background:url(background.png) repeat top center #303030;
}

#navMenu {
    margin:30px;
    padding:0;
    list-style:none;   
    font-family:arial;
    text-align:left;
    line-height:10px;
}

    #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;               
        color:#FFF;
        /* 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:#999;
        font-size:18px;
        float:left;
        margin-left:10px;
        margin-top:15px;
        text-decoration:none;
       
    }

     #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;
   
    }
.smallText {
font-size:13px;
color:#999;
font-family:"Times New Roman", Times, serif;
display:inline-block;
position:absolute;
width:100px;
font-style:italic;
text-decoration:none;
margin-top:10px;   
}

The last step is to download the scripts file!