Dropdown menu dengan css

Kali ini kita akan membuat satu lagi tutorial pembuatan menu pada sebuah web. Menu drop down dengan JavaScript maupun CSS sebenarnya sama saja jika dilihat dari segi fungsi atau kegunaan. Namun, jika memanfaatkan JavaScript biasanya menu yang dibuat lebih keren dan menarik dilihat karena mungkin animasi menu yang dihasilkan lebih bagus. Namun, JavaScript biasanya membuat halaman kita menjadi lebih berat. Sebaliknya jika menggunakan CSS, biasanya menu yang dihasilkan memang terlihat lebih kaku namun lebih ringan. Tampilannya juga bisa kita desain lebih menarik sesuai dengan kreasi kita memanfaatkan CSS dalam membuat menu tersebut. Berikut cara membuat sebuah menu drop down:


Saya akan menjelaskan steb by step bagaimana mendesain menu drop down tersebut.

Buatlah terlebih dahulu struktur drop down menu tersebut. Pembuatan struktur ini menggunakan tag yang berfungsi untuk membuat list, sebab menu-menu tersebut bisa dikatakan sebuah list dari item-item. Item-item itulah yang kita fungsikan sebagai menu. Tag tersebut adalah <ul></ul> sebagai level utama dan <li></li> sebagai sub level. Saya berikan sebuah contoh struktur HTMLdari menu drop down:

<ul>
<li><a href="URL 1">MENU 1</a></li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>

Perhatikan bahwa keseluruhan struktur dibungkus oleh tag <ul></ul>, artinya bahwa terdapat sebuah bagan list dimana item-item yang menjadi isi dari bagan tersebut (yang menjadi list) adalah "Menu 1", "Menu 2", dan "Menu 3" yang masing-masing dibungkus oleh tag <li></li>.

Struktur tersebut akan menjadi sebuah menu horizontalbiasa, sama seperti tutorial menu horizontal. Nah, kita akan membuat agar menu-menu tersebut mempunyai sub menu lagi yang mana sub menu tersebut muncul ketika menu utamanya di sorot (sehingga disebut drop down menu). Dengan demikian, kita akan membuat sebuah bagan list lagi dimana bagan ini akan berada di dalam bagan list menu utama. Dengan kata lain di dalam list akan ada list. Bingung ya?he3x. Strukturnya akan seperti ini:

<ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
<li><a href="URL sub 2">Sub menu 2</a></li>
<li><a href="URL sub 3">Sub menu 3</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>

Prinsip list tersebut sama dengan penjelasan pada langkah 1, hanya saja tag </li></li> tidak lagi hanya membungkus struktur "Menu 1", tetapi sudah ikut membungkus sub menu dari "Menu 1" juga.

Karena kita ingin membuat sebuah menu drop down yang tampil secara horizontal, maka kita akan mengatur tampilannya dengan menggunakan CSS. Pembuatan CSS kali ini juga akan sedikit berbeda. Untuk CSS menu drop down tersebut, kita buat seperti ini:


Untuk menghilangkan list style pada menu drop down (seperti yang terlihat pada gambar dilangkah 2:

#menuku ul {
list-style: none;
}

#menuku ul --> artinya kita mengatur bagan list (ul) yang ada didalam elemen yang kita beri atribut ID dengan nama "menuku". Elemen itu akan kita buat selanjutnya, apakah sebuah div, span, dan lain-lain.

list-style: none --> berfungsi untuk menghilangkan style dari list tersebut (style itu berupa bullet).

padding:0 dan margin:0 --> berfungsi agar jarak dari semua sisi pada bagan tersebut sebesar 0 sehingga tidak merusak layout dari bagan list menu tersebut.

Untuk membuat menu-menu tersebut tampil secara horizontal:
#menuku li {
float: left;
}

#menuku li --> artinya hampir sama dengan #menukuk ul, hanya saja ini digunakan untuk mengatur list-list menu itu sendiri, yaitu Menu 1, Menu 2, dan Menu 3 (yang kita buat pada langkah 1).

float: left --> artinya kita membuat menu-menu tersebut berjejer horizontal dari kiri

Karena kita ingin sub menu muncul hanya ketika pointer berada diatas menu utama, maka kita perlu menyembunyikan bagan list dari sub menu tersebut.

#menuku ul ul {
visibility:hidden;
width:149px;
}
#menuku ul ul --> artinya hampir sama dengan #menu ul namun struktur ini berfungsi untuk mengatur bagan list sub menu yang berada didalam bagan list menu utama.
visibility:hidden --> berfungsi untuk menghilangkan bagan list sub menu (ul yang kedua)
width:149px --> berfungsi untuk membuat lebar bagan list sub menu tersebut sebesar 149px.

Agar sub menu tersebut muncul ketika menu utama disorot, maka kita buat struktur CSS seperti berikut:
#menuku ul li:hover ul,
#menuku ul a:hover ul{
visibility:visible;
}

CSS tersebut berfungsi agar bagan list sub menu akan terlihat ketika pointer berada di atas menu utama serta di atas link yang ada pada bagan list sub menu tersebut.

Kita akan mengatur sedikit tampilan dari menu-menu tersebut agar terlihat lebih menarik
#menuku li a {
background-color:#000000;
height: 2em;
width: 149px;
display: block;
border: 0.1em solid #dcdce9;
color: #ffffff;
text-decoration: none;
text-align: center;
}

Karena menu tersebut akan menjadi berupa link, maka kita akan mengatur tampilannya sebagai sebuah link.

background-color:#000000 -->warna backgroundnya adalah #000000
height: 2em --> tinggi dari menu tersebut sebesar 2em
width: 149px --> lebar menu sebesar 149px
display: block --> menu tersebut akan tampil dalam bentuk block

border: 0.1em solid #999999 --> border menu sebesar 0.1em, berbentuk solid, dan memiliki warna dengan kode #999999.

color: #FFFFFF --> tulisan menu akan berwarna #FFFFFF
text-decoration: none --> link menu tidak akan mempunyai garis bawah
text-align: center --> letak tulisan menu akan berada ditengah-tengah
Setelah membuat CSS dari drop down menu tersebut, maka selanjutnya adalah memasangkan atribut CSS pada bagan list menu tersebut. Kita akan memasukkan bagan list menu tersebut terlebih dahulu kedalam sebuah div, sehingga pada div tersebut atribut

"menuku" akan dipasang. Ganti struktur pada langkah 2 menjadi seperi berikut:

<div id="menuku">
<ul>
<li><a href="URL 1">MENU 1</a>
<ul>
<li><a href="URL sub 1">Sub menu 1</a></li>
<li><a href="URL sub 2">Sub menu 2</a></li>
<li><a href="URL sub 3">Sub menu 3</a></li>
</ul>
</li>
<li><a href="URL 2">MENU 2</a></li>
<li><a href="URL 3">MENU 3</a></li>
</ul>
</div>

Hasilnya akan seperti ini:

[You must be registered and logged in to see this image.]