jQuery Multi Level Menu Horizontal

jQuery Memang tak ada habis-habis nya membuat tampilan Blog menjadi lebih bagus dan tidak membosankan. ok kali ini saya ingin membahas tentang jQuery Multi Level Menu Horizontal.ok kita langsung ke cara membuatnya aja deh..!! gk usah basa-basi lagi..!! ok let's go!! to TKP


DEMO


langkah pertama yaitu masuk pada bagian Design lalu Edit HTML

Masukkan code dibawah ini dibawah code <head>

<!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/anasprod/jqueryslidemenu.js' type='text/javascript'/>
Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>
.jqueryslidemenu{font: bold 13px Verdana;background: #800000;width:100%;float:left}
.jqueryslidemenu ul{margin: 0;padding: 0;list-style-type: none;}
/*Top level list items*/.jqueryslidemenu ul li{position: relative;display: inline;float: left;}
/*Top level menu link items style*/.jqueryslidemenu ul li a{display: block;background: #800000; /*background of tabs (default state)*/color: white;padding: 8px 10px;border-right: 1px solid #778;text-decoration: none;}
* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/display: inline-block;}
.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{color: white;}
.jqueryslidemenu ul li a:hover{background:#B30000; /*tab link background during hover state*/color: white;}
/*1st sub level menu*/.jqueryslidemenu ul li ul{position: absolute;left: 0;display: block;visibility: hidden;background:#B30000;}
/*Sub level menu list items (undo style from Top level List Items)*/.jqueryslidemenu ul li ul li{display: list-item;float: none;}
/*All subsequent sub menu levels vertical offset after 1st level sub menu */.jqueryslidemenu ul li ul li ul{top: 0;}
/* Sub level menu links style */.jqueryslidemenu ul li ul li a{font: normal 13px Verdana;width: 160px; /*width of sub menus*/padding: 5px;margin: 0;border-top-width: 0;border-bottom: 1px solid gray;}
.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/background: #eff9ff;color: black;}
/* ######### CSS classes applied to down and right arrow images ######### */
.downarrowclass{position: absolute;top: 12px;right: 7px;}
.rightarrowclass{position: absolute;top: 6px;right: 5px;}#footheader {width: 100%;float:left;margin:0 0 0;padding:0 0 0;position:relative;}
Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.

Nah kalau sudah kita menuju kebawah untuk mencari code seperti dibawah ini

<div id='header-wrapper'> 
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='NSX Blog (Header)' type='Header'/>
</b:section>
</div> 

Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template
lalu taruh code dibawah ini dibawah code yang diatas tadi
<div id='footheader'>
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>

</div>
 
Kalo sudah klik SIMPAN TEMPLATE


Sekarang kita ke menu Page Elements
nahh.. nanti ada kolom Gadget baru dibawah header, klik aja  Add A Gadget abis itu pilih HTML/Javascript dan masukkan kode dibawah ini
<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="/">Home</a></li>
<li><a href="#">Kategori</a>
<ul>
<li><a href="#">Sub Kategori 1</a></li>
<li><a href="#">Sub Kategori 2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Folder 3.1.1</a>
<ul>
<li><a href="#">Sub Item 3.1.1.1</a></li>
<li><a href="#">Sub Item 3.1.1.2</a></li>
</ul>
</li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://nsxcrew.blogspot.com">NSX Blog</a></li>
</ul>
<br style="clear: left" />
</div>
Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.

Kalau sudah klik SIMPAN
Nah semoga tutorial ini bisa bermanfaat bagi Anda dan silahkan tanyakan pada saya lewat komentar jika ada pertanyaan.  

23 Responses to "jQuery Multi Level Menu Horizontal"

  1. menunya keren, kapan kapan saya coba, tapi ini buat lemot gak ?? takut

    ReplyDelete
  2. Wah saya enggak bisa gan,pas buka blog nya malah ada bacaan blog nya Galak eh salah Blog nya Galat

    ReplyDelete
  3. @Catatan | Tips | pengalaman : Kagak..!!
    @Boy : waduh..?? koq bisa??

    ReplyDelete
  4. Wah, mantab tuh navigasinya. Tapi ane lebih suka yang simple-simple sob, biar tidak terasa ribet. hehehe

    ReplyDelete
  5. @Nabil Ftd : ok sob..!! ane juga siehh..!! ahahahaha

    ReplyDelete
  6. wedew, manteb nih navigasi. coba dulu ah

    ReplyDelete
  7. Betul kata agan Nabil, saya suka yg simpel n ringan tapi memukau .

    ReplyDelete
  8. yap..!! pake CSS lebih ringan :)

    ReplyDelete
  9. wah thankzzz banget,....

    yang beginian yg aku cari.....

    tapi ngemong2 ini di suport oleh banyak browser ngga ???

    ReplyDelete
  10. @SonderBerbagi : pastinya...!! semua browser bisaa!!

    ReplyDelete
  11. JQuery itu maksudnya apaan sih om habil? beta tak ngerti,, butuh bantuan'nya mas bro,,

    terus blog-nya om habil ini pake JQuery apa gak?

    ReplyDelete
  12. @author : pake lah :D
    jQuery itu Javascript untuk mempercantik blog hihihi..

    ReplyDelete
  13. Wah info babus nich untuk menambah menu dan mempercantik tampilan blog sekaligus memudahkan pembbaca menjelajahi blog kita...hee..Terima kasih infonya..

    ReplyDelete
  14. aku gk ngertii..!! tolong penjelasan a..!!

    ReplyDelete
  15. @habil DS: JQuery yang penting itu apa'an ?? maksudnya JQuery yang wajib di pasang di blog itu JQuery yang mana?

    ReplyDelete
  16. mohon penjelasan dari mas bro habbil

    ReplyDelete
  17. @author : jQuery sih semua gk terlalu penting ..!! :)

    ReplyDelete
  18. @ Habil : iya gan saya juga binggung tadinya tutorial ini mau saya cobain di blog baru saya eh malah hasilnya 'Galat' saya juga kurang ngerti untung waktu itu saya ada back up template nya...

    ReplyDelete
  19. @Boy : ohh.. mungkin kesalahan kode atau Koneksi!! :D

    ReplyDelete
  20. @habil: ohh jadi gitu ya,, kesimpulannya,, ternyata JQuery cuma sebagai penghias blog tohh,,,, ooooooooooo

    ReplyDelete