Diksia.com - Memiliki navigasi website yang efisien adalah kunci utama dalam memberikan pengalaman terbaik bagi pengguna. Salah satu elemen navigasi yang paling populer dan efektif adalah menu dropdown. Menu ini memungkinkan kita untuk menyembunyikan opsi submenu, sehingga tampilan navigasi utama tetap ringkas dan rapi.
Kabar baiknya, kamu tidak perlu repot dengan JavaScript yang kompleks untuk membuatnya. Cukup dengan keajaiban HTML untuk strukturnya dan CSS untuk gayanya, kita bisa menciptakan menu dropdown yang fungsional dan elegan.
Kenapa Dropdown Menu CSS Sederhana Penting?
Dalam dunia pengembangan web yang bergerak cepat, prinsip kemudahan dan kecepatan menjadi prioritas. Menu dropdown berbasis CSS murni menawarkan keuntungan signifikan:
- Performa Unggul: Tidak memerlukan skrip tambahan (seperti JavaScript) untuk menampilkan submenu, membuat waktu muat halaman lebih cepat.
- Aksesibilitas Tinggi: Struktur HTML yang baik dan kontrol CSS yang tepat dapat meningkatkan aksesibilitas web.
- Perawatan Mudah: Kode yang minim dan terfokus pada dua bahasa dasar membuatnya gampang dipelihara dan dimodifikasi.
Ini adalah solusi ideal untuk kamu yang ingin meningkatkan struktur situs tanpa mengorbankan performa.
Tiga Langkah Membangun Struktur Dasar (HTML)
Langkah pertama yang harus kita lakukan adalah menyusun kerangka menu menggunakan HTML. Kita akan memanfaatkan elemen daftar tak berurutan <ul> dan <li> karena secara semantik sangat cocok untuk struktur navigasi.
- Siapkan Wadah Utama: Buat sebuah
<div>atau<ul>sebagai kontainer menu navigasi kamu. Beri nama kelas (misalnya,dropdown). - Buat Menu Induk: Di dalam wadah utama, masukkan
<li>untuk menu utama (yang akan diklik atau disentuh). - Sembunyikan Submenu: Di dalam
<li>menu induk, masukkan<ul>atau<div>lagi untuk submenu. Bagian inilah yang akan kita sembunyikan dengan CSS. Beri nama kelas yang berbeda (misalnya,isi-dropdown).
Contoh Struktur Sederhana:
HTML
<div class="dropdown">
<button class="tombol-dropdown">Menu Utama</button>
<div class="isi-dropdown">
<a href="#">Sub Menu 1</a>
<a href="#">Sub Menu 2</a>
</div>
</div>
Menyulap Tampilan dengan CSS Murni
Setelah struktur HTML siap, kini saatnya kita menyematkan sihir CSS untuk mengatur tampilan dan perilaku dropdown. Fokus utama kita adalah pada properti display dan position.
1. Styling Elemen Utama
Pertama, mari kita atur tampilan elemen utama. Pastikan bahwa kontainer utama (dropdown) memiliki position: relative;. Ini penting agar submenu bisa diposisikan secara absolut di dalamnya.
CSS
.dropdown {
position: relative; /* Wadah utama harus relatif */
display: inline-block; /* Agar lebarnya hanya seukuran konten */
}
2. Mengatur Submenu (Penyembunyian Awal)
Kunci dari menu dropdown adalah memastikan submenu tersembunyi pada kondisi awal. Gunakan display: none; untuk menyembunyikannya dan position: absolute; agar submenu tidak menggeser elemen lain ketika muncul. Tambahkan juga shadow untuk efek visual yang lebih modern.
CSS
.isi-dropdown {
display: none; /* Sembunyikan secara default */
position: absolute; /* Posisikan relatif terhadap .dropdown */
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1; /* Pastikan ia berada di atas elemen lain */
}
3. Memunculkan Submenu Saat Diarahkan (Hover)
Inilah trik utamanya! Kita menggunakan pseudo-class :hover pada elemen induk (dropdown) untuk mengubah properti display dari submenu (isi-dropdown) menjadi block. Dengan begitu, submenu hanya akan muncul saat kursor diarahkan ke menu utama.
CSS
.dropdown:hover .isi-dropdown {
display: block; /* Tampilkan saat kursor diarahkan ke .dropdown */
}
Tambahkan juga sedikit gaya pada tautan di submenu agar lebih menarik, misalnya dengan mengubah warna latar belakang saat hover di tautan tersebut.
CSS
.isi-dropdown a:hover {
background-color: #ddd;
}
Dengan langkah-langkah sederhana ini, kamu sudah berhasil menciptakan menu dropdown CSS yang bersih, cepat, dan modern. Selamat mencoba dan membuat navigasi website kamu semakin terstruktur!
