Hi all, ini adalah snippet pertama saya di 80tasks.com.

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).

Sekian snippet pertama saya di 80tasks.com, sampai jumpa di snippet berikutnya. Cheers

---

Posted by Ananda Rizki - http://twitter.com/neosheet