Komentar: Saya sering menemukan navigasi drop-down saat menjelajahi halaman web. Saya ingat bahwa saya biasa menerapkannya menggunakan JS. Namun, yang ingin saya perkenalkan selanjutnya dalam artikel ini adalah mengimplementasikannya menggunakan CSS3+HTML5. Jika Anda tertarik, jangan lewatkan. Saya harap Anda akan membantu Anda belajar CSS3 setelah membacanya.
Rendering adalah sebagai berikut:Kodenya adalah sebagai berikut:
<! Doctype html>
<Html>
<head>
<meta charset = "UTF-8" />
<Title> Navigasi HTML+CSS murni </iteme>
<!-Mulder->
<!-QQ: 10221408->
<!-Hanya mendukung Chrome Firefox->
<tyle>
*{
Margin: 0;
Padding: 0;
}
.clear: setelah {
jelas: keduanya;
isi: ".";
Tampilan: Blok;
Tinggi: 0;
Visibilitas: Tersembunyi;
}
nav {
Tampilan: blok inline;
Perbatasan: 1px Solid #505255;
Border-Bottom: 1px solid #282c2f;
-Moz-border-Radius: 5px;
-webkit-border-radius: 5px;
Margin: 50px;
-webkit-box-shadow: 1px 1px 3px #292929;
-Moz-box-shadow: 1px 1px 3px #292929;
}
Li {
List-style: tidak ada;
float: kiri;
Border-Right: 1px Solid #2E3235;
Posisi: kerabat;
/*latar belakang: -Moz-linear-gradient (atas, #fff, #555d5f 2%, #555d5f 50%, #3E4245 100%);
Latar Belakang: -WebKit-gradient (linear, 0 0, 0 100%, dari (#ffff), color-stop (2%, #555d5f), color-stop (50%, #555d5f), ke ( #3E4245));*
Latar belakang:#555d5f;
}
Li: Hover {
/*latar belakang: -Moz-linear-gradient (atas, #FFF, #3E4245 2%, #555d5f 80%, #55d5f 100%);
Latar Belakang: -webkit-gradient (linear, 0 0, 0 100%, dari (#ffff), color-stop (2%, #3E4245), color-stop (80%, #3E4245), ke ( #555d5f));*
Latar Belakang:#3E4245;
-Moz-transisi: latar belakang 1S kemudahan;
-webkit-transisi: latar belakang 1S kemudahan;
}
Li A {
Tampilan: Blok;
Tinggi: 40px;
Line-Height: 40px;
padding: 0 30px;
font-size: 12px;
Warna: #FFFF;
Text -Shadow: 0px -1px 0px #000;
Dekorasi Teks: Tidak Ada;
SPACE PUTIH: Nowrap;
Border-left: 1px solid #999e9f;
Border-top: 1px solid #999e9f;
-Moz-border-top-left-radius: 2px;
-webkit-border-top-left-radius: 2px;
z-index: 100;
}
Li> A {
Posisi: kerabat;
}
li.first 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-Right: 0 Tidak Ada;
}
dl {
Posisi: Absolute;
Tampilan: Blok;
Atas: 40px;
Kiri: -25px;
Lebar: 165px;
Latar belakang:#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 {
Atas: 50px;
Tampilan: Blok;
Lebar: 145px;
padding: 10px;
}
dl a {
Latar belakang: transparan;
Perbatasan: 0 tidak ada;
-Moz-border-Radius: 5px;
-webkit-border-radius: 5px;
-Moz-transisi: latar belakang 0,5-an kemudahan;
-webkit-transisi: latar belakang 0,5-an kemudahan;
z-index: 50;
}
dl a: hover {
Warna: #fff;
Latar belakang:#999e9f;
-Moz-transisi: latar belakang 0,3 kemudahan-dalam-keluar, warna 0,3-ke-out;
-webkit-transisi: latar belakang 0.3 kemudahan-dalam-keluar, warnanya kemudahan-in-out;
}
dd {
margin-top: -40px;
Opacity: 0;
Lebar: 145px;
-webkit-transition-property: semua;
/*-Webkit-transisi-waktu-fungsi: Cubic-bezier (5,0,5,0);*/
-Moz-transition-property: semua;
/*-Moz-transisi-waktu-fungsi: Cubic-bezier (5,0,5,0);*/
/*-Webkit-transisi-Delay: 5s;
-Moz-transisi-DELAY: 5S;*/
}
Li: Hover DD {
margin-top: 0;
Opacity: 1;
}
Li dd: nth-child (1) {
-webkit-transisi-durasi: 0.1s;
-Moz-transisi-durasi: 0,1s;
}
Li dd: nth-child (2) {
-webkit-transisi-durasi: 0.2s;
-Moz-transisi-durasi: 0,2S;
}
Li dd: nth-child (3) {
-webkit-transisi-durasi: 0,3s;
-Moz-transisi-durasi: 0,3S;
}
Li dd: nth-child (4) {
-webkit-transisi-durasi: 0.4s;
-Moz-transisi-durasi: 0,4s;
}
dt {
Tampilan: Tidak Ada;
margin-top: -25px;
Padding-top: 15px;
Tinggi: 10px;
}
Li: Hover dt {
Tampilan: Blok;
}
.Darrow {
float: benar;
Margin: 18px 10px 0 0;
Perbatasan-lebar: 5px;
Border-color: #fff transparan transparan transparan;
Gaya perbatasan: solid;
Lebar: 0;
Tinggi: 0;
Line-Height: 0;
meluap: tersembunyi;
kursor: pointer;
Text -Shadow: 0px -1px 0px #000;
-webkit-box-shadow: 0px -1px 0px #000;
-Moz-box-shadow: 0px -1px 0px #000;
}
.anak panah{
margin: 0 otomatis;
margin-top: -5px;
Tampilan: Blok;
Lebar: 10px;
Tinggi: 10px;
Latar belakang:#222222;
-webkit-transform: rotate (45deg);
-Moz-Transform: rotate (45deg);
}
</tyle>
</head>
<body>
<av>
<ul>
<li> <a href = "#"> menu satu </a> </li>
<li>
<span> </span>
<a href = "#"> menu dua </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> submenu satu </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu tiga submenu tiga </a> </dd>
</ll>
</li>
<li>
<span> </span>
<a href = "#"> menu tiga </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> submenu satu </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu tiga submenu tiga </a> </dd>
</ll>
</li>
<li>
<span> </span>
<a href = "#"> menu empat </a>
<dl>
<dt> <span> </span> </dt>
<dd> <a href = "#"> submenu satu </a> </dd>
<dd> <a href = "#"> submenu 2 </a> </dd>
<dd> <a href = "#"> submenu tiga </a> </dd>
<dd> <a href = "#"> submenu empat </a> </dd>
</ll>
</li>
<li> <a href = "#"> menu lima </a> </li>
<li> <a href = "#"> pria vi </a> </li>
<li> <a href = "#"> menu tujuh </a> </li>
<li> <a href = "#"> menu 8 </a> </li>
</ul>
</sav>
</body>
</html>