Kommentar: Ich begegne oft auf die Dropdown-Navigation beim Durchsuchen von Webseiten. Ich erinnere mich, dass ich es früher mit JS implementiert habe. Was ich in diesem Artikel als nächstes vorstellen möchte, besteht jedoch darin, es mit CSS3+HTML5 zu implementieren. Wenn Sie interessiert sind, verpassen Sie es nicht. Ich hoffe, es wird für Sie hilfreich sein, CSS3 nach dem Lesen zu lernen.
Die Renderings sind wie folgt:Der Code ist wie folgt:
<! DocType html>
<html>
<kopf>
<meta charset = "utf-8" />
<title> reines HTML+CSS -Navigation </title>
<!-Mulder->
<!-QQ: 10221408->
<!-Nur Chrome Firefox unterstützen->
<Styles>
*{{
Rand: 0;
Polsterung: 0;
}
.clear: nach {
klar: beides;
Inhalt: ".";
Anzeige: Block;
Höhe: 0;
Sichtbarkeit: versteckt;
}
nav {
Anzeige: Inline-Block;
Grenze: 1PX Solid #505255;
Border-Bottom: 1PX Solid #282c2f;
-moz-border-radius: 5px;
-Webkit-Border-Radius: 5px;
Rand: 50px;
-Webkit-box-shadow: 1px 1px 3px #292929;
-moz-box-shadow: 1px 1px 3px #292929;
}
li {
Listenstil: Keine;
float: links;
Grenzrechte: 1PX Solid #2E3235;
Position: Relativ;
/*Hintergrund: -moz-linear-Gradient (Top, #FFF, #555D5F 2%, #555D5F 50%, #3E4245 100%);
Hintergrund: -Webkit-Gradient (linear, 0 0, 0 100%, von (#ffff), Color-Stop (2%, #555d5f), Color-Stop (50%, #555d5f), bis ( #3E4245);
Hintergrund:#555d5f;
}
Li: Hover {
/*Hintergrund: -moz-linear-Gradient (Top, #FFF, #3E4245 2%, #555D5F 80%, #555D5F 100%);
Hintergrund: -Webkit-Gradient (linear, 0 0, 0 100%, von (#ffff), Color-Stop (2%, #3E4245), Color-Stop (80%, #3E4245), bis ( #555D5F);
Hintergrund:#3E4245;
-moz-transition: Hintergrund 1s Easy-Out;
-Webkit-Übergang: Hintergrund 1s Easy-Out;
}
li a {
Anzeige: Block;
Höhe: 40px;
Zeilenhöhe: 40px;
Polsterung: 0 30px;
Schriftgröße: 12px;
Farbe: #ffff;
Text -Shadow: 0px -1px 0px #000;
Textdekoration: Keine;
weißer Raum: Nowrap;
Border-Links: 1PX Solid #999e9f;
Grenze: 1PX Solid #999e9f;
-moz-border-top-links-radius: 2px;
-Webkit-Border-Top-Links-Radius: 2px;
Z-Index: 100;
}
li> a {
Position: Relativ;
}
li.First a {
-moz-border-radius-topelft: 4px;
-moz-border-radius-bottomleft: 4px;
-Webkit-Border-Top-Links-Radius: 4px;
-Webkit-BORTOM-LINK-Radius: 4px;
}
li.last {
Grenzrechte: 0 Keine;
}
dl {
Position: absolut;
Anzeige: Block;
Top: 40px;
links: -25px;
Breite: 165px;
Hintergrund:#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 {
Top: 50px;
Anzeige: Block;
Breite: 145px;
Polsterung: 10px;
}
dl a {
Hintergrund: transparent;
Grenze: 0 Keine;
-moz-border-radius: 5px;
-Webkit-Border-Radius: 5px;
-moz-transition: Hintergrund 0,5 locker;
-Webkit-Übergangs: Hintergrund 0,5 Sees-Out;
Z-Index: 50;
}
dl a: hover {
Farbe: #fff;
Hintergrund:#999e9f;
-moz-Übergang: Hintergrund 0,3s Leichtigkeit in Out, Farbe 0,3s Leichtigkeit;
-Webkit-Übergang: Hintergrund 0,3s Leichtigkeit in Out, Farbe 0,3s Leichtigkeit;
}
dd {
Rand: -40px;
Deckkraft: 0;
Breite: 145px;
-Webkit-Übergangs-Property: Alle;
/*-Webkit-Übergang-Timing-Funktion: Kubikbezier (5,0,5,0);*//
-moz-transition-property: alle;
/*-Moz-Übergangs-Timing-Funktion: Kubikbezier (5,0,5,0);*//
/*-Webkit-Transformation-Delay: 5s;
-moz-transition-delay: 5s;*/
}
li: Hover dd {
Rand: 0;
Deckkraft: 1;
}
li dd: nth-Kind (1) {
-Webkit-Übergangsdauer: 0,1s;
-moz-transition es: 0,1s;
}
li dd: nth-Kind (2) {
-Webkit-Übergangsdauer: 0,2s;
-moz-transitionsdauer: 0,2s;
}
li dd: nth-Kind (3) {
-Webkit-Übergangsdauer: 0,3s;
-moz-transitionsdauer: 0,3s;
}
li dd: nth-Kind (4) {
-Webkit-Übergangsdauer: 0,4s;
-moz-transitionsdauer: 0,4s;
}
dt {
Anzeige: Keine;
Rand: -25px;
Padding-Top: 15px;
Höhe: 10px;
}
Li: Hover dt {
Anzeige: Block;
}
.Darrow {
float: rechts;
Rand: 18px 10px 0 0;
Randbreit: 5px;
Grenzfarbe: #FFF transparent transparent transparent;
Grenzstil: solide;
Breite: 0;
Höhe: 0;
Zeilenhöhe: 0;
Überlauf: versteckt;
Cursor: Zeiger;
Text -Shadow: 0px -1px 0px #000;
-Webkit-box-shadow: 0px -1px 0px #000;
-moz-box-shadow: 0px -1px 0px #000;
}
.Pfeil{
Rand: 0 Auto;
Rand: -5px;
Anzeige: Block;
Breite: 10px;
Höhe: 10px;
Hintergrund:#222222;
-Webkit-Transformation: Drehen (45 Grad);
-moz-transform: drehen (45 Grad);
}
</style>
</head>
<body>
<nav>
<ul>
<li> <a href = "#"> Menü eins </a> </li>
<li>
<span> </span>
<a href = "#"> Menü zwei </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> submenu One </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu drei submenu drei </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> Menü drei </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> submenu One </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu drei submenu drei </a> </dd>
</dl>
</li>
<li>
<span> </span>
<a href = "#"> Menü vier </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> submenu One </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu drei </a> </dd>
<dd> <a href = "#"> submenu vier </a> </dd>
</dl>
</li>
<li> <a href = "#"> Menü fünf </a> </li>
<li> <a href = "#"> Männer vi </a> </li>
<li> <a href = "#"> Menü sieben </a> </li>
<li> <a href = "#"> Menü 8 </a> </li>
</ul>
</nav>
</body>
</html>