Cara buat Vertikal Side Bar Menu di Blog

Tweet

Dua hari yang lalu kita pelajari cara mudah untuk membuat drop down menu horisontal dengan tingkat multi dan hari ini kita akan menggunakan script yang sama persis dan coding untuk membuat menu vertikal sidebar yang dapat dipasang dalam sidebar blog. Kami akan kembali menggunakan beberapa efek CSS3 lezat dikombinasikan dengan fungsi JavaScript (untuk efek slide yang halus) untuk menyusun menu yang mungkin sesuai dan berbaur berbagai latar belakang blog. Ini akan membantu Anda lebih mengatur blog Anda label atau kategori sehingga memberikan pengunjung dengan navigasi yang lebih baik dan mudah. Langkah-langkah instalasi seperti biasa tetap sangat sederhana.

Berikut petunjuk penggunaannya :

• Masuk ke Akun Blog Anda
• Lalu masuk ke menu Layout (tata letak) >> lalu tambah Gadget >> Pilih HTML/Javascript, masukkan kode dibawah ini :

<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
<style>
/* ######### Sidebar Menu by www.MyBloggerTricks.com ######### */
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: #000000;
background-color: #FFFFE0;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover{
background-color: #000000;
color: #ffffff;
}
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

/* ######### Vertical Menu ######### */
.markermenu{
width: 175px; /*width of side bar menu*/
clear: left;
position: relative;
}
.markermenu ul{
list-style-type: none;
margin: 5px 0;
padding: 0;
border: 1px solid #9A9A9A;
}
.markermenu ul li a{
background: #F2F2F2 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9d2xSClBGcYrD5ikJWVud64Qr6fEU0zq7CeCP43qJIDp9ThXL7NS8_ulak84HDHKVmIlfiAv9R4wdLtJgx-aZPnjkA-Vmr3Gue7dnfNk0Pq1dESpY2RvfaCup2fhUwMhfz9IfyjA_P0I/s400/bulletlist.gif) no-repeat 3px center;
font: bold 13px "Lucida Grande", "Trebuchet MS" ;color: #00014e;
display: block;
width: auto;
padding: 3px 0;
padding-left: 20px;
text-decoration: none;
border-bottom: 1px solid #B5B5B5;
}
* html .markermenu ul li a{ /*IE6 hack*/
width: 155px;
}
.markermenu ul li a:visited, .markermenu ul li a:active{
color: #00014e;
}
.markermenu ul li a:hover, .markermenu ul li a.selected{
color: #ffffff;
background-color: #000000;
}

</style>
<div id="ddsidemenubar" class="markermenu">
<ul> <li><a href="#">LINK1</a></li> <li><a href="#" rel="ddsubmenuside1">LINK2</a></li> <li><a href="#" rel="ddsubmenuside2">LINK3</a></li> <li><a href="#">Link4</a></li> <li><a href="#" rel="ddsubmenuside3">LINK5</a></li> </ul> </div>
<script type="text/javascript">
ddlevelsmenu.setup("ddsidemenubar", "sidebar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul id="ddsubmenuside1" class="ddsubmenustyle blackwhite">
<li><a href='#'>LINK2 ITEM 1</a></li>
<li><a href='#'>LINK2 ITEM 2</a>
<ul>
<li><a href='#'>LINK2 ITEM 2.1</a></li>
<li><a href='#'>LINK2 ITEM 2.2</a></li>
</ul>
</li>
<li><a href='#'>LINK2 ITEM 3</a>
<ul>
<li><a href='#'>LINK2 ITEM 3.1</a></li>
</ul>
</li>
<li><a href='#'>LINK2 ITEM 4</a></li>
</ul>

<ul id="ddsubmenuside2" class="ddsubmenustyle blackwhite">
<li><a href='#'>LINK3 ITEM 1</a></li>
<li><a href='#'>LINK3 ITEM 2</a></li>
<li><a href='#'>LINK3 ITEM 3</a>
<ul>
<li><a href='#'>LINK3 ITEM 3.1</a></li>
<li><a href='#'>LINK3 ITEM 3.2</a></li>
<li><a href='#'>LINK3 ITEM 3.3</a></li>
<li><a href='#'>LINK3 ITEM 3.4</a></li>
</ul>
</li>
<li><a href='#'>LINK3 ITEM 4</a></li>
<li><a href='#'>LINK3 ITEM 5</a>
<ul>
<li><a href='#'>LINK3 ITEM 5.1</a></li>
<li><a href='#'>LINK3 ITEM 5.2</a>
<ul>
<li><a href='#'>LINK3 ITEM 5.2 1</a></li>
<li><a href='#'>LINK3 ITEM 5.2 2</a></li>
<li><a href='#'>LINK3 ITEM 5.2 3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>LINK3 ITEM 6</a></li>
</ul>
<ul id="ddsubmenuside3" class="ddsubmenustyle blackwhite">
<li><a href='#'>LINK5 ITEM 1</a></li>
<li><a href='#'>LINK5 ITEM 2</a></li>
<li><a href='#'>LINK5 ITEM 3</a></li>
<li><a href='#'>LINK5 ITEM 4</a></li>
<li><a href='#'>LINK5 ITEM 5</a></li>
</ul>

Keterangan : Edit seluruh script yang telah diberi tanda.