Beberapa hari lalu ada seorang teman yang bertanya kepada saya, bagaimana sih caranya membuat drop down menu seperti yang ada di blog panduaji.net ini. Tidak mungkin saya menjawabnya melalu chat, karena ada beberapa langkah yang cukup panjang. Untuk itu saya putuskan untuk menuliskannya dalam sebuah postingan blog. Itung-itung buat nambah postingan blog 😀
Saya akan membagi tutorial ini menjadi dua langkah, yang pertama membuat daftar link dalam bentuk html dan yang kedua akan membuat kode css untuk merubah tampilan html tersebut supaya bisa menjadi sebuah menu drop down.
Membuat Menu Dalam HTML
Saya menggunakan list UL dan LI dalam pembuatan menunya, copy paste saja kode di bawah ini untuk membuat sebuah menu. Pada file html tersebut saya menggunakan tag nav untuk navigasi menu. Ini merupakan salah satu tag baru yang ada di html5
<nav>
<ul>
<li><a href="link home">Home</a></li>
<li><a href="link about">About</a>
<ul>
<li><a href="link contact">Contact</a></li>
<li><a href="link email">Email</a></li>
</ul>
</li>
</ul>
</nav>
Dengan kode diatas, drop down akan muncul ketika kita arahkan kursor ke menu about. Setelah itu ketika kamu simpan file diatas akana tampak seperti gambar di bawah ini.
 |
| Menu |
Selanjutnya kita akan membuat sebuah css untuk membuat menu tersebut tampak lebih cantik dengan fitur dropdown nya.
Membuat Efek Drop Down Menggunakan CSS
Selanjutnya masukkan kode css untuk mengubah tampilan menu diatas. Ada banyak cara yang bisa kamu gunakan untuk itu. Oleh karena itu silakan baca tulisan saya yang berjudul Kenalan dengan CSS untuk memilih mana yang paling cocok untuk kamu.
Tahap pertama sebelum membuat dropdown adalah mengubah arah menu menjadi horizontal. Gunakan kode css di bawah ini
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #efefef; /*background menu*/
padding: 0 20px;
list-style: none; /*menghilangkan titik pada list*/
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #6398DA; /*mengubah warna saat mouse berada diatasnya*/
}
nav ul li:hover a {
color: #fff; /*mengubah warna link saat mouse berada diatasnya*/
}
nav ul li a {
display: block; padding: 25px 40px; /*pengaturan link */
color: #666; text-decoration: none;
}
nav ul ul {
background: #6398DA; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #dfdfdf;
}
Saya bingung menjelaskan setiap bagiannya. Kamu coba simpan saja file tersebut kemudian coba buka di browser dan pelajari masing-masing fungsinya menggunakan inspect element di browser seperti chrome maupun firefox. Coba ubah parameternya supaya kamu bisa tahu masing-masing fungsi kode diatas.
Semoga tutorial singkat ini bisa membantumu dalam belajar membuat drop down menu dengan html dan css. Apabila kamu bingung, kami sudah menyediakan link download untuk tutorial ini. Kamu bisa download contoh
Leave a Comment