Menu horizontal com jQuery

Marcadores:

 

Menu horizontal com jQuery

Neste artigo trago um exemplo de como montar um menu simples e com efeito muito legal similar ao do flash, utilizando apenas CSS e jQuery.
Lembrando que é necessário baixar os plugins jquery e jquery-ui em: http://jquery.com.
  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>Menu Horizontal</title>
  6. <style type="text/css">
  7. ul{
  8.     list-style:none;
  9.     margin:0px;
  10.     margin-top:5px;
  11.     padding:0px;
  12. }
  14. li{
  15.     display:inline;
  16.     font-size:1.1em;
  17.     letter-spacing:-1px;
  18.     font-weight:normal;
  19.     color:#FFF;
  20.     text-align:center;
  21.     float:left;
  22. }
  23. li a{
  24.     display:block;
  25.     color:#FFF;
  26.     background-color:#7EBF00;
  27.     text-decoration:none;
  28.     padding-bottom:10px;
  29.     padding-left:10px;
  30.     padding-right:10px;
  31.     padding-top:10px;
  32. }
  33. </style>
  34. <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
  35. <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
  36. <script type="text/javascript">
  37. $('document').ready(function(){
  38.     //--- Menu
  39.     $('ul a').each(function(key){
  40.         if(key == 0)
  41.             $(this).stop().animate({backgroundColor:"#4F8600"}, {duration:1000});
  42.     });
  43.    
  44.     //--- menu
  45.     $('ul a').hover(
  46.         function(){
  47.             $('ul a').each(function(key){
  48.                 $(this).stop().animate({backgroundColor:"#7EBF00"}, {duration:1500})
  49.             });
  50.            
  51.             $(this).stop().animate({backgroundColor:"#4F8600"}, {duration:1000});
  52.         },
  53.         function(){           
  54.             $('ul a').each(function(key){
  55.                 if(key == 0)
  56.                     $(this).stop().animate({backgroundColor:"#4F8600"}, {duration:800});
  57.                 else
  58.                 {
  59.                     $(this).stop().animate({backgroundColor:"#7EBF00"}, {duration:1500})
  60.                 }
  61.             });
  62.         }
  63.     );
  64. });
  65. </script>
  66. </head>
  68. <body>
  70. <div id="Menu">
  71.     <ul>
  72.            <li><a href="#">Link 1</a></li>
  73.         <li><a href="#">Link 2</a></li>
  74.            <li><a href="#">Link 3</a></li>
  75.     </ul>
  76. </div>
  77. </body>
  78. </html>


Anterior Proxima Página inicial