Cara Membuat Menu Vertikal dengan Jquery pada Blog

| | Print This! | 9 comments

Do you like this post?

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.

• Login ke dashboard blogmu

• 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 () {

$(&#39;#accordion li&#39;).click(function () {

/* FIRST SECTION */

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

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

/* SECOND SECTION */

//show the selected submenu
$(this).children(&#39;ul&#39;).slideDown(&#39;fast&#39;);

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

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

Artikel Terkait

• Fitur Postingan Slidshow dengan Jquery Menawan pada Blog
• Float Menu HTML menggunakan Jquery dan CSS3 di Blog
• Menu Gadget Multi Tab dengan Jquery
• Effect gambar memudar menggunakan Jquery pada blog / website
• Cara Membuat Jquery pada Blog
• Cara Membuat Menu Vertikal dengan Jquery pada Blog

Posted in: Jquery,Menu Vertikal