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:
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
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)
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
- CSS 2.0
- JQuery
- XHTML
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">Langkah 2: Buat style untuk mengatur tampilan pada langkah 1 (menu.css)
<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>
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
Advertisement
Untuk memperindah dan mempercantik website biasanya kita hiasi dengan warna-warna yang menarik sesuai selera kita. Kombinasi warna yang tepat akan memberikan nilai tambah untuk sebuah website, dan tentunya lebih membuat pengunjung website betah berlama-lama mengunjungi website kita.
