Animação de Menu com jQuery

Para os completos iniciantes em HTML/CSS, sugiro o site http://maujor.com/ que contém artigos e tutorias interessantes sobre o assunto. Para quem deseja se aprofundar em jQuery, não conheço lugar melhor que http://docs.jquery.com/Main_Page (em inglês).

Você pode baixar os arquivos referentes a este artigo aqui.

Passo 01 - HTML básico e estilos

Vamos começar pelo início, com um html básico e uma lista de links. Salve o código abaixo em um arquivo chamado menu.html:

  
  
  
  
  
  

  
Início
  
A Empresa
  
Serviços
  
Sistemas
  
Contato
  
  
  

• Início
• A Empresa
• Serviços
• Sistemas
• Contato

Por enquanto essa lista não lembra nem de longe um menu. É ai que entra um pouquinho de CSS. Salve o código abaixo em um arquivo chamado menu.css na mesma pasta do arquivo menu.html:

.menu {
  margin: 0px;
  padding: 0px;
  height: 30px;
  list-style: none;
  background: #913C3E;
  }

.menu li{
  float: left;
  padding: 0px 4px 0px 4px;
  text-align: center;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 30px;
  border-left: 2px solid #000000;
  background: #913C3E;
  position:  relative;
  }

.menu li  a, .menu li a.active {
  text-decoration: none;
  color: #FFFFFF;
  }

Faça as seguintes alterações no arquivo menu.html(linhas 06 e 09):

  
  
  
  
    
  
  
  

  
Início
  
A Empresa
  
Serviços
  
Sistemas
  
Contato
  
  
  

...e com o poder da folha de estilo em cascata, nossa lista começa a se parecer com um menu:

• Início
• A Empresa
• Serviços
• Sistemas
• Contato

Passo 02a - Código jQuery

Agora começa a mágica: entra em cena jQuery! Salve o código abaixo em um arquivo chamado menu.js na mesma pasta dos outros dois arquivos:

$(document).ready(function(){
  $("ul.menu li").hover(
  function() {
  var margem = -30;
  if($(this).is(':first-child')||$(this).is(':last-child')){
  var margem = 0;
  }
  $(this).animate({marginLeft: margem, paddingRight: "34px"}, "slow"); 
  },
  function() {
  $(this).animate({marginLeft: "0px", paddingRight: "4px"}, "slow");
  });

  return false;
  });

Algumas explicações sobre o código:

  $(document).ready(function(){

Faz com que o código rode o quanto antes possível, antes mesmo da página ser completamente carregada.

  $("ul.menu li").hover(

Seleciona todos os itens (<li>) pertencentes à listas (<ul>) que façam uso da classe ".menu" e atribui o primeiro código passado como parâmetro ao evento mouseenter("entrar" com o mouse) e o segundo ao evento mouseleave("sair" com o mouse) de cada um deles.

  if($(this).is(':first-child')||$(this).is(':last-child')){
  var  margem = 0;
  }

Ao passar o mouse por cima (evento hover) de um item (<li>) - referenciado aqui através de $(this) - fazemos uma condicional (if) para testar se ele é o primeiro ou último elemento da lista (<ul>) para podermos diferenciar um pouco a animação dos elementos que estão no "meio".

  $(this).animate({marginLeft: margem, paddingRight: "34px"}, "slow");

A função .animate() serve para animar propriedades CSS (no nosso caso, "marginLeft" e "paddingRight") com uma duração em milisegundos("slow" equivale a 600).

As linhas de 03 a 08 fazem parte do primeiro parâmetro da função .hover(), ou seja, o evento mouseenter do elemento. As linhas 10 e 11 são do evento mouseleave

  $(this).animate({marginLeft: "0px", paddingRight: "4px"}, "slow");

O valor das propriedades animadas no mouseleave deve coincidir com o valor original (definido em CSS) para que os elementos retornem à posição original.

Passo 02b - Usando o código jQuery

Para podermos usar o código que fizemos precisamos referenciar a biblioteca jQuery e o arquivo que criamos anteriormente (menu.js) na seção da nossa página (arquivo menu.html):

  
  
  
  
  
  
  
  
  
  

  
Início
  
A Empresa
  
Serviços
  
Sistemas
  
Contato
  
  
  

Salve o arquivo menu.html e o abra no seu navegador. O seu menu deve parecer com o abaixo:

• Início
• A Empresa
• Serviços
• Sistemas
• Contato

Se você passar o mouse rapidamente por todos os itens do menu, vai reparar que todos vão ser animados ao mesmo tempo. O jQuery cria uma fila de eventos para cada objeto e vai executando um após o outro até executar o último evento dessa fila. Cada vez que você passar o mouse em um item do menu, as animações de entrada e saída de mouse (mouseenter e mouseleave) ficam pendentes nessa fila.

Vamos fazer uma pequena modifícação no arquivo menu.js para que a animação anterior seja suspensa e iniciada uma nova. Digite .stop(true) depois de $(this) nas linhas 08 e 11:

$(document).ready(function(){
  $("ul.menu li").hover(
  function() {
  var margem = -30;
  if($(this).is(':first-child')||$(this).is(':last-child')){
  var  margem = 0;
  }
  $(this).stop(true).animate({marginLeft: margem, paddingRight:  "34px"}, "slow"); 
  },
  function() {
  $(this).stop(true).animate({marginLeft: "0px", paddingRight: "4px"}, "slow");
  });
  
  return false;
  });

A função .stop(true) para a animação atual e limpa a fila de eventos do elemento. O restante da instrução então inicia uma nova animação. Teste o resultado:

• Início
• A Empresa
• Serviços
• Sistemas
• Contato

Passo 03 - Inserindo ícones no menu

Agora vamos inserir ícones nos itens do menu que só aparecerão quando passar com o mouse por cima, dando um efeito muito bacana. Você encontra os ícones usados no exemplo aqui(descompacte na mesma pasta do arquivo menu.html). Começamos fazendo alterações na lista (<ul class="menu"> ) no arquivo menu.html, inserindo as imagens para cada item:

  
  
  
  
  
  
  
  

    
Início
    
A Empresa
    
Serviços
    
Sistemas
    
Contato
  
  
  

Também precisamos incluir o estilo para essas imagens. Insira o código abaixo no final do arquivo menu.css:

.menu li img {
  height: 16px;
  top: 7px;
  right: -25px;
  position: absolute;
  filter: alpha(opacity=0);
  opacity: 0.0; 
}    

As linhas 6 e 7 fazem exatamente a mesma coisa: alteram o nível de opacidade(transparência) do elemento, sendo 0.0 (0 no caso de filter: alpha) totalmente transparente e 1.0 (100 no caso de filter: alpha) totalmente opaco. A diferença é que a linha 6 será apenas reconhecida no Internet Explorer e a 7 nos outros navegadores.

Agora basta incluir a animação dos ícones. Inclua as linhas 09 e 13 no arquivo menu.js:

     $(document).ready(function(){
     $("ul.menu li").hover(
     function() {
     var margem = -30;
       if($(this).is(':first-child')||$(this).is(':last-child')){
     var  margem = 0;
     }
     $(this).stop(true).animate({marginLeft: margem, paddingRight: "34px"}, "slow");
     $("img", this).stop(true).animate({right: "5px", opacity: "100"}, "fast");
     },
     function() {
     $(this).stop(true).animate({marginLeft: "0px", paddingRight: "4px"}, "slow");
     $("img", this).stop(true).animate({right: "-25px", opacity: "0"}, "fast");
     });
     
     return false;  
      }); 

A função $("img", this) também pode ser usada como $(this).find("img") e, no nosso caso, localiza os elementos com tag <img> dentro da tag <li> pela qual foi disparada o evento hover. Veja o resultado final:

• Início
• A Empresa
• Serviços
• Sistemas
• Contato

Esperamos que tenham gostado. Estamos abertos à sugestões para novos artigos. Até breve!