Kali ini Saya akan menjelaskan langkah demi langkah tentang bagaimana sebuah elemen list bisa menjadi sebuah menu navigasi dan juga submenunya. Mungkin tidak begitu detail, tapi setidaknya ini semua cukup untuk membantu Anda mempermudah memodifikasi setiap template drop down menu yang Anda dapatkan.
Pertama-tama, mungkin Anda merasa penasaran tentang bagaimana bisa sebuah elemen list/daftar bisa menjadi menu navigasi bertingkat. bagaimana bisa saat sebuah menu disentuh, beberapa menu tambahan akan muncul di bawahnya??
Dasar - Membangun Daftar
Setiap menu navigasi yang baik adalah berupa elemen unordered list (<ul>) yang dibungkus oleh elemen <nav>. Pertama-tama kita buat kerangka menu sederhana seperti ini:
<nav id='nav'>
<ul>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Profil</a></li>
<li><a href='#'>Jurnal</a></li>
<li><a href='#'>Komentar</a></li>
</ul>
</nav>Dari kode di atas bisa Anda bayangkan bahwa menu tersebut terdiri dari menu Beranda, Profil, Jurnal dan Komentar. Elemen <a> yang mengelilingi setiap menu adalah link yang digunakan untuk menentukan ke mana/ke halaman mana menu akan mengantarkan Anda saat menu tersebut diklik. (# mewakili URL halaman).
Hasil jadinya kira-kira seperti ini:
Menambahkan Sub-Sub Menu
Setelah itu kita bisa menambahkan sub-sub daftar sebagai submenu yang nantinya akan menjadi drop down menu saat menu telah selesai dibuat. Caranya cukup dengan menyisipkan elemen <ul> baru ke dalam setiap elemen <li> yang ingin dilengkapi dengan submenu.
Penambahan submenu tidak ada batasan. Setiap elemen <li> bisa disisipi oleh elemen <ul> baru, dan setiap elemen <li> yang berada di dalam setiap elemen <ul> baru juga bisa disisipi dengan elemen <ul> yang baru lagi sebagai anak menu level 3 dan seterusnya:
<nav id='nav'>
<ul>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Profil</a>
<ul>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu2</a></li>
<li><a href='#'>Submenu3</a></li>
<li><a href='#'>Submenu4</a></li>
</ul>
</li>
<li><a href='#'>Jurnal</a></li>
<li><a href='#'>Komentar</a></li>
</ul>
</nav><nav id='nav'>
<ul>
<li><a href='#'>Beranda</a></li>
<li><a href='#'>Profil</a>
<ul>
<li><a href='#'>Submenu1</a></li>
<li><a href='#'>Submenu2</a>
<ul>
<li><a href='#'>Submenu2.1</a></li>
<li><a href='#'>Submenu2.2</a></li>
<li><a href='#'>Submenu2.3</a></li>
<li><a href='#'>Submenu2.4</a></li>
</ul>
</li>
<li><a href='#'>Submenu3</a></li>
<li><a href='#'>Submenu4</a></li>
</ul>
</li>
<li><a href='#'>Jurnal</a></li>
<li><a href='#'>Komentar</a></li>
</ul>
</nav>Beginilah kira-kira setelah Saya menambahkan sub-sub menu pada menu Beranda, Profil, Jurnal dan Komentar. Khusus untuk menu Komentar Saya telah menambahkan satu level lagi pada salah satu anak menu:
Metode Menampilkan dan Menghilangkan Sub-Sub Menu dengan CSS
Selanjutnya, kita hilangkan anak-anak menu dengan CSS. Caranya cukup dengan menargetkan elemen <ul> yang merupakan anak elemen <li> utama saja, yaitu elemen yang tidak memiliki induk selain elemen <ul> terdekat dari <nav>:
#nav li ul {
display:none;
}Kode di atas akan menghilangkan elemen <ul> yang berada di dalam elemen <li> yang berada di dalam elemen <nav id='nav'>
Setelah itu kita ingin agar elemen <ul> yang merupakan anak dari elemen <li> muncul saat elemen <li> disentuh oleh pointer mouse. Ini bisa kita lakukan dengan CSS Pseudo Classes :hover
/*
Hilangkan semua elemen <ul>
yang merupakan anak dari elemen <li>
yang berada paling dekat dengan elemen <nav id='nav'>
*/
#nav li ul {
display:none;
}
/*
Saat pointer mouse berada di atas elemen <li>,
ubah status elemen <ul> yang tadinya berupa display:none
menjadi display:block
*/
#nav li:hover > ul {
display:block;
}Kode #nav li:hover ul {display:block;} sebenarnya bisa digunakan dan tampak lebih masuk akal, tapi ini adalah selektor yang tidak spesifik. Kode ini hanya efektif saat diterapkan pada menu yang hanya memiliki satu level anak menu saja.#nav li:hover > ul {display:block;} lebih spesifik, karena selektor ini hanya akan mencari anak elemen <ul> yang merupakan anak pertamanya saja, sedangkan elemen <ul> yang merupakan anak dari anak level pertama tidak akan ikut mendapatkan deklarasi display:block.
Tahap Pemodelan
Bagi Anda, mungkin ini adalah bagian yang cukup berat, yaitu saat mencoba untuk mengubah elemen list menjadi menu navigasi dengan orientasi horizontal. Tapi jangan khawatir. Pada dasarnya hanya ada beberapa bagian pokok saja yang harus diperhatikan, sementara yang lainnya merupakan dekorasi tambahan:
Selektor #nav umumnya hanya digunakan untuk mendeklarasikan hal-hal global seperti jenis font menu, warna latar belakang dan warna huruf secara keseluruhan:
#nav {
font:normal 12px Arial,Sans-Serif;
}Selektor #nav li digunakan untuk mengatur penampilan elemen <li>. Di sini kita akan menghilangkan bulatan-bulatan yang berada di samping daftar dengan cara mendeklarasikan list-style:none dan juga mengatur orientasi daftar menjadi horizontal dengan mendeklarasikan float:left dan display:inline
#nav li {
float:left;
display:inline;
list-style:none;
position:relative; /* Digunakan untuk memastikan bahwa anak elemen <ul> dengan posisi absolute akan memposisikan dirinya terhadap elemen ini, bukannya terhadap layar browser */
}(Baca!)
Atur posisi anak elmen <ul> sebagai elemen absolute dengan mendeklarasikan position:absolute. Selain itu, atur juga ukuran lebarnya. Dan juga, untuk anak-anak elemen <li> yang ada di dalamnya harus berupa elemen blok, oleh karena itu kita harus menetralkan deklarasi float:left dan display:inline yang ada pada deklarasi yang sudah kita tuliskan sebelumnya:
#nav li ul {
position:absolute;
top:100%;
left:0px;
z-index:10;
width:120px;
display:none;
}
#nav li li {
float:none;
display:block;
}
#nav li:hover > ul {
display:block;
}Dan beginilah kira-kira hasil akhirnya. Memang masih tampak berantakan, tapi kita sudah bisa membuat sistemnya berfungsi!
Sentuhan Akhir
Pada dasarnya pekerjaan kita sudah berhasil sampai sejauh ini. Sisanya tinggal tahap penggantengan dan penambahan beberapa efek yang umum. Misalnya, saat menu-menu tersebut disentuh, kita ingin agar menu tersebut berubah warna menjadi biru tua. Kita bisa menerapkan selektor #nav a:hover {background-color:darkblue;} untuk mengubah warna menu menjadi biru tua saat pointer mouse berada di atasnya:
#nav {
background-color:black;
color:white;
font:normal 10px Arial,Sans-Serif;
text-transform:uppercase;
}
#nav ul {
margin:0px 0px;
padding:0px 0px;
height:30px;
}
#nav li { /* Mengatur orientasi menu menjadi horizontal */
margin:0px 0px;
padding:0px 0px;
float:left;
display:inline;
list-style:none;
position:relative;
}
#nav a {
display:block; /* Penting! */
padding:0px 15px;
line-height:30px;
text-decoration:none;
background-color:black;
color:white;
}
#nav a:hover {
background-color:darkblue; /* Warna menu saat pointer mouse berada di atasnya */
}
#nav li ul {
width:170px;
height:auto;
position:absolute;
top:100%;
left:0px;
z-index:10;
display:none; /* Menyembunyikan submenu */
}
#nav li li {
display:block; /* Menetralkan display:inline */
float:none; /* Menetralkan float:left */
}
#nav li:hover > ul {
display:block; /* Menampilkan submenu yang disembunyikan */
}
#nav li ul ul {
left:100%; /* Menggeser anak menu level 3 dan di atasnya ke sebelah paling kanan */
top:0px;
}Secara default, setiap elemen pada dasarnya memiliki margin dan paddingnya sendiri-sendiri yang telah ditentukan oleh masing-masing browser. Oleh karena itu, kita seringkali harus menetralkan nilai margin dan padding bawaan dari browser dengan menuliskannya di dalam selektor seperti ini:
#nav ul {
margin:0px 0px;
padding:0px 0px;
}
#nav li {
margin:0px 0px;
padding:0px 0px;
}Tingkat Lanjut - Menerapkan JQuery untuk Menciptakan Efek
Hal pertama yang harus Anda perhatikan adalah bahwa saat kita menggunakan JavaScript untuk menciptakan efek, seringkali/disarankan agar kita menghilangkan deklarasi yang berhubungan degan :hover yang terkait langsung kepada proses pemunculan/penghilangan submenu. Ini dilakukan karena browser akan cenderung menjalankan perintah termudah. Jika sebuah browser ditawari dua pilihan antara #nav li:hover > ul {display:block;} dan $('#nav li').hover(function() {$(this).children('ul').slideDown();}, function() { ... }); maka browser akan cenderung memilih #nav li:hover > ul {display:block;} untuk menampilkan submenu yang tersembunyi dibandingkan dengan $('#nav li').hover(function() {$(this).children('ul').slideDown();}, function() { ... });.
Demi kelancaran efek, sebelum menerapkan JavaScript (JQuery), kita buang terlebih dahulu selektor #nav li:hover > ul dari kode CSS. Tugas pemunculan dan penghilangan submenu akan digantikan oleh JavaScript:
#nav li:hover > ul {
display:block;
}JQuery
Kodenya sangat sederhana. Kita hanya akan menuliskan perintah bahwa saat pointer mouse berada di atas elemen <li>, tampilkan submenu yang ada di dalamnya dengan efek .slideDown():
$(function() {
// Saat pointer mouse berada di ats menu...
$('#nav li').hover(function() {
// Tampilkan submenu dengan efek .slideDown()
$(this).children('ul').slideDown('fast');
}, function() {
// Sembunyikan submenu dengan efek .slideUp() saat pointer mouse meninggalkannya
$(this).children('ul').slideUp('fast');
});
});Unduh/Download Template Menu Lengkap
Saya telah membuat paket drop down menu lengkap dimulai dari menu horizontal, vertikal, drop down menu dengan submenu vertikal dan horizontal, menu terbalik, menu dengan efek JQuery dan beberapa yang lain. Ini semua adalah template dasar yang sudah Saya buat sesederhana mungkin dan Saya harap dapat mempermudah Anda untuk memodifikasi sehingga dapat menciptakan kreasi-kreasi baru yang lebih dahsyat dan ganteng. Pokoknya tinggal enaknya sajalah!
Tidak ada komentar:
Posting Komentar