Este tutorial explicará passo a passo como usar JQuery e CSS para criar um menu dinâmico interessante. O recurso "escreva menos, faça mais" do jQuery é bem conhecido de todos, mesmo pessoas sem vasta experiência em programação JS podem aprender rapidamente como usá-lo por meio da API que ele fornece. você pode entender os princípios de implementação de cada função principal do jQuery. Não vamos falar sobre outras coisas. Vamos apenas ver como usá-lo para obter o efeito mágico do menu.
.jpg)
Você pode clicar para ver a demonstração ou baixar o código-fonte .
Passo 1 – Estrutura HTML
Dê uma olhada no código HTML do menu. Não é diferente do código normal do menu:
<div id="menu" class="menu">
<ul>
<li><a href="javascript:;">Página inicial</a></li>
<li><a href="javascript:;">HTML/CSS</a></li>
<li><a href="javascript:;">JavaScript</a></li>
<li><a href="javascript:;">Recursos</a></li>
<li><a href="javascript:;">Tutoriais</a></li>
<li><a href="javascript:;">Sobre</a></li>
</ul>
</div>
A chave é usar scripts para criar várias camadas separadas em cada ponto de ancoragem (um elemento), para que possam ser controladas para serem animadas separadamente quando o mouse é passado. Para fazer isso, precisamos modificar a estrutura do DOM quando o DOM é carregado para que cada código âncora fique da seguinte forma:
<a href="javascript:;">
<span class="out">Página inicial</span>
<span class="bg"></span>
<span class="over">Página inicial</span>
</a>
O conteúdo de cada ponto de ancoragem original será anexado a dois elementos span (.out e .over), e o outro elemento span (.bg) é a camada da imagem de fundo.
Quanto a como modificar a estrutura do DOM, o código JS será explicado na Etapa 3.
Passo 2 – Estilo CSS
No exemplo, dois estilos são mostrados, um com imagem de fundo e outro sem imagem de fundo (veja a demonstração para detalhes). :
/* A seguir está o estilo básico do menu
*/.menuulli{
flutuar: esquerda;
/* O conteúdo do subelemento do menu está além da visibilidade */
estouro: oculto;
/* Alguns códigos são omitidos abaixo*/
}
.menu ul li a {
/* Deve ser um posicionamento relativo */
posição: relativa;
exibição: bloco;
largura: 110px;
/* Alguns códigos são omitidos abaixo*/
}
.menu ul li a span {
/* Todas as camadas usarão posicionamento absoluto */
posição: absoluta;
esquerda: 0;
largura: 110px;
}
.menu ul li a span.out {
topo: 0px;
}
.menu ul li a span.over,.menu ul li a span.bg {
/* Inicialmente, a camada .over e a camada .bg têm -45px em relação ao elemento a para obter o efeito oculto*/
topo: -45px;}/
*A seguir está um exemplo de uso de uma imagem de fundo*/
#menu {
/*Fundo do menu*/
background:url(bg_menu.gif) scroll 0 -1px repetição-x;
borda:1px sólido #CCC;}
#menu ul li a {
cor: #000;
}
#menu ul li a span.over {
cor: #FFF;
}
#menu ul li span.bg {
/* Especifique a altura e a imagem de fundo*/
altura: 45px;
plano de fundo: url (bg_over.gif) centro centro sem repetição;
}
Você também pode personalizar o estilo CSS, e uma versão simplificada do estilo também é fornecida aqui ( ver demonstração )