0 Compartilhamentos 36 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

Como evitar que a bateria do seu laptop gaste muito rápido
Dicas
Dicas

Como evitar que a bateria do seu laptop gaste muito rápido

Carlos L. A. da Silva - 18 de Janeiro de 2018

Ela sempre acaba quando você mais precisa? A culpa pode ser da tela.

Microsoft terá webinar gratuito sobre Data e AI
Notícias
5 visualizações
Notícias
5 visualizações

Microsoft terá webinar gratuito sobre Data e AI

Redação - 18 de Janeiro de 2018

Data & AI Summit é o webinar gratuito oferecido pela Microsoft no próximo dia 23.

O que é preciso saber para iniciar um curso de desenvolvimento mobile?
Artigos
5 visualizações
Artigos
5 visualizações

O que é preciso saber para iniciar um curso de desenvolvimento mobile?

Redação - 17 de Janeiro de 2018

Você está querendo entrar na área de desenvolvimento mobile, mas o que é preciso saber para iniciar um curso de programação mobile? Gustavo Torrente, vai nos dar algumas dicas.

Deixe um Comentário

Your email address will not be published.

Mais publicações

O que aconteceu com o Winamp?
Artigos
8 visualizações
8 visualizações

O que aconteceu com o Winamp?

Carlos L. A. da Silva - 15 de Janeiro de 2018
Promoções de Jogos do Final de Semana (12/01)
Notícias
11 visualizações
11 visualizações

Promoções de Jogos do Final de Semana (12/01)

Carlos L. A. da Silva - 12 de Janeiro de 2018