Cara Membuat DROP DOWN MENU dengan JAVASCRIPT

Drop down menu tetap menjadi satu menu terfavorit hingga saat inikarena sangat effisien akan tempat dan mampu memuat atau dikembangkan menjadi anak menu hingga jumlah yang tidak terbatas. Disamping sangat effektif ruang, banyak inovasi yang dikembangkan dapat menciptakan drop down menu dengan penampilan menarik tanpa harus dipenuhi dengan javascript yang terlalu njelimet. Di bawah adalah salah satu dd menu yang di padukan dengan animasi gif yang membuat menu ini tampil sangat "keren" dan bergaya. (KLIK GAMBAR di atas untuk melihat bentuk gambarnya).

Lakukan penyimpanan javascript dan css di bagian head di atas KODE ]]></b:skin> atau javascript di bawah <head> sedang css di atas ]]></b:skin>

Letakkan kode CSS/Script tag <head> dan </head>

Javascript :

• • <script type="text/javascript">
    var timeout = 100;
    var closetimer = 0;
    var ddmenuitem = 0;
    function GRopen(id)
    { GRcancelclosetime(); if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; }
    function GRclose() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; }
    function GRclosetime() { closetimer = window.setTimeout(GRclose, timeout); }
    function GRcancelclosetime() { if(closetimer) { window.clearTimeout(closetimer);
    closetimer = null; } } document.onclick = GRclose;
    </script>
• 
  
• 
  

KODE CSS :

• 
  #bgsGR_sddmenu {
  margin: 0;
  padding: 0;
  z-index: 30;
  }
  #bgsGR_sddmenu li {
  background: #0000FF url(http://i45.tinypic.com/2ep4m1h.gif);
  margin: 0; border-bottom: 2px solid #999999; border-top: 2px solid #999999;
  padding: 0;
  list-style: none;
  float: left;
  font-size: 14px; font-family: Cursive; font-weight: bold;
  }
  #bgsGR_sddmenu li a {
  display: block;
  margin: 0 1px 0 0;
  padding: 7px 8px;
  width: auto;
  background: #FFFF33 url(http://i50.tinypic.com/1z3c5tx.png); /*bg tampilan */
  color: #FFF;
  text-align: center;
  text-decoration: none;
  }
  #bgsGR_sddmenu li a:hover {
  background: url(http://i49.tinypic.com/1079ef7.gif); color: #FF0000;
  }
  #bgsGR_sddmenu div {
  position: absolute;
  visibility: hidden;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 1px solid #5970B2;
  }
  #bgsGR_sddmenu div a {
  border-bottom: 3px solid #999999;
  border-left: 1px solid #999999;
  border-right: 1px solid #999999;
  top: 15px;
  z-index:100;
  position: relative;
  display: block;
  margin: 0;
  padding: 5px 10px;
  width: auto;
  white-space: nowrap;
  text-align: left;
  text-decoration: none;
  color: #2875DE;
  font-size: 12px; font-family: verdana; font-weight:bold;
  }
  #bgsGR_sddmenu div a:hover {
  background: #49A3FF url(http://i45.tinypic.com/2ep4m1h.gif);
  color: #FFF;
  }
• 
  
• 
  

Letakkan kode berikut di antara tag <body> dan </body>

Contoh HTML untuk menu :

• 
  
  

  <ul id="bgsGR_sddmenu">
  <li><a href="#" onmouseover="GRopen('GR1')" onmouseout="GRclosetime()">Nama Pulau</a>
  <div id="GR1" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
  <a href="#">Sumatera</a>
  <a href="#">Kalimantan</a>
  <a href="#">Bali</a>
  <a href="#">Lombok</a>
  <a href="#">Sulawesi</a>
  <a href="#">Jawa</a>
  <a href="#">Nusakambangan</a>
  <a href="#">Madura</a>
  </div>
  </li>
  <li><a href="#" onmouseover="GRopen('GR2')" onmouseout="GRclosetime()">Nama Propinsi</a>

  
  
  

  <div id="GR2" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
  <a href="#">Kepulauan Riau</a>
  <a href="#">Papua Barat</a>
  <a href="#">Sulawesi Tenggara</a>
  <a href="#">Nusa Tenggara Timur</a>
  <a href="#">Jawa Timur</a>
  <a href="#">Jogjakarta</a>
  <a href="#">Daerah Istimewa Aceh D</a>
  </div>
  </li>

  
  
  

  <li><a href="#" onmouseover="GRopen('GR3')" onmouseout="GRclosetime()">Nama Kabupaten/Kota</a>
  <div id="GR3" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
  <a href="#">Badung</a>
  <a href="#">Kutai Kertanegara</a>
  <a href="#">Magelang</a>
  <a href="#">Mojokerto</a>
  <a href="#">Cirebon</a>
  <a href="#">Solok</a>
  </div>
  </li>
  <li><a href="#" onmouseover="GRopen('GR4')" onmouseout="GRclosetime()">Nama Orang</a>

  
  
  

  <div id="GR4" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">
  <a href="#">Kartodimejo</a>
  <a href="#">Jambul</a>
  <a href="#">Tlepong</a>
  <a href="#">Nasution</a>
  <a href="#">Ngabdul</a>
  <a href="#">Tecuari</a>
  </div>
  </li>
  <li><a href="#" onmouseover="GRopen('GR5')" onmouseout="GRclosetime()">Merk Mobil</a>
  <div id="GR5" onmouseover="GRcancelclosetime()" onmouseout="GRclosetime()">

  
  
  

  <a href="#">Toyota</a>
  <a href="#">Honda</a>
  <a href="#">Lamborgini</a>
  <a href="#">Cadilac</a>
  <a href="#">Izuzu</a>
  <a href="#">Mercedes Benz</a>
  </div>
  </li>
  </ul>
  <div style="clear:both"></div>
• 
  

<a href="#">Sumatera</a>

1. Tanda # adalah URL untuk Link Menu.
2. Sumatera adalah contoh nama menu.

Bentuk Sususnan Pemasangan Kode CSS dan xHTML

<html>
  <head>
  -----------
  Javascript
  -----------
  |
  |
  |
  -----------
KODE CSS

]]></b:skin>

</head>

<body>

Elemen HTML

</body>
</html>

3. Anda bisa juga memasang elemen html di bagian Elemen Laman --> 

Tambah Gadget --> Javascript/HTML.