0 Compartilhamentos 388 Views

Efeitos de animação em menus com jQuery

O jQuery trouxe aos desenvolvedores diversas facilidades na hora de implementar interações client-side. Uma delas é a opção de criar animações, com uma simples função animate conseguimos obter belos efeitos visuais.

Diria até que essa função é a melhor maneira de substituir o flash (pelo menos em menus). Pois menus em flash quebram o conceito de acessibilidade de qualquer site. O jquery acaba sendo a melhor opção de obter efeitos animados legais sem comprometer a acessibilidade.

Essa é um efeito simples q movimenta o texto com a propriedade text-indent.

XHTML:
Inicio
Portfolio
Contato

CSS:

#animation-1 li{
width: 200px;
}
#animation-1 li a {
display: block;
padding: 10px 5px;
width:190px;
background-color: #ccc
}

jQuery:

$(document).ready(function(){
$(“#animation-1 li a”).hover(
function(){
$(this).animate({ textIndent: “30px” }, 500 );
},function(){
$(this).animate({ textIndent: “0px” }, 500 );
});
});

Como pode ver é bem simples, graças ao jQuery, abaixo temos o código completo com mais exemplos, segue em anexo também o codigo completo.

Veja este código em funcionamento

Arquivos para Download:

menu.html

Você pode se interessar

TypeScript // Dicionário do Programador
Vídeos
1,655 compartilhamentos6,807 visualizações
Vídeos
1,655 compartilhamentos6,807 visualizações

TypeScript // Dicionário do Programador

Thais Cardoso de Mello - 18 de março de 2019

TypeScript é o termo falado nesse Dicionário do Programador, conheça mais sobre o assunto.

Promoções de Jogos do Final de Semana (15/03)
Notícias
9 visualizações
Notícias
9 visualizações

Promoções de Jogos do Final de Semana (15/03)

Carlos L. A. da Silva - 15 de março de 2019

Confira as melhores ofertas de jogos de PC para o final de semana.

Mega Bate-Papo com o Programador BR (feat. Igor Oliveira) // CDF Entrevista
Vídeos
1,655 compartilhamentos6,811 visualizações
Vídeos
1,655 compartilhamentos6,811 visualizações

Mega Bate-Papo com o Programador BR (feat. Igor Oliveira) // CDF Entrevista

Thais Cardoso de Mello - 14 de março de 2019

Batemos um papo muito divertido e informativo com o Igor Oliveira (do canal Programador BR).

Deixe um Comentário

Your email address will not be published.

Mais publicações

World Wide Web completa 30 anos!
Notícias
11 visualizações
11 visualizações

World Wide Web completa 30 anos!

Carlos L. A. da Silva - 12 de março de 2019
Ada Lovelace: o cérebro que nunca morre
Artigos
132 visualizações1
132 visualizações1

Ada Lovelace: o cérebro que nunca morre

Carlos L. A. da Silva - 12 de março de 2019
Scrum // Dicionário do Programador
Vídeos
13 visualizações
13 visualizações

Scrum // Dicionário do Programador

Thais Cardoso de Mello - 11 de março de 2019