Follow me ...

Menu Horizontal Multi Level Menggunakan jQuery


































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.
Bitmap



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
Bitmap


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.

Categories:

Leave a Reply

Popular Posts

  • Daftar Dokter Spesialis Anak
    Spesialis Anak 1. Dr. Adi Tagor, Sp.A, RS. Pondok Indah, Jl. Metro Duta kav. UE, Pondok Indah, Jakarta Selatan. Tel. (021) 7692252 2. ...
  • Download
    Software. ( Read more ) PC Games. ( Read more ) Movie Preview. ( Read more )
  • Membangun Jaringan Peer to Peer
    Menghubungkan dua komputer secara langsung dan bersamaan bisa disebut sebagai jaringan Peer to Peer. Dimana komputer satu dapat mengirim dat...
  • Daftar Dokter Spesialis di Jakarta
    Daftar Dokter Spesialis di DKI Jakarta Lengkap dengan Rumah Sakit / Klinik Praktek                                                      ...
  • Cara mengganti warna dasar (background) blog
    1. Masuk ke Blogger (daskboard) 2. Klik tata letak 3. Edit HTML 4. Nah, sekarang coba cari kode ini ... body { Lengkapnya seperti ...
  • Harry Potter and the Deathly Hallows Part 2 [PC-Game]
    Berdasarkan film dari penulis buku J. K. Rowling menyimpulkan kisah dari permainan penyihir Harry Potter. Dalam Harry Potter dan Relikui Ke...
  • Real Steel 2011
    Steven Spielberg’s Dreamworks has hired Director Shawn Levy (who brought us Night at the Museum) to helm Real Steel, an upcoming science-fi...
  • Komputer & Internet
    Blok RGB/ Video sebuah monitor CRT - Read more Office tutorial - Read more Membuat efek lipatan ( Page peel ) di blog - Read more Cara...
  • Blok RGB Video sebuah monitor Komputer
    Berikut ini saya akan membahas tentang Blok RGB atau Blok Video. Blok ini berfungsi untuk mengolah warna yang datang dari VGA card dan dik...
  • Lirik lagu
    Hingga Nanti -Vidi Aldiano ( feat Andien ) Kunci Hati - Afgan Siapkah Kau Tuk Jatuh Cinta Lagi - HiVi  Sit Still, Look Pretty - Daya S...