User Rating: / 0
PoorBest 

In this tutorial I will present a menu whose color is change when mouse is hover. Is made with HTML, CSS and Jquery.

 

          

  The HEAD section you have the links between html and css and scripts:

  <link rel="stylesheet" type="text/css" href="style.css">
  <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
  <!-- include Google's AJAX API loader -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
  <script type="text/javascript" src="bgAnimation.js"></script>
  <script type="text/javascript" src="script.js"></script>

 

Now in the BODY section we create the menu:

 

  <div id="style1">
      <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About us</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Clients</a></li>
          <li><a href="#">Contact</a></li>
      </ul>
  </div>

 

The CSS looks like:

 

body {
    background:url(img/bg-body.jpg) repeat top center;
}

#style1 {
    float:left;
    display:block;
    width:100%;
}

#style1 ul {
    float:left;
    display:block;
}

#style1 ul li {
    float:left;
    display:block;
}

#style1 li a {
    float:left;
    font-size:17px;
    display:block;
    color:white;
    font-family:arial;
    padding: 5px 10px 5px 10px;
    text-decoration:none;
    margin:0px 1px 0px 0px;
    text-align:center;
    background-color:#303030;
}

 

This is Jquery, here you can change the color of the menu, color of the hover, speed transition, etc:

 

$(document).ready(function(){
        $('#style1 a').hover(function() {
                $(this).stop().animate({ backgroundColor: "#a51047"}, 800);  //here you can change the color of the menu and the speed of transition
                },function() {
                $(this).stop().animate({ backgroundColor: "#303030" }, 800); //here you can change the color of the hover menu and the speed of transition
                });
               
         
         
          $('#style2 a').css( {backgroundPosition: "0 0"} )
    .mouseover(function(){
        $(this).stop().animate(
            {backgroundPosition:"(-150 0px)"},
            {duration:400})
        })
    .mouseout(function(){
        $(this).stop().animate(
            {backgroundPosition:"(0 0)"},
            {duration:300})
        })
       
        $('#style3 a').css( {backgroundPosition: "0 0"} )
    .mouseover(function(){
        $(this).stop().animate(
            {backgroundPosition:"(100 0)"},
            {duration:400})
        })
    .mouseout(function(){
        $(this).stop().animate(
            {backgroundPosition:"(0 0)"},
            {duration:300})
        })
                       
});

The last step is to Download the scripts which includes all you need!