Kali ini kita akan membuat satu lagi tutorial pembuatan menu pada sebuah web. Seperti yang pernah saya katakan bahwa banyak cara mendesain sebuah menu pada web termasuk pada sebuah blog. Jika postingan sebelumnya membahas pembuatan menu drop down horizontal dengan menggunakan JavaScript, maka kali ini saya akan memberikan tutorial web tentang bagaimana membuat menu drop down dengan CSS.
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.
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 HTML dari 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 horizontal biasa, sama seperti tutorial menu horizontal yang pernah saya buat pada postingan yang sebelumnya. Silahkan baca disini. 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 (perhatikan end tag </li> yang berwarna merah). Pada browser, struktur tersebut akan terlihat seperti gambar berikut:
- Karena kita ingin membuat sebuah menu drop down yang tampil secara horizontal, maka kita akan mengatur tampilannya dengan menggunakan CSS. Postingan yang lalu hanya membahas pembuatan menu horizontal yang biasa, sehingga 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;
}
#menu 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:
#menu li {
float: left;
}
#menu li --> artinya hampir sama dengan #menu 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.
#menu ul ul {
visibility:hidden;
width:149px;
}
#menu 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:
#menu ul li:hover ul,
#menu 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
#menu 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. Untuk mengetahui kode warna CSS yang lain silahkan buka disini.
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
- Untuk menghilangkan list style pada menu drop down (seperti yang terlihat pada gambar dilangkah 2:
- 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:
.bmp)
