Membuat Menu Dropdown dengan CSS

Menu Dropdown biasanya digunakan untuk memberikan navigasi ke seluruh halaman dalam sebuah website. Menu ini akan sangat bagus untuk tampilan pada Desktop, tetapi tidak demikian halnya dengan tampilan pada perangkat mobile. Untuk membuat menu dropdown dapat dilakukan hanya dengan menggunakan kode HTML dan CSS saja. Berikut akan disajikan cara paling sederhana untuk membuat menu dropdown.

Apa yang harus dipahami sebelumnya ?
1. Dasar-dasar HTML
2. Dasar-dasar CSS

Langkah-langkah

1. Membuat File HTML

Cara terbaik untuk membuat navigasi adalah dengan menggunakan daftar. Untuk membuat struktur HTML yang baik, di sini setiap daftar akan diberi kelas.

<ul class="menu_system">
<li class="menu_item"><a href="#">Menu 1</a>
<ul class="drop_menu">
    <li class="drop_item"><a href="#">11</a></li>
    <li class="drop_item"><a href="#">12</a></li>
    <li class="drop_item"><a href="#">13</a></li>
    </ul>
  </li>
<li class="menu_item"><a href="#">Menu 2</a>
<ul class="drop_menu">
    <li class="drop_item"><a href="#">21</a></li>
    <li class="drop_item"><a href="#">22</a></li>
    <li class="drop_item"><a href="#">23</a></li>
    </ul>
  </li>
<li class="menu_item"><a href="#">Menu 3</a>
<ul class="drop_menu">
    <li class="drop_item"><a href="#">31</a></li>
    <li class="drop_item"><a href="#">32</a></li>
    <li class="drop_item"><a href="#">33</a></li>
    </ul>
  </li>
</ul>
Dari kode di atas dapat dilihat bahwa kita mendefinisikan sebuah daftar <ul> dengan kelas “menu_system” yang di dalamnya terdapat daftar item <li> Menu 1, Menu 2 dan Menu 3 dengan kelas “menu_item”. Di dalam Menu 1 terdapat daftar <ul> dropdown menu dengan kelas “drop_menu” yang didalamnya terdapat daftar item <li> 11, 12 dan 13 dengan kelas “drop_item”.
Catatan : selalu gunakan link <a href=”#”> pada setiap daftar item <li>. Tanda “#” dapat diganti dengan tujuan halaman pada saat item ini di klik.

2. Mengatur CSS

Untuk membuat semua item menu berada pada baris yang sama, maka digunakan kode CSS berikut :

.menu_item {
display:inline;
position:relative;
}

Selanjutnya untuk menentukan posisi dan menyembunyikan semua menu dropdown digunakan kode CSS berikut :

.drop_menu {
display:none;
position:absolute;
}

Dan inilah kuncinya, setiap kali kursor menunjuk ke Item Menu (Menu 1, Menu 2 atau Menu 3), maka isi dari Dropdown menu yang berada di dalamnya akan ditampilkan. Berikut adalah kode CSS yang digunakan :

.menu_item:hover .drop_menu {display:block;}

Cukup sederhana bukan ? ….
Untuk mengatur warna dan jarak Item Menu dapat digunakan CSS berikut :

.menu_item {background-color:#ccc; padding:20px;}
.drop_menu {background-color:#ccc; padding:30px;}
.drop_item {list-style-type:none; padding:10px;}

Kode Komplit


<style>
/* Dasar Menu Drop Down */
.menu_item {display:inline;position:relative;}
.drop_menu {display:none; position:absolute;}
.menu_item:hover .drop_menu {display:block;}
/* Warna dan Jarak Item */
.menu_item {background-color:#ccc; padding:20px;}
.drop_menu {background-color:#ccc; padding:30px;}
.drop_item {list-style-type:none; padding:10px;}

</style>
</head>
<body>
<ul class="menu_system">
<li class="menu_item"><a href="#">Menu 1</a>
<ul class="drop_menu">
    <li class="drop_item"><a href="#">11</a></li>
    <li class="drop_item"><a href="#">12</a></li>
    <li class="drop_item"><a href="#">13</a></li>
    </ul>
  </li>
<li class="menu_item"><a href="#">Menu 2</a>
<ul class="drop_menu">
    <li class="drop_item"><a href="#">21</a></li>
    <li class="drop_item"><a href="#">32</a></li>
    </ul>
  </li>
<li class="menu_item"><a href="#">Menu 3</a>
<ul class="drop_menu">
    <li class="drop_item"><a href="#">31</a></li>
    <li class="drop_item"><a href="#">32</a></li>
    <li class="drop_item"><a href="#">33</a></li>
    </ul>
  </li>
</ul>

Lihat Hasil

Labels: ,