Comentário: muitas vezes encontro navegação suspensa ao navegar nas páginas da web. Lembro que costumava implementá -lo usando JS. No entanto, o que apresentarei a seguir neste artigo é implementá -lo usando CSS3+HTML5. Se você estiver interessado, não perca. Espero que seja útil para você aprender CSS3 depois de ler.
As renderizações são as seguintes:O código é o seguinte:
<! Doctype html>
<html>
<head>
<meta charset = "utf-8" />
<Title> Pure HTML+CSS Navegação </title>
<!-Mulder->
<!-QQ: 10221408->
<!-Apoie apenas o Chrome Firefox->
<estilo>
*{
margem: 0;
preenchimento: 0;
}
.clear: depois {
claro: ambos;
contente: ".";
exibição: bloco;
altura: 0;
Visibilidade: escondida;
}
NAV {
Exibição: bloco embutido;
fronteira: 1px Solid #505255;
fundo de borda: 1px Solid #282C2F;
-Moz-Border-Radius: 5px;
-Webkit-Border-Radius: 5px;
margem: 50px;
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
}
li {
estilo de lista: nenhum;
flutuar: esquerda;
Right-Right: 1px Solid #2E3235;
Posição: relativa;
/*Antecedentes: -moz-linear-gradiente (topo, #FFF, #555D5F 2%, #555D5F 50%, #3E4245 100%);
Antecedentes: -Webkit gradiente (linear, 0 0, 0 100%, de (#ffff), parada de cor (2%, #555d5f), parada de cor (50%, #555d5f), para ( #3E4245));*/
Antecedentes:#555D5F;
}
Li: Hover {
/*Antecedentes: -moz-linear-gradiente (topo, #FFF, #3E4245 2%, #555D5F 80%, #555D5F 100%);
Antecedentes: -Webkit gradiente (linear, 0 0, 0 100%, de (#ffff), parada de cor (2%, #3E4245), parada de cor (80%, #3E4245), para ( #555d5f));*/
Antecedentes:#3E4245;
-Moz-transição: Antecedentes 1s facilitar;
-Webkit-transição: Antecedentes 1s facilidade;
}
li a {
exibição: bloco;
Altura: 40px;
altura da linha: 40px;
preenchimento: 0 30px;
tamanho de fonte: 12px;
Cor: #ffff;
Shadow de texto: 0px -1px 0px #000;
Decoração de texto: Nenhum;
Espaço branco: Nowrap;
Interação da borda: 1px Solid #999E9F;
Top de borda: 1px Solid #999E9F;
-moz-border-top-left-radius: 2px;
-Webkit-border-top-left-radius: 2px;
Index z: 100;
}
li> a {
Posição: relativa;
}
li. primeiro um {
-Moz-Border-Radius-Topleft: 4px;
-Moz-Border-Radius-Bottomleft: 4px;
-Webkit-border-top-left-radius: 4px;
-Webkit-Border-Bottom-Left-Radius: 4px;
}
li.last {
Fronteira: 0 Nenhum;
}
dl {
Posição: Absoluto;
exibição: bloco;
topo: 40px;
Esquerda: -25px;
Largura: 165px;
Antecedentes:#222222;
-Moz-Border-Radius: 5px;
-Webkit-Border-Radius: 5px;
-webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
Z-Index: 10;
}
li: pairar dl {
Top: 50px;
exibição: bloco;
Largura: 145px;
preenchimento: 10px;
}
dl a {
Antecedentes: transparente;
fronteira: 0 Nenhum;
-Moz-Border-Radius: 5px;
-Webkit-Border-Radius: 5px;
-Moz-transição: Antecedentes 0.5s facilidade;
-Webkit-transição: Antecedentes 0.5s facilidade;
Z-Index: 50;
}
DL A: Hover {
Cor: #FFF;
Antecedentes:#999E9F;
-Moz-transição: Antecedentes 0.3s Faculdade de fora, cor 0,3s facilidade-in-Out;
-Webkit-transição: Antecedentes 0.3s facilidade-in-out, cor 0,3s de facilidade;
}
dd {
Margin-top: -40px;
opacidade: 0;
Largura: 145px;
-Webkit-transição-Property: All;
/*-Webkit-transição-timing-função: cubic-bezier (5,0,5,0);*/
-Moz-transição-Property: All;
/*-Moz-transição-fina-função: cubic-bezier (5,0,5,0);*/
/*-webkit-transição-dely: 5s;
-moz-transição-dely: 5s;*/
}
Li: Hover DD {
margin-top: 0;
opacidade: 1;
}
Li DD: Nth-Child (1) {
-Webkit-transição-duração: 0,1s;
-moz-transição duração: 0,1s;
}
Li DD: Nth-Child (2) {
-Webkit-transição-duração: 0,2s;
-moz-transição duração: 0,2s;
}
Li DD: Nth-Child (3) {
-Webkit-transição-duração: 0,3s;
-moz-transição duração: 0,3s;
}
Li DD: Nth-Child (4) {
-Webkit-transição-duração: 0,4s;
-moz-transição duração: 0,4s;
}
dt {
Exibir: Nenhum;
Margin-top: -25px;
Top-top: 15px;
Altura: 10px;
}
Li: Hover dt {
exibição: bloco;
}
.Darrow {
Float: Certo;
margem: 18px 10px 0 0;
largura de fronteira: 5px;
cor de borda: #fff transparente transparente transparente;
estilo de fronteira: sólido;
largura: 0;
altura: 0;
altura da linha: 0;
estouro: oculto;
Cursor: Ponteiro;
Shadow de texto: 0px -1px 0px #000;
-webkit-box-shadow: 0px -1px 0px #000;
-moz-box-shadow: 0px -1px 0px #000;
}
.seta{
margem: 0 automático;
Margin-top: -5px;
exibição: bloco;
Largura: 10px;
Altura: 10px;
Antecedentes:#222222;
-webkit-transform: girate (45deg);
-moz-transform: girar (45deg);
}
</style>
</head>
<Body>
<MAV>
<ul>
<li> <a href = "#"> menu um </a> </li>
<li>
<span> </span>
<a href = "#"> menu dois </a>
<Dl>
<dt> <pan> </span> </dt>
<dd> <a href = "#"> submenu um </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu três submenu três </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> menu três </a>
<Dl>
<dt> <pan> </span> </dt>
<dd> <a href = "#"> submenu um </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu três submenu três </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> menu quatro </a>
<Dl>
<dt> <pan> </span> </dt>
<dd> <a href = "#"> submenu um </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu três </a> </dd>
<dd> <a href = "#"> submenu quatro </a> </dd>
</dl>
</li>
<li> <a href = "#"> menu cinco </a> </li>
<li> <a href = "#"> homens vi </a> </li>
<li> <a href = "#"> menu sete </a> </li>
<li> <a href = "#"> menu 8 </a> </li>
</ul>
</Arn>
</body>
</html>