Menu 3 Level dengan CSS & JQuery

Tidak dapat disangkal lagi bahwa menu dengan sub submenu (3 level) merupakan komponen yang cukup sering dipakai dalam beberapa website, terutama jika website tersebut memiliki struktur navigasi halaman yang  ‘beranak bercucu’. Okay langsung saja, disini ada beberapa bumbu yang saya gunakan dalam pembuatan menu 3 level ini, yaitu:

• CSS 2.0
• JQuery
• XHTML

Dengan struktur file sebagai berikut:

• /menu.html
• /menu.css
• /script.js
• /jquery-1.4.2.min.js

Browser compatibility: IE 6 (masih perlu di-cross check lagi), IE 7, IE 8, Firefox 2+, Chrome 4+, Opera 9+, Safari 4+
Langkah 1: Buat struktur menu berikut pada file menu.html

<ul id="nav">
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a>
      <ul>
         <li><a href="#">Home</a></li>
         <li><a href="#">About</a>
           <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Clients</a></li>
              <li><a href="#">Contact Us</a></li>
           </ul>
         </li>
         <li><a href="#">Clients</a></li>
         <li><a href="#">Contact Us</a></li>
      </ul>
   </li>
   <li><a href="#">Clients</a>
     <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Clients</a></li>
        <li><a href="#">Contact Us</a></li>
     </ul>
   </li>
   <li><a href="#">Contact Us</a></li>
</ul>

Langkah 2: Buat style untuk mengatur tampilan pada langkah 1 (menu.css)

body{
font-family: Helvetica, arial, sans-serif;
}

#nav{
background: #e5e5e5;
float:left;
margin: 0; padding: 0;
}

#nav li a, #nav li{
float: left
}

#nav li{
list-style: none;
position: relative
}

#nav li a{
padding: 0.5em 2em;
text-decoration: none;
background: #1764bf;
color: white;
border-right: 1px solid #114b8f;
border-left: 1px solid #1764bf;
border-bottom: 1px solid #4173af;
border-top: 1px solid #274f7f;
}

#nav li a:hover{
background: #4d88cf;
}

/*submenu*/
#nav li ul{
display: none;
position: absolute;
left: 0;
top:100%;
padding:0;margin:0;
}

#nav li:hover > ul{
display: block;/*memunculkan submenu ketika a pada menu level 1 di hovers*/
}

#nav li ul li, #nav li ul li a{
float: none;
}

#nav li ul li{
_display:inline;/* dukungan untuk ie6 */
}

#nav li ul li a{
width: 150px;
display: block;
}

/*sub submenu*/

#nav li ul li ul{
display: none;
}

#nav li ul li:hover ul{
left:100%;
top:0;
}

Untuk font, warna, dan ukuran dapat disesuaikan dengan selera Anda masing-masing.
Pada langkah 2 ini sebetulnya menu 3 level sudah bisa berjalan dengan baik, namun jika Anda ingin mempercantiknya dengan efek slidedown, silakan lanjutkan ke langkah berikutnya.
Langkah 3: Membuat efek slidedown dengan Javascript (script.js)

var subsubmenu = function (){
 this.navLi=$('#nav > li').children('ul').css('display', 'none').end();
 this.init();
};

subsubmenu.prototype={
 init : function(){
  this.setMenu();
 },

 //Memberikan efek slide

 setMenu: function(){

  this.navLi.hover(function(){
  //mouseover
   $(this).find('>ul').stop(true,true).slideDown(250);
  }, function(){
  //mouseout
   $(this).find('>ul').stop(true,true).fadeOut(200);
  });
 }

}

new subsubmenu();

Framework yang saya gunakan ialah JQuery versi 1.4.2, tidak menutup kemungkinan dapat berjalan dengan baik pula pada JQuery versi lebih lama. Karena perintah yang digunakan ialah perintah dasar.
Langkah 4: Nyalakan rokok, aduk kopi, dan download contohnya agar lebih jelas
Jika rekan-rekan sekalian menemukan bug/bugfix silakan tulis dalam komentar, bagaimana pun juga saya hanyalah seorang nubie yang tak luput dari bug (terutama Internet Explorer).



Untuk membuat menjadi vertikal caranya cukup sederhana dengan mengubah/menambah sedikit baris style pada selektor terkait dibawah ini #nav li ul li, #nav li ul li a{
float: none;
}
#nav li a{
display:block;
}
#nav li ul{
left:100%;
top:0;
}
hanya perlu dirapikan sedikit

Artikel Terkait