Loading
carregando...

Criando um menu animado com jQuery e css


Vamos apreder como criar um menu animado em jQuery, CSS e html.



Não vou fazer muito rodeios então mãos a obra...



Antes de mais nada é preciso de uma biblioteca jQuery, para quem não tem segue abaixo o linque dessa biblioteca que o google disponiliza:

  1.  
  2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
  3.  



Bom tendo a biblioteca jQuery vamos agora ao código css que irá definir os estilos do nosso menu animado:

  1.  
  2. <style type="text/css">
  3. #menuTesteBg {
  4.      width:100%;
  5.       height:70px;
  6.       padding:0 35px;
  7.       margin:17px -35px 30px -35px;
  8.       float:left;
  9.  background:#999;
  10. }
  11.  
  12. #menuTeste { 
  13.       width:100%; 
  14.       height:50px; 
  15.       margin:0 150px; 
  16.       float:left;
  17. }
  18.  
  19. /*---- menuItens ---*/
  20. #menuTesteItens {
  21.       height:70px;
  22.       font:normal 14px arial;
  23.       color:#FFF;
  24.       overflow:hidden;
  25.       position:relative;
  26.       float:left;
  27. }
  28. #menuTesteItens a {
  29.  text-decoration:none;
  30.       display:block;
  31.       padding:20px;
  32.       line-height:30px;
  33.       text-align:center;
  34.       color:#FFF;
  35.       position:relative;
  36.       z-index:2;
  37. }
  38. #menuTesteItens span {
  39.       position:absolute;
  40.       display:block;
  41.       height:0px;
  42.       width:300px;
  43.       background:#000000;
  44.       top:0px;
  45.       left:0;
  46.       z-index:1;
  47. }
  48. </style>
  49.  



Com o css definido vamos agora formatar o script jQuery que irá dar animação ao nosso menu:

  1.  
  2. <script type="text/javascript">
  3. $(document).ready(function(){
  4.      var speedText = 300;
  5.      var speedJump = 200;
  6.      $("#menuTesteItens a").hover(
  7.            function(){
  8.                 $(this).next("span").stop().animate({ height: "70px", }, speedJump);
  9.                 $(this).stop().animate({ lineHeight:"40px" }, speedText);
  10.            },function(){
  11.                 $(this).next("span").stop().animate({ height: "0px" }, speedJump);
  12.                 $(this).stop().animate({ lineHeight:"30px" }, speedText);
  13.            });
  14. });
  15. </script>
  16.  




Bom feito isso o html é bem simples basta definir o menu com as ids criada no css e pronto segue abaixo o script em html:

  1.  
  2. <div id="menuTesteBg">
    
  3.      <div id="menuTeste">
    
  4.  
  5.           <div id="menuTesteItens">
    
  6.                <a href="javascript:void(0);">INICIO</a><span></span>
    
  7.           </div>
    
  8.           <div id="menuTesteItens">
    
  9.                <a href="javascript:void(0);">EMPRESA</a><span></span>
    
  10.           </div>
    
  11.           <div id="menuTesteItens">
    
  12.                <a href="javascript:void(0);">FALE CONOSCO</a><span></span>
    
  13.           </div>
    
  14.       </div>
    
  15. </div>
    
  16.  



Segue o link do menu funcionando click e veja o exemplo:

CLICK AQUI E VEJA O EXEMPLO DO MENU FUNCIONANDO



É isso pessoal...

dúvidas postem comentários.
abrass tt


Autor: Dárcio Gomes
Data: 02/08/2012 00:00:00