Membuat Widget Drop down menu

Baiklah, kali ini, kita akan membuat drop down menu jQuery stylish yang sederhana .  Berfungsi untuk menampilkan sub menu/ drop down menu yang sederhana. Anda dapat mengubah warna atau menempatkan gambar latar belakang, atau ukuran dan warna teks dengan memodifikasi tag CSS style kapan saja. Tetapi kali ini saya akan mengajari garis besar dari drop down menu ini terlebih dahulu.

Langkah memberi jQuery Drop-Down menu

Step 1. Buka Dashboard - Template - Edit HTML - Click

Step 2. Expand Widget Template (buatlah arsip untuk berjaga-jaga)

Step 3. Cari code ini (ctrl+F):

]]></b:skin>

Step 4. masukkan code berikut, sebelum/sesudah code diatas:

#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}
#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}
#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}
#jsddm li a:hover {
background: #C8C8C8;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}
#jsddm li ul li a:hover {
background: #A3CEE5;
}

Step 5. Sekarang cari code ini:

</head>

Step 6. Tambahkan code ini segera, diatas atau dibawahnya:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
  <script type='text/javascript'>
  //<![CDATA[
var timeout    = 500;
  var closetimer = 0;
  var ddmenuitem = 0;
function jsddm_open()
  {  jsddm_canceltimer();
  jsddm_close();
  ddmenuitem = $(this).find('ul').css('visibility', 'visible');}
function jsddm_close()
  {  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
function jsddm_timer()
  {  closetimer = window.setTimeout(jsddm_close, timeout);}
function jsddm_canceltimer()
  {  if(closetimer)
  {  window.clearTimeout(closetimer);
  closetimer = null;}}
$(document).ready(function()
  {  $('#jsddm > li').bind('mouseover', jsddm_open)
  $('#jsddm > li').bind('mouseout',  jsddm_timer)});
document.onclick = jsddm_close;
  //]]>
  </script>

Step 7. Click Simpan template.

Step 8. Buka Tata Letak > click "Tambahkan Gadget"

Step 9. Pilih insert HTML/JavaScript.

Step 10. Paste code ini didalam kotak (gak usah diberi judul):

<ul id="jsddm">
  <li><a href="#">Home</a>
  <li><a href="#">Link 1</a>
  <ul>
  <li><a href="#">Drop 1-1</a></li>
  <li><a href="#">Drop 1-2</a></li>
  <li><a href="#">Drop 1-3</a></li>
  </ul>
  </li>
 <li><a href="#">Link 2</a>
  <ul>
  <li><a href="#">Drop 2-1</a></li>
  <li><a href="#">Drop 2-2</a></li>
  </ul>
  </li>
 <li><a href="#">Link 3</a>
  <ul>
  <li><a href="#">Drop 3-1</a></li>
  <li><a href="#">Drop 3-2</a></li>
  <li><a href="#">Drop 3-3</a></li>
  <li><a href="#">Drop 3-4</a></li>
  </ul>
  </li>
 <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
  <li><a href="#">Link 6</a></li>
  </li></ul>

Note :

Kamu harus mengganti simbol "#" dengan setiap alamat URL yang akan kamu tampilkan.

Step 11. Click Simpan

Sudah bisa kan?

Peringatan:

- Jika menunya muncul di bagian sidebar atau bagian footer, buka Tata Letak, lalu cukup drag gadget tersebut ke bagian header dan klik Simpan lagi.
- Jika drop menu tidak muncul, lakukan langkah berikut:

Kembali ke Template > Edit HTML dan cari (CTRL + F) code dibawah ini:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Kamu hanya perlu mengubah "1" dengan "3" dan "no" dengan "yes" , seperti ini:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'>

Simpan Template.

Cara men-drag gadget:

Drag gadget, pindah tepat dibawah header: 

Setelah itu klik Simpan

Jika mengalami gangguan menu drop down menabrak atau hilang sebagian seperti ini,

Opsi Pertama: Drag Gadget, tempatkan diatas header.

atau gunakan

Opsi Kedua: 

Cari kode ini:

#jsddm {margin: 0;padding: 15px;z-index:1000000000;position:relative;}

Blok, ganti dengan kode ini:

#jsddm {height: 50px;margin: 0;overflow: visible;padding: 15px;position: relative;z-index: 2;}

Sekian Thread dari saya,
Copyright: Helplogger, translated.