Membuat Menu Dropdown CSS Bertingkat dengan Efek jQuery

Jumpa lagi dengan Pphoo™... (",)
Kali ini akan mengulas Membuat Menu Dropdown CSS Bertingkat dengan Efek jQuery (Multilevel Dropdown Menu).

Langsung aja kita ke TKP...

Langkah 1
Struktur dasar dari menu dropdown yang akan kita buat menggunakan stuktur XHTML misalnya seperti dibawah ini:

<ul id="nav">
    <li><a href="#">Beranda</a></li>
    <li><a href="#">Kontak</a></li>
    <li><a href="#">Arsip</a>
        <ul>
            <li><a href="#">jQuery</a>
                <ul>
                    <li><a href="#">Download</a></li>
                    <li><a href="#">Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">Bloghack</a></li>
            <li><a href="#">JavaScript</a></li>
        </ul>
    </li>
</ul>

Lihat hasil langkah 1 disini.

Langkah 2
Setelah itu kita menggunakan kode CSS untuk memperbaiki penampilannya:

#nav, #nav ul{
    margin:0;
    padding:0;
    list-style-type:none;
    list-style-position:outside;
    position:relative;
    line-height:1.5em;
}

Kode CSS diatas akan menghilangkan identasi pada browser dan membuang semua tanda bullet pada #nav dan semua elemen yang ada didalamnya. Kode "position:relative;" digunakan untuk menyusun ulang posisi menu yang akan ditempatkan secara relative dan absolute. Hal ini nantinya digunakan untuk menata menu-menu berikutnya yang akan disusun sesuai dengan isi blok serta atribut-atribut lainnya. Kode "line-height:1.5em;" digunakan untuk mendefinisikan tinggi setiap item menu. Kita dapat mengesetnya sesuai dengan tinggi yang kita inginkan, tetapi link teks akan berada pada posisi center secara vertikal hal ini makanya kita tidak memerlukan pengesetan margin dan padding pada kode CSS ini.

Langkah 3
Percantik menu dengan setting CSS lebih lanjut:

/* keadaan menu normal, aktif dan pernah diakses */
#nav a:link, #nav a:active, #nav a:visited {
   display:block; /* link menu di blok */
   padding:0px 5px; /* jarak atas bawah 0 dan kiri kanan 5 pixel */
   border:1px solid #333; /* ketebalan garis pinggir dan warna garis */
   color:#fff; /* warna teks */
   text-decoration:none; /* menghilangkan garis bawah pada link menu */
   background-color:#333; /* warna latar belakang menu */
}
/*  keadaan menu saat dipilih */
#nav a:hover {
   background-color:#fff; /* warna latar belakang menu */
   color:#333; /* warna huruf */
}

Kode CSS diatas ini pelengkap dari kode CSS sebelumnya, hal ini untuk membedakan efek pada menu yang sedang dipilih (hover) dengan menu yang tidak dipilih. Pada saat keadaan menu normal, aktif, dan pernah diakses maka menu memiliki tampilan yang sama.

Lihat hasil langkah 2 dan 3 disini.

Langkah 4
Menyempurnakan tampilan dengan kode CSS berikutnya:

#nav li {
   float:left; /* menu ditempatkan pada sebelah kiri */
   position:relative; /* posisi relatif */
}

Kode CSS diatas akan membuat menu tersusun secara horisontal

#nav ul {
   position:absolute; /* posisi absolute */
   width:12em; /* lebar menu */
   top:1.5em; /* jarak menu bagian atas */
   display:none; /* menu disembunyikan */
}

Kode CSS diatas digunakan untuk menyembunyikan menu berikutnya (menu utama tetap tampil). Lebar masing-masing menu ditetapkan 12em (width:12em;) hal ini agar menu memiliki ukuran tetap, jika kurang anda bisa set lebih lebar lagi. Jarak 1.5em (top:1.5em;) harus sama dengan jarak yang telah ditetapkan sebelumnya di kode CSS "line-height:1.5em;" pada #nav (lihat langkah 2)

#nav li ul a {
   width:12em;
   float:left;
}

Kode CSS diatas digunakan untuk mengeset lebar link menu selebar 12em.

#nav ul ul{
 top:auto;
} 
#nav li ul ul {
   left:12em;
   margin:0px 0 0 10px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
   display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
   display:block;
}

#nav ul ul dan #nav li ul ul digunakan untuk memperbaiki penempatan menu. Hal ini sangat penting untuk memperbaiki posisi menu saat dipilih (hover) dan susunan tingkatnya.

Sampai disini sebenarnya menu sudah bagus, silahkan lihat hasil langkah 4 disini. Tetapi menu belum memiliki efek yang lembut saat menu-menu ditampilkan.

Langkah 5

Sekarang mari kita kombinasikan menu-menu dropdown yang sudah kita buat dengan sentuhan efek jQuery, tambahkan kode dibawah ini:

$(document).ready(function(){
$(" #nav ul ").css({display: "none"});
$(" #nav li").hover(function(){
$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
},function(){
$(this).find('ul:first').css({visibility: "hidden"});
});
});

Fungsi dari masing-masing script jQuery:

$(" #nav ul ").css({display: "none"}); // Perbaikan di Opera

Kode diatas merupakan perbaikan untuk Opera yang tidak mampu menyembunyikan menu dengan cepat. Pada saat kita menggeser mouse (hover) pada sub menu, maka menu akan memiliki efek berkedip (flicker). $(" #nav ul ") script jQuery digunakan untuk memilih semua daftar yang tidak berurutan (unordered lists - ul) didalam #nav dan kemudian mengesetnya menjadi tidak ditampilkan (display:none).

$(" #nav li").hover(function(){ //memberikan efek saat menu dipilih (hover)
},function(){ //memberikan efek saat pointer mouse meninggalkan menu
});

Kode diatas untuk memberikan efek pada menu sesuai dengan posisi pointer mouse (hovering). Sederhananya memberikan efek pada saat menu dipilih dan tidak dipilih.

$(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);

Kode ini berfungsi untuk menampilkan sub menu pertama yang tersembunyi dari menu yang sedang dipilih. Sedangkan script .show digunakan untuk menampilkan menu dengan durasi waktu yang ditentukan didalam kurung (400). Hal ini akan memberikan efek menampilkan menu yang sangat lembut.

$(this).find('ul:first').css({visibility: "hidden"});

Kode ini berfungsi mengembalikan posisi menu kembali tersembunyi melalui blok mode pada akhir animasinya. Menggunakan kode visibility untuk mencegah berkedip (flicker) pada animasi menu.