jQuery Multi Level Drop Down Menu - V1

JQuery Multi Level Drop Down Menu - V1.
Seperti yang saya bilang dulu bahwa kalo membahas tentang menu/navigasi memang tidak ada habisnya, Menu Navigasi memang banyak sekali macamnya. Sebelumnya juga blog Oto Website sudah banyak membahas tentang masalah Menu Navigasi dan setiap membahas masalah menu ada saja yang tidak berhasil, seperti tidak menemukan kode yang saya suruh dan sebagainya.
Nah kali ini blog ini akan membahas tentang Menu Navigasi lagi dan yang ini semuanya pasti bakalan bisa, kalo tidak bisa ya keterlaluan, hehehe . . .
Menu Navigasi kali ini kita juga akan menggunakan jQuery jadi bisa di bilang cara memasangnya yang mudah.
Mungkin tidak perlu berlama-lama lagi ya, untuk lebih jelasnya Sobat bisa lihat demonya dulu!

Lihat Demo

Nah seperti itulah menu yang akan kita bahas. Cara memasang jQuery Multi Level Drop Down Menu - V1 ini juga sangatlah mudah kok, ayo dah . . .

1. Pertma-tama login ke akun blogger Sobat.

2. Pada menu klick Rancangan ➨ Tambah Gadget  ➨ Pilih elemen HTML/Java Script.

3. Peletakkan Gadget atau elemen HTML/Java Script di bagian atas postingan seperti pada gambar berikut.

4. Selanjutnya copy kode script berikut dan letakkan di dalam elemen HTML/Java Script tadi.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="https://otowebsite-blogspot.googlecode.com/svn/trunk/ow-smooth-menu.js">
</script>

<script type="text/javascript">

ddsmoothmenu.init({
 mainmenuid: "smoothmenu1", //menu DIV id
 orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu', //class added to menu's outer DIV
 //customtheme: ["#1c5a80", "#18374a"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

ddsmoothmenu.init({
 mainmenuid: "smoothmenu2", //Menu DIV id
 orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v"
 classname: 'ddsmoothmenu-v', //class added to menu's outer DIV
 //customtheme: ["#804000", "#482400"],
 contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"]
})

</script>

<style>.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #414141; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: white;
}

.ddsmoothmenu ul li a.selected{ /*CSS class that's dynamically added to the currently active menu items' LI A element*/
background: black;
color: white;
}

.ddsmoothmenu ul li a:hover{
background: black; /*background of menu items during onmouseover (hover state)*/
color: white;
}

/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu 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;
}

/* Holly Hack for IE \*/
* html .ddsmoothmenu{height: 1%;} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{ /*shadow for NON CSS3 capable browsers*/
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity for NON CSS3 capable browsers. Doesn't work in IE*/
opacity: 0.8;
}</style>

<div id="smoothmenu1" class="ddsmoothmenu">
<ul>
<li><a href="http://www.otowebsite.blogspot.com/">Home</a></li>
<li><a href="#">Folder 0</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
    </ul>
</li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.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>

  </ul>
</li>
<li><a href="http://www.otowebsite.blogspot.com/">Create This</a></li>
</ul>
<br style="clear: left" />
</div>

5. Simpan.

Sekarang Sobat bisa lihat hasilnya!

Dari kode di atas ada yang harus sobat rubah, di antaranya :

• Untuk mengganti warna background menu sobat tinggal ubah kode #414141 dengan kode warna, untu melihat kode warna silahkan sobat lihat Kode Warna V3.
• Ganti tanda pagar (#) dengan url/link tujuan.
• Ganti teks Sub Item 1.1 dan seterusya dengan nama menu/link tujuan Sobat.

Sekian untuk kali ini, mudah-mudahan postingan kali ini bisa bermanfaat.

Bagaimana apakah Sobat berhasil menerapkannya di blog sobat? Silahkan tinggalkan tanggapan atau komentar Sobat tentang postingan atau articles di atas!