jQuery Multi Level Menu Horizontal
DEMO
langkah pertama yaitu masuk pada bagian Design lalu Edit HTML
Masukkan code dibawah ini dibawah code <head>
<!--[if lte IE 7]>Lalu masukkan CSS dibawah ini diatas code ]]></b:skin>
<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'/>
.jqueryslidemenu{font: bold 13px Verdana;background: #800000;width:100%;float:left}Code diatas adalah style dari menu Anda, silahkan edit sesuai kebutuhan Anda.
.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;}
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'>Kalo sudah klik SIMPAN TEMPLATE
<b:section class='footheader' id='footheader' preferred='yes'>
</b:section>
</div>
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">Nah code diatas adalah code dari widgetnya silahkan di edit sesuai kebutuhan Anda.
<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>
Kalau sudah klik SIMPAN
Nah semoga tutorial ini bisa bermanfaat bagi Anda dan silahkan tanyakan pada saya lewat komentar jika ada pertanyaan.
menunya keren, kapan kapan saya coba, tapi ini buat lemot gak ?? takut
ReplyDeleteWah saya enggak bisa gan,pas buka blog nya malah ada bacaan blog nya Galak eh salah Blog nya Galat
ReplyDelete@Catatan | Tips | pengalaman : Kagak..!!
ReplyDelete@Boy : waduh..?? koq bisa??
Wah, mantab tuh navigasinya. Tapi ane lebih suka yang simple-simple sob, biar tidak terasa ribet. hehehe
ReplyDelete@Nabil Ftd : ok sob..!! ane juga siehh..!! ahahahaha
ReplyDeletewedew, manteb nih navigasi. coba dulu ah
ReplyDeleteBetul kata agan Nabil, saya suka yg simpel n ringan tapi memukau .
ReplyDeleteyap..!! pake CSS lebih ringan :)
ReplyDeletewah thankzzz banget,....
ReplyDeleteyang beginian yg aku cari.....
tapi ngemong2 ini di suport oleh banyak browser ngga ???
@SonderBerbagi : pastinya...!! semua browser bisaa!!
ReplyDeleteJQuery itu maksudnya apaan sih om habil? beta tak ngerti,, butuh bantuan'nya mas bro,,
ReplyDeleteterus blog-nya om habil ini pake JQuery apa gak?
@author : pake lah :D
ReplyDeletejQuery itu Javascript untuk mempercantik blog hihihi..
Wah info babus nich untuk menambah menu dan mempercantik tampilan blog sekaligus memudahkan pembbaca menjelajahi blog kita...hee..Terima kasih infonya..
ReplyDeleteaku gk ngertii..!! tolong penjelasan a..!!
ReplyDelete@habil DS: JQuery yang penting itu apa'an ?? maksudnya JQuery yang wajib di pasang di blog itu JQuery yang mana?
ReplyDeletemohon penjelasan dari mas bro habbil
ReplyDelete@author : jQuery sih semua gk terlalu penting ..!! :)
ReplyDelete@ 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@Boy : ohh.. mungkin kesalahan kode atau Koneksi!! :D
ReplyDelete@habil: ohh jadi gitu ya,, kesimpulannya,, ternyata JQuery cuma sebagai penghias blog tohh,,,, ooooooooooo
ReplyDelete@Author : yap..!!
ReplyDeletemakasih tipsnya sobat
ReplyDeleteSalam kenal dari Ku
ReplyDelete