A. Pengertian Menu Drop-Down
Sebuah menu drop-down (juga drop-down
menu atau daftar drop-down atau
"menu drop") adalah elemen kontrol grafis, mirip dengan kotak daftar, yang
memungkinkan pengguna untuk memilih salah satu nilai dari daftar. Ketika daftar
drop-down tidak aktif, akan menampilkan nilai tunggal. Ketika diaktifkan, ini akan menampilkan (turun ke bawah)
daftar nilai, dari mana pengguna dapat memilih salah satu. Ketika pengguna memilih nilai baru, kontrol beralih ke
keadaan tidak aktif tersebut, menampilkan nilai yang dipilih. Hal ini sering digunakan dalam desain antarmuka pengguna
grafis, termasuk desain web.
Drop-down menu adalah navigasi yang
banyak digunakan pada website, namun dalam pembuatannya drop-down menu selain
menggunakan CSS juga sering dibantu dengan Javascript.
B. Contoh Source Code Menu Drop-Down
Gambar 1 Menu Drop-Down
- Drop-Down ini ada 3 level menu :
- Main menu(level1)
- Submenu(level2)
- Sub-submenu(level3)
- Struktur HTML. Adapun struktur HTML Drop-down menu tersebut adalah sebagai berikut:
<!doctype html>
<html>
<head>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Services ▾</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">Graphic Design</a>
<ul>
<li><a href="#">Print Media</a></li>
<li><a href="#">Illustration</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</body>
</html>
- CSS Style. Pada bagian ini kita akan membahas CSS Style dari Drop-down menu:
nav
{
margin-top: 100px;
text-align: center;
}
nav ul{
font-family: Open Sans;
font-size: 16px;
padding: 0;
list-style: none;
text-align: center;
display: inline-table;
}
nav ul li{
float: left;
width: 200px;
text-align: center;
line-height: 21px;
background-color: #006b7a;
}
nav ul li a{
display: block;
padding: 5px 10px;
color: #FFF;
background-color: #006b7a;
text-decoration: none;
}
nav ul li a:hover{
color: #fff;
background-color: #007e94;
}
Dimulai dengan nav dan nav ul aplikasikan style pada level1(main menu).
Dimulai dengan nav dan nav ul aplikasikan style pada level1(main menu).
- Property text-align: center pada selector nav dan property display: inline-table pada selector nav li agar menu berada pada posisi tengah halaman.
- Property float: left; pada selector nav ul li untuk mengatur item list(li) dari menu item tersusun secara horizontal.
- Property display: block pada selector nav ul li a agar kotak masing-masing menu bisa memiliki width: 200px. Sehingga setiap menu bisa bersampingan satu sama lain dengan rapat tanpa celah.
- Property nav ul li ul{display: none;} berfungsi untuk menyembunyikan sementara drop-down menu. Tanpa property {display: none;} ini maka semua menu baik itu level1, level2 dan level3 akan terlihat secara bersamaan.
nav
ul li ul{
display: none;
}
nav ul li:hover ul{
display: block; /*display the dropdown */
}
Selanjutnya
kita akan masuk ke level2(submenu). Level2(submenu) yakni berupa drop-down menu hanya akan tampil/terlihat bila mouse cursor pengguna masuk ke daerah menu yang
dimaksud(hover). Pada saat tidak ada cursor yang memasuki daerah menu tersebut
maka submenu/drop-down menu tersebut tidaklah terlihat.
- Nav ul li{display: none;} berfungsi menyembunyikan submenu/drop-down menu pada saat cursor tidak memasuki daerah menu.
- Nav ul li: hover ul{display: block;} untuk menapilkan submenu/drop-down menu saat cursor memasuki daerah menu.
Gambar
3 Sub Menu/Drop-down(Level2)
nav
ul ul ul li {
display: none;
}
nav ul li ul li:hover ul li{
display: block;
float: none;
}
Selanjutnya
kita akan masuk ke level 3 (sub submenu). Pada level 3 ini pada
prinsipnya sama dengan level 2 dimana sub submenu ini tidak
akan tampil bila mouse cursor tidak memasuki daerah menu.
- Property nav ul ul ul li {display: none;} untuk menyembunyikan level 3 (sub submenu) pada saat cursor tidak memasuki daerah menu
- Property nav ul li ul li:hover ul li {display: block; float: none;} untuk menampilkan level 3 (sub submenu) saat cursor memasuki daerah menu
Dengan
semua CSS style yang telah kita terapkan pada HTML di atas
namun tampilan menu masih seperti gambar di bawah ini (Gambar 4). Pada (Gambar
4) level 3 (sub submenu) berada pada posisi di bawah submenu Graphic
Design (ditandai oleh garis merah putus-putus). Sedangkan posisi level
3 (sub submenu) yang kita inginkan ini pada daerah (2) yang ditandai
garis hijau putus-putus.
Gambar
4 level3 (sub submenu) berada pada posisi
di bawah submenu
Untuk
memindahkan level 3 (sub submenu) dari posisi (1) ke posisi (2) pada
Gambar (4) di atas kita butuh CSS selector berikut ini:
nav
ul ul li{
position: relative;
}
nav ul ul ul{
position: absolute;
top:0;
left:100%;
}
- Property nav ul ul ul{ position: absolute; top:0; left:100%;} untuk memindahkan menu level 3 (sub submenu) ke daerah (2).Property position : absolute menjadikannya lebih fleksibel
- Untuk bisa menggunakan position : absolute pada menu level 3 maka ancestor dari menu level 3 tersebut dikenakan position : relative , adapun ancestornya ada pada nav ul ul li{position: relative;}
Dari
keseluruhan CSS style yang kita buat maka hasil dari drop
down menunya adalah seperti pada (Gambar 5) di bawah ini:
Gambar
5 Tampilan akhir menu drop-down
#Selamat Mencoba Kawan.
Semoga bermanfaat ^_^
Tidak ada komentar:
Posting Komentar