Cara Membuat Menu Vertical Jquery

Artikel Kali Ini Akan Menjelaskan Cara Membuat Menu Vertical Jquery dimana Jquery itu sendiri adalah menu yang akan membuat Blog anda menjadi profesional 

Artikel ini saya ambil langsung dari Blog Quenns susah payah saya mengartikannya memakai Software Transtool karna Blog itu memakai bahasa inggris yah saya sendiri i can speake english little nah penasarankan pasti temen - temen semuanya mari kita lihat Demo nya di Blog ini.

Bagaimana Cantik Bukan ayo kita lihat langsung cara membuatnya disini

@ Logi ke blog anda

@ Pilih Tata Letak

@ Klik Edit Html

@ Cari kode ]]></b:skin>  tambahkan kode - kode berikut 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;
}

• Kemudian Cari Kode </head> Tambahkan Script Berikut dibawah kode tersebut 

<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 Template

@ Selanjutnya klik Elemen Halaman

@ Tambah gadget (HTML/JavaScript), masukan kode berikut:

<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 gadget

@ Selamat mencoba!!!!


Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...