Membuat Menu Vertical Multi Level ...!

Pada Postingan sebelumnya, saya telah menjelaskan cara membuat menu navigasi horizontal. sekarang mari kita mencoba membuat menu vertikal. Untuk contohnya kalian bisa perhatikan gambar dibawah ini :

Untuk membuatnya ikuti tutorialnya dibawah ini :

1. Login ke blogger trus pilih "Rancangan-->Edit HTML"
2. Masukkan kode berikut sebelum kode </head>

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: bold 13px Verdana;
width: 180px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}

.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #012D58; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

.sidebarmenu a.subfolderstyle{
background: url(right.gif) no-repeat 97% 50%;
}


/* Holly Hack for IE \*/
* html .sidebarmenu ul li { float: left; height: 1%; }
* html .sidebarmenu ul li a { height: 1%; }
/* End */

</style>

<script type="text/javascript">

//Nested Side Bar Menu (Mar 20th, 09)
//By Dynamic Drive: http://www.dynamicdrive.com/style/

var menuids=["sidebarmenu1"] //Enter id(s) of each Side Bar Menu's main UL, separated by commas

function initsidebarmenu(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className+=" subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", initsidebarmenu, false)
else if (window.attachEvent)
window.attachEvent("onload", initsidebarmenu)

</script>

3. Simpan dulu template kalian
4. Masuk Ke Elemen Halaman ----> Tambah gadget ----> HTML/Java Script
5. Copy kode berikut didalamnya :

<div class="sidebarmenu">
<ul id="sidebarmenu1">
<li><a href="LINK TUJUAN">Item 1</a></li>
<li><a href="LINK TUJUAN">Item 2</a></li>
<li><a href="LINK TUJUAN">Folder 1</a>
<ul>
<li><a href="LINK TUJUAN">Sub Item 1.1</a></li>
<li><a href="LINK TUJUAN">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="LINK TUJUAN">Item 3</a></li>

<li><a href="LINK TUJUAN">Folder 2</a>
<ul>
<li><a href="LINK TUJUAN">Sub Item 2.1</a></li>
<li><a href="LINK TUJUAN">Folder 2.1</a>
<ul>
<li><a href="LINK TUJUAN">Sub Item 2.1.1</a></li>
<li><a href="LINK TUJUAN">Sub Item 2.1.2</a></li>
<li><a href="LINK TUJUAN">Sub Item 2.1.3</a></li>
<li><a href="LINK TUJUAN">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="LINK TUJUAN">Item 4</a></li>
</ul>
</div>

Keterangan :
== Ganti kode berwarna merah dengan judul Menu kalian
== Ganti kode berwarna biru dengan Link tujuan kalian

Selamat mencoba dan jangan lupa komentarnya ya...

Source & Credit : Dynamic Drive

Silahkan kirimkan Donasi anda seikhlasnya berupa uang/pulsa (Klik Gambar kado disamping) untuk perkembangan blog ini dan Proses pembelajaran untuk sahabat.

Penulis :  Azis Lamayuda | BLOG : Do The Best To Get The Best
Saya hanyalah seorang yang sedang belajar dan berbagi pelajaran dengan siapapun. Blog ini dibuat untuk memudahkan kalian yang sedang belajar sama seperti saya.