Navigasi dengan menu dropdown adalah salah satu elemen yang umum ditemukan dalam desain web modern. Menu dropdown memungkinkan Anda menyajikan pilihan navigasi yang lebih banyak dalam bentuk daftar hierarkis, sehingga pengguna dapat dengan mudah mengakses halaman atau bagian yang diinginkan. Dalam tutorial ini, kami akan memandu Anda untuk membuat navigasi dengan menu dropdown menggunakan HTML dan CSS.
Dalam contoh yang akan kita buat, navigasi akan terdiri dari beberapa item menu utama dan beberapa sub-menu yang akan muncul saat pengguna mengarahkan kursor pada item menu utama yang memiliki submenu.
Langkah-langkah yang akan kami jelaskan meliputi:
Mari kita mulai membuat navigasi dengan menu dropdown menggunakan HTML dan CSS. Untuk membuat navigasi dengan menu dropdown menggunakan HTML dan CSS, Anda dapat mengikuti langkah-langkah berikut:
Baca Juga: Daftar Isi Tutorial HTML dan CSS
Struktur Dasar HTML
Mulai dengan struktur dasar HTML untuk halaman web Anda. Dalam contoh ini, kita akan membuat navigasi dengan menu dropdown sederhana.
<!DOCTYPE html>
<html>
<head>
<title>Menu Dropdown</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav>
<ul class="menu">
<li><a href="#">Beranda</a></li>
<li><a href="#">Tentang Kami</a></li>
<li class="dropdown">
<a href="#">Layanan</a>
<ul class="submenu">
<li><a href="#">Layanan 1</a></li>
<li><a href="#">Layanan 2</a></li>
<li><a href="#">Layanan 3</a></li>
</ul>
</li>
<li><a href="#">Kontak</a></li>
</ul>
</nav>
</body>
</html>
CSS untuk Menu Dropdown
Buat file CSS terpisah atau gunakan inline CSS untuk mengatur tampilan menu dropdown. Dalam contoh ini, kita akan menggunakan file eksternal “styles.css”.
/* Navigasi */
nav {
background-color: #333;
}
/* Daftar menu utama */
.menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
/* Setiap item menu */
.menu li {
padding: 10px 20px;
}
.menu li a {
color: #fff;
text-decoration: none;
}
/* Saat kursor mengarah ke item menu */
.menu li:hover {
background-color: #555;
}
/* Menu dropdown */
.submenu {
display: none;
position: absolute;
background-color: #555;
}
/* Item di menu dropdown */
.submenu li {
padding: 10px 20px;
}
.submenu li a {
color: #fff;
text-decoration: none;
}
/* Saat kursor mengarah ke item di menu dropdown */
.submenu li:hover {
background-color: #777;
}
/* Tampilkan menu dropdown saat item menu utama diklik atau diarahkan */
.menu li:hover .submenu {
display: block;
}
Dalam contoh CSS di atas, kita menggunakan pseudo-class “:hover” untuk mengatur menu dropdown menjadi terlihat saat item menu utama diarahkan. Properti “display: none;” pada submenu mengarahkan agar menu dropdown awalnya disembunyikan, dan saat item menu utama diarahkan, properti “display: block;” mengubahnya menjadi terlihat.
Baca Juga: Menggunakan CSS Inline, Internal, dan Eksternal
Pastikan untuk menyesuaikan warna, ukuran, dan gaya lainnya sesuai dengan desain Anda. Sekarang, Anda harus memiliki navigasi dengan menu dropdown yang berfungsi dengan baik. Jika perlu, Anda dapat mengembangkan dan menyesuaikan kode ini untuk membuat tampilan navigasi yang lebih kompleks dan interaktif.
