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 di Jakarta
    Daftar Dokter Spesialis di DKI Jakarta Lengkap dengan Rumah Sakit / Klinik Praktek                                                      ...
  • 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. ...
  • 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...
  • Kesehatan
    Catatan Medis. ( Read more ) Kesehatan anak dan bayi. ( Read more ) Daftar Dokter Spesialis di Jakarta. ( Read more )   Daftar Dokter Spe...
  • Mengganti Alamat Blog
    Berbeda denga judul dan deskripsi, yang bisa persis sama dengan orang lain, maka untuk alamat tidak bisa ada dua orang (apalagi lebih) me...
  • Dylan Dog : Dead of Night : Synopsis
    Dylan Dog: Dead of Night is a horror thriller film based on the Italian comic book Dylan Dog, starring Brandon Routh as the eponymous dete...
  • Komputer & Internet
    Blok RGB/ Video sebuah monitor CRT - Read more Office tutorial - Read more Membuat efek lipatan ( Page peel ) di blog - Read more Cara...
  • Pekmpek Palembang
    Bahan Pekmpek : 200 gr daging ikan tenggiri (dingin baru keluar dari kulkas) 100 ml air es 1 siung bawang putih, parut halus 1 sdt gara...
  • 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...
  • Nokia N8
      General 2G Network GSM 850 / 900 / 1800 / 1900 3G Network HSDPA 850 / 900 / 1700 / 1900 / 2100 Announced 2010, April S...