Commentaire: Je rencontre souvent une navigation déroulante lors de la navigation sur les pages Web. Je me souviens que je l'avais l'habitude de l'implémenter en utilisant JS. Cependant, ce que je veux présenter ensuite dans cet article, c'est de l'implémenter en utilisant CSS3 + HTML5. Si vous êtes intéressé, ne le manquez pas. J'espère qu'il vous sera utile d'apprendre CSS3 après l'avoir lu.
Les rendus sont les suivants:Le code est le suivant:
<! Doctype html>
<html>
<adal>
<meta charset = "utf-8" />
<Title> Pure HTML + CSS Navigation </Title>
<! - Mulder ->
<! - QQ: 10221408 ->
<! - Soutenir uniquement Chrome Firefox ->
<style>
* {
marge: 0;
rembourrage: 0;
}
.Clear: après {
Clear: les deux;
contenu: ".";
Affichage: bloc;
hauteur: 0;
Visibilité: cachée;
}
nav {
Affichage: bloc en ligne;
Border: 1px solide # 505255;
Border-Bottom: 1px solide # 282C2F;
-Moz-Border-Radius: 5px;
-Webkit-Border-Radius: 5px;
marge: 50px;
-Webkit-box-shadow: 1px 1px 3px # 292929;
-moz-box-shadow: 1px 1px 3px # 292929;
}
li {
Style de liste: aucun;
flottant: à gauche;
Border-droite: 1px solide # 2E3235;
Position: relative;
/ * Contexte: -moz-linear-gradient (top, #fff, # 555d5f 2%, # 555d5f 50%, # 3E4245 100%);
Contexte: -webkit-gradient (linéaire, 0 0, 0 100%, de (#ffff), couleurs-stop (2%, # 555d5f), couleurs-stop (50%, # 555d5f), vers (# 3E4245)); * /
Contexte: # 555d5f;
}
Li: Hover {
/ * Contexte: -moz-linear-gradient (top, #fff, # 3E4245 2%, # 555d5f 80%, # 555d5f 100%);
Contexte: -webkit-gradient (linéaire, 0 0, 0 100%, de (#ffff), couleurs-stop (2%, # 3E4245), couleurs-stop (80%, # 3E4245), à (# 555d5f)); * /
Contexte: # 3E4245;
-Moz-Transition: Background 1S Facit-Out;
-Webkit-Transition: Background 1s Factive-Out-Out;
}
li a {
Affichage: bloc;
hauteur: 40px;
hauteur de ligne: 40px;
rembourrage: 0 30px;
taille de police: 12px;
Couleur: #ffff;
Text-shadow: 0px -1px 0px # 000;
Décoration du texte: aucune;
Espace blanc: Nowrap;
Border-Left: 1px solide # 999E9F;
Border-top: 1px solide # 999e9f;
-moz-border-top-left-radius: 2px;
-Webkit-border-top-left-radius: 2px;
Z-Index: 100;
}
li> a {
Position: relative;
}
li. premier a {
-moz-border-radius-topleft: 4px;
-Moz-Border-Radius-Bottomleft: 4px;
-Webkit-border-top-left-radius: 4px;
-Webkit-Border-Bottom-Left-Radius: 4px;
}
li.last {
Border-droite: 0 Aucun;
}
dl {
Position: absolue;
Affichage: bloc;
en haut: 40px;
gauche: -25px;
Largeur: 165px;
Contexte: # 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: Hover dl {
en haut: 50px;
Affichage: bloc;
Largeur: 145px;
rembourrage: 10px;
}
dl a {
Contexte: transparent;
Border: 0 Aucun;
-Moz-Border-Radius: 5px;
-Webkit-Border-Radius: 5px;
-Moz-Transition: Background 0,5S Spilt-Out;
-Webkit-Transition: Background 0.5S Spilt-Out;
Z-Index: 50;
}
DL A: Hover {
Couleur: #FFF;
Contexte: # 999E9F;
-Moz-Transition: Background 0.3S Emplse-in-Out, couleur 0.3S facilité-entrée;
-Webkit-Transition: Background 0.3S Emplse-in-Out, Color 0.3S Factive-in-out;
}
dd {
marge: -40px;
Opacité: 0;
Largeur: 145px;
-Webkit-Transition-Property: Tous;
/ * - Webkit-transition-timing-fonction: cubic-bezier (5,0,5,0); * /
-moz-transition-property: tout;
/ * - Moz-Transition-Timing-Function: Cubic-Bezier (5,0,5,0); * /
/ * - webkit-transition-delay: 5s;
-Moz-Transition-Delay: 5s; * /
}
Li: Hover dd {
marge: 0;
Opacité: 1;
}
li dd: nth-child (1) {
-Webkit-Transition-Durée: 0,1 s;
-Moz-Transition Durée: 0,1 s;
}
li dd: nth-child (2) {
-Webkit-Transition-Durée: 0,2 s;
-Moz-Transition Durée: 0,2 s;
}
li dd: nth-child (3) {
-Webkit-Transition-Durée: 0,3S;
-Moz-Transition Durée: 0,3S;
}
li dd: nth-child (4) {
-Webkit-Transition-Durée: 0,4 s;
-Moz-Transition Durée: 0,4S;
}
dt {
Affichage: aucun;
marge: -25px;
Tableau de rembourrage: 15px;
hauteur: 10px;
}
li: hover dt {
Affichage: bloc;
}
.Darrow {
flottant: à droite;
marge: 18px 10px 0 0;
largeur de bordure: 5px;
Color à bordure: #FFF transparent transparent transparent;
Style de la frontière: solide;
Largeur: 0;
hauteur: 0;
hauteur de ligne: 0;
débordement: caché;
curseur: pointeur;
Text-shadow: 0px -1px 0px # 000;
-webkit-box-shadow: 0px -1px 0px # 000;
-moz-box-shadow: 0px -1px 0px # 000;
}
.flèche{
marge: 0 auto;
marge: -5px;
Affichage: bloc;
Largeur: 10px;
hauteur: 10px;
Contexte: # 222222;
-Webkit-Transform: Rotate (45Deg);
-Moz-transform: Rotation (45DEG);
}
</ style>
</ head>
<body>
<Nav>
<ul>
<li> <a href = "#"> menu un </a> </li>
<li>
<span> </span>
<a href = "#"> menu deux </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> Sous-meninu un </a> </dd>
<dd> <a href = "#"> SubMenu 2 </a> </dd>
<dd> <a href = "#"> Sous-meninu trois sous-menu trois </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> menu trois </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> Sous-meninu un </a> </dd>
<dd> <a href = "#"> SubMenu 2 </a> </dd>
<dd> <a href = "#"> Sous-meninu trois sous-menu trois </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> menu quatre </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> Sous-meninu un </a> </dd>
<dd> <a href = "#"> SubMenu 2 </a> </dd>
<dd> <a href = "#"> Sous-meninu trois </a> </dd>
<dd> <a href = "#"> SubMenu quatre </a> </dd>
</dl>
</li>
<li> <a href = "#"> menu cinq </a> </li>
<li> <a href = "#"> hommes vi </a> </li>
<li> <a href = "#"> menu sept </a> </li>
<li> <a href = "#"> menu 8 </a> </li>
</ul>
</ nav>
</docy>
</html>