GIRL in the BEACH: Cara Membuat Menu Vertikal dengan Jquery pada Blog

Artikel ini akan membahas artikel sebelumnya tentang cara membuat menu di blog. agar blog kita tampil profesional tampil profesional hal pokok yang kita lakukan dengan membuat trik pada blog. Berikut akan jelaskan tentang bagaimana cara membuat menu vertikal pada blog dengan jquery.

Pilih Rancangan

Pilih Edit HTML

Cari kode ]]></b:skin> dan letakkan kode dibawah ini sebelum kode tersebut

/* First Level UL List */
#accordion {
margin:0;
padding:0;
list-style:none;
}

#accordion li {
width:267px;
}

#accordion li a {
display: block;
width: 268px;
height: 43px;
text-indent:-999em;
outline:none;
}

/* Using CSS Sprite for menu item */
#accordion li a.popular {
background:url(http://www.queness.com/resources/html/accordion/menu.jpg) no-repeat 0 0;
}

#accordion li a.popular:hover, .popularOver {
background:url(http://www.queness.com/resources/html/accordion/menu.jpg) no-repeat -268px 0 !important;
}

#accordion li a.category {
background:url(http://www.queness.com/resources/html/accordion/menu.jpg) no-repeat 0 -43px;
}

#accordion li a.category:hover, .categoryOver {
background:url(http://www.queness.com/resources/html/accordion/menu.jpg) no-repeat -268px -43px !important;
}

#accordion li a.comment {
background:url(http://www.queness.com/resources/html/accordion/menu.jpg) no-repeat 0 -86px;
}

#accordion li a.comment:hover, .commentOver {
background:url(http://www.queness.com/resources/html/accordion/menu.jpg) no-repeat -268px -86px !important;
}

/* Second Level UL List*/
#accordion ul {
background:url(http://www.queness.com/resources/html/accordion/bg.gif) repeat-y 0 0;
width:268px;
margin:0;
padding:0;
display:none;
}

#accordion ul li {
height:30px;
}

/* styling of submenu item */
#accordion ul li a {
width:240px;
height:25px;
margin-left:15px;
padding-top:5px;
border-bottom: 1px dotted #777;
text-indent:0;
color:#ccc;
text-decoration:none;
}

/* remove border bottom of the last item */
#accordion ul li a.last {
border-bottom: none;
}

Selanjutnya tambahkan kode dibawah ini setelah kode </head>

<script type='text/javascript'>

$(document).ready(function () {

$('#accordion li').click(function () {

/* FIRST SECTION */

//slideup or hide all the Submenu
$('#accordion li').children('ul').slideUp('fast');

//remove all the "Over" class, so that the arrow reset to default
$('#accordion li > a').each(function () {
if ($(this).attr('rel')!='') {
$(this).removeClass($(this).attr('rel') + 'Over');
}
});

/* SECOND SECTION */

//show the selected submenu
$(this).children('ul').slideDown('fast');

//add "Over" class, so that the arrow pointing down
$(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over');

return false;
});

});

</script>

Simpan, dan langkah terakhir adalah ;

Buka rancangan dan klik tambah gadget dan pilih Javascript/HTML dan masukkan kode dibawah ini

<ul id="accordion">
<li>
<a href="#" class="popular" rel="popular">Popular Post</a>
<ul>
<li><a href="#">Popular Post 1</a></li>
<li><a href="#">Popular Post 2</a></li>
<li><a href="#" class="last">Popular Post 3</a></li>
</ul>
</li>
<li>
<a href="#" class="category" rel="category">Category</a>
<ul>
<li><a href="#">Category 1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#" class="last">Category 3</a></li>
</ul>
</li>
<li>
<a href="#" class="comment" rel="comment">Recent Comment</a>
<ul>
<li><a href="#">Comment 1</a></li>
<li><a href="#">Comment 2</a></li>
<li><a href="#" class="last">Comment 3</a></li>
</ul>
</li>
</ul>

Simpan dan lihat hasilnya

Pages

Cara Membuat Menu Vertikal dengan Jquery pada Blog