Oke, langsung saja kita memulai membuat menu dropdown sederhana dengan dimulai mengetikkan skrip/kode HTML dan disusul dengan pembuatan file CSS, lebih jelasnya ikuti langkah-langkah berikut:
Membuat menu dropdown: skrip HTML
Kita mulai dengan membuat wrapper(pembungkus) div dan kita akan memberikan class menu-wrap.
Skrip HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
</head>
<body>
<div class="menu-wrap">
</div>
</body>
</html>
Didalam wrapper kita masukkan daftar link yang ingin kita tampilkan, daftar link tersebut kita bungkus dengan tag <ul> dan tag <li>:
Skrip HTML
<ul>
<li><a href="beranda.html">Beranda</a></li>
<li><a href="tentang.html">Tentang Kami</a></li>
<li><a href="kontak.html">Kontak Kami</a>
<ul>
<li><a href="alamat.html">Alamat Kami</a></li>
<li><a href="kebijakan.html">Kebijakan</a></li>
</ul>
</li>
</ul>
Karena kita akan menggunakan eksternal CSS, maka tambahkan skrip berikut dalam tag head:
Skrip HTML
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
Sehingga skrip akhir kita menjadi seperti ini:
Skrip HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Judul Halaman Saya</title>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="menu-wrap">
<ul>
<li><a href="beranda.html">Beranda</a></li>
<li><a href="tentang.html">Tentang Kami</a></li>
<li><a href="kontak.html">Kontak Kami</a>
<ul>
<li><a href="alamat.html">Alamat Kami</a></li>
<li><a href="kebijakan.html">Kebijakan</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Simpan skrip diatas dengan nama “index.html”.
Membuat menu dropdown: skrip CSS
Setelah kita menyelesaikan pembuatan file HTML, selanjutnya dalam membuat menu dropdown kita akan melengkapinya dengan file CSS. Buat file baru dan simpan sebagai “style.css”, dalam file tersebut mulai ketikkan skrip css berikut:
Skrip CSS
* {margin:0; padding:0;}
body {
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}
.menu-wrap {
background-color:#53bd84;
height:50px;
line-height:50px;
position:relative;
width:770px;
margin:auto;
margin-top:80px;
}
Dalam skrip CSS diatas fungsi skrip pada baris no 1 adalah untuk mereset padding dan margin default dari browser.
Pada skrip no 4 sampai no 6, kita tentukan warna background dari body dan menentukan warna sekaligus ukuran dari font.
Untuk skrip no 10 sampai no 16, untuk mengatur segala atribut dan nilai dari class menu wrap mulai dari lebar, tinggi dan posisi. Selanjutnya kita menambahkan skrip CSS berikut:
Skrip CSS
.menu-wrap ul {
list-style:none;
}
.menu-wrap ul li a {
float:left;
width:150px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
text-transform:uppercase;
}
.menu-wrap ul li a:hover {
background-color:#666;
display:block;
}
.menu-wrap ul li:hover ul {
display:block;
}
.menu-wrap ul ul {
display:none;
list-style:none;
position:absolute;
background-color:#53bd84;
left:300px;
top:50px;
width:190px;
}
.menu-wrap ul ul li a {
float:none;
display:block;
padding-left:30px;
text-align:left;
width:160px;
}
.menu-wrap ul ul li a:hover {
color:#fff;
}
Pada skrip no 2 diatas berfungsi untuk menghilangkan style bawaan dari tag <ul>.
Skrip no 6 sampai no 12 berfungsi untuk mengatur ukuran, posisi dan merubah tulisan link ke huruf besar.
Skrip no 16 sampai no 17 berfungsi untuk memberikan warna background ketika link di sorot/hover.
Pada skrip no 25 sampai no 31 mengatur agar secara default sub link tidak tampil, karena sub link akan tampil ketika link utama di sorot/hover.
Sehingga skrip CSS akhir kita menjadi seperti ini:
Skrip CSS
* {margin:0; padding:0;}
body {
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}
.menu-wrap {
background-color:#53bd84;
height:50px;
line-height:50px;
position:relative;
width:770px;
margin:auto;
margin-top:80px;
}
.menu-wrap ul {
list-style:none;
}
.menu-wrap ul li a {
float:left;
width:150px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
text-transform:uppercase;
}
.menu-wrap ul li a:hover {
background-color:#666;
display:block;
}
.menu-wrap ul li:hover ul {
display:block;
}
.menu-wrap ul ul {
display:none;
list-style:none;
position:absolute;
background-color:#53bd84;
left:300px;
top:50px;
width:190px;
}
.menu-wrap ul ul li a {
float:none;
display:block;
padding-left:30px;
text-align:left;
width:160px;
}
.menu-wrap ul ul li a:hover {
color:#fff;
}
Simpan dan file tersebut, selanjutnya buka file “index.html” dan halaman web akan menampilkan seperti gambar berikut:
Tampilan menu dropdown
sumber : www.nyekrip.com
.jpg)
