Olá! Tuesday, 17 de January de 2017.



Dicas CódigoFonte.net
Monday, 01 de November de 2010

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>
  5.  
  6. <style type="text/css">
  7. ul{
  8.     list-style:none;
  9.     margin:0px;
  10.     margin-top:5px;
  11.     padding:0px;
  12. }
  13.  
  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>
  67.  
  68. <body>
  69.  
  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>

Comentários do artigo [Novo comentário]

Antonio - 19 de February de 2011 - 14:01
Olá Rafael, eu fiz o codigo do mesmo jeito mas não funcionou no meu. Você poderia postar o exemplo de como seria?
Desde já agradeço...
Rafael Amaral | rafaelamaral.com.br - 19 de February de 2011 - 16:41
Prezado Antônio, tudo bem?
Em meu site pessoal RafaelAmaral.com.br há outros artigos postados e também um exemplo postado clicando em http://www.rafaelamaral.com.br/exemplos/menu-horizontal-com-jquery.html, e está funcionando.
Certifique-se que os arquivos 'jquerys' estão na mesma pasta em que você salvou o arquivo html.
Quaisquer dúvidas entre em contato.

Abç!!!
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » CodigoFonte.eti.br » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010