Cara Membuat According Menu Jquery

Cara Membuat According Menu Jquery. jquery merupakan menu yang terlihat tampak hidup atau istilahnya 3 dimensi. menu jquery ini cocok diletakkan di sidebar blog sobat karena bentuknya yang vertikal tidak horizontal seperti menu-menu lainnya. menu ini mempunyai fungsi untuk menyembunyikan link sobat sebelum menu utama sobat di buka. atau jika sobat pembaca masih bingung, bisa dilihat disini. sudah tahu kan? kalau begitu kita ke langkah-langkahnya. Cara memasangnya cukup mudah, pengeditan linknya juga sangat mudah.

Pilih Tata Letak

Klik Edit Html

Cari ]]></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 </head> , Tambahkan Script berikut di bawah kode tersebut <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 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 gadgetnya

baca juga Cara Membuat Menu Docking Jquery.

Cara Membuat According Menu Jquery

1 Responses to "Cara Membuat According Menu Jquery"

Post a Comment