Menu Horizontal Multi Level Menggunakan jQuery

Viyan Pradita Jumat, April 15, 2011 ,

Melanjutkan postingan saya yaitu masih seputar Cara Membuat Menu Horizontal Di Blog, nah pada tread kali ini saya akan membahas bagaimana membuat menu horizontal multi level dengan mmenggunakan JQuery dan PHP.
Penjelasannya gampangnya seperti ini, Di dalam sebuah website, seringkali kita menemukan/melihat penggunaan menu bertingkat seperti pada gambar dibawah. Menu yang bertingkat tersebut sebenarnya adalah sebuah struktur pohon/tree di mana suatu menu bisa memiliki anak (submenu), dan submenu tersebut juga bisa memiliki anak lagi dan seterusnya sampai level tak terbatas.

Screenshot

JIka berminat, silahkan ikuti langkah-langkah berikut:

1. Login ke akun blogger sobat
2. Masuk Rancangan/Layout
3. Pilih Edit HTML
4. Klik "Download Template Lengkap" (ini untuk memBackUp template sobat)
5. Beri tanda centang "Expand Template Widget"
6. Carilah kode: </head>
7. Kemudian copy paste kode berikut di bawah kode: </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='https://sites.google.com/site/kodeblogger/javascript/jqueryslidemenu.js' type='text/javascript'/>

7. 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;
}


8. Kode CSS diatas silahkan edit dan sesuaikan dengan blog sobat.
9. Kemudian cari kode berikut:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Kode Blogger (Header)' type='Header'>
<b:includable id='title'>
</b:section>

</div>

10. Perhatikan saja code yang berwarna merah karena code yang berwarna hitam diatas berbeda-beda setiap template
11. Kemudian taruhlah kode berikut tepat dibawah kode diatas:

<div id='footheader'>

<b:section class='footheader' id='footheader' preferred='yes'>

</b:section>

</div>


12. Simpan Template dan lanjut lagi sob, masih ada tahapan berikutnya neh ??
13. Sekarang kembali ke bagian Menu "Page Elements"
14. Setelah sobat selesai dengan cara diatas, pasti di bagian Page element sudah terdapat menu kolom baru, lihat screenshot dibawah ini:

Screenshot

15. Nah terlihat pada "Page Elements" muncul tempat gadget baru, lalu klik saja "Add a gadget" dan pilih HTML/JavaScript dan masukkan code dibawah ini:


<div id="myslidemenu" class="jqueryslidemenu">

<ul>

<li><a href="/">Home</a></li>

<li><a href="http://kode-blogger.blogspot.com">Tutorial Blog</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://kode-blogger.blogspot.com">Tutorial Blog</a></li>

</ul>

<br style="clear: left" />

</div>


16. Ubahlah Alamat Link dan Nama dari masing-masing sub menu pada kode diatasa, sesuai dengan blog sobat
17. Sippp... Simpan/Save, dan lihatlah hasilnya.

Sekian dari saya, semoga bisa bermanfaat.

Ditulis Oleh :

Artikel Menu Horizontal Multi Level Menggunakan jQuery ini dipublish pada hari: Jumat, April 15, 2011. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

10 komentar
Terjun Ke Kolom Komentar

  1. Bagus sob,,berguna banget buat yang lain,,,terus berkarya sob,,?? oh ya sob,,mau tanya ,,masih punya script template aslinya ini gak,,??

    BalasHapus
  2. @RULLY VARADITA : Huehehe tq SOb, ya menurutku di blog ini postingannya jg udah ketinggalan sob, cuma sebagai dokumentasi tutorial blog saja.
    tujuannya biar makin lengkap pastinya. :D

    Masih ada neh sob, butuhkah ??

    BalasHapus
  3. Pernah nyoba yang ghinian tapi gagal mulu..

    BalasHapus
  4. Mas Sy Boleh Minta File Template blog ini..Klo boleh tolong kirim link nya ke

    donipb00@yahoo[dot]com

    BalasHapus
  5. gan, boleh minta template yg sama punya agan???
    please send to: stewartz123@gmail.com
    thanx's gan.... :D

    BalasHapus
  6. @Putra: template yg kayak punya o-om masih tuh gan. hehee lagian saya udah ganti template lagi :D
    tp selebihnya di coding2 ndiri ya??


    @ZAY STEWARTZ: Waduh.. neh jg buat template na belum sempurna gan ?? liat aja masih berantakan :D

    BalasHapus
  7. gan minta template punya agan juga aq,. yang tutorial di atas,..
    soalnya aq buat gak bisa"
    thanx,.

    gagad_boy@yahoo.com

    BalasHapus
  8. @Bowo: Template yang mane ?? kalo yang ini belum selesai sumuanya sob ??

    BalasHapus
  9. gan bisa minta template blog ini gak?? plaese.

    kalo agan ijinin sent ya : dey_99@ymail.com
    ato bisa kasi link downloadnya hehe....
    Ty..

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers