Drop down menu 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 rumit. Di bawah adalah salah satu dropo down menu yang di padukan dengan animasi gif yang membuat menu ini tampil sangat "keren" dan bergaya..
Lakukan penyimpanan javascript dan KODE CSS di bagian <head> di atas ]]></b:skin>,
atau
javascript di bawah <head> sedang KODE CSS di atas ]]></b:skin>
Javascript :
<script type="text/javascript">
var timeout = 100;
var closetimer = 0;
var ddmenuitem = 0;
function open(id)
{ cancelclosetime(); if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id); ddmenuitem.style.visibility = 'visible'; }
function close() { if(ddmenuitem) ddmenuitem.style.visibility = 'hidden'; }
function closetime() { closetimer = window.setTimeout(close, timeout); }
function cancelclosetime() { if(closetimer) { window.clearTimeout(closetimer);
closetimer = null; } } document.onclick = close;
</script>
KODE CSS :
#sddmenu {
margin: 0;
padding: 0;
z-index: 30;
}
#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;
}
#sddmenu li a {
display: block;
margin: 0 1px 0 0;
padding: 7px 8px;
width: auto;
background: #FFFF33 url(http://i50.tinypic.com/1z3c5tx.png); /* tampilan */
color: #FFF;
text-align: center;
text-decoration: none;
}
#sddmenu li a:hover {
background: url(http://i49.tinypic.com/1079ef7.gif); color: #FF0000;
}
#sddmenu div {
position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: transparent;
border: 1px solid #5970B2;
}
#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;
}
#sddmenu div a:hover {
background: #49A3FF url(http://i45.tinypic.com/2ep4m1h.gif);
color: #FFF;
}
Contoh HTML untuk menu :
<ul id="sddmenu">
<li><a href="#"onmouseover="open('Menu1')" onmouseout="closetime()">Nama Pulau</a>
<div id="Menu1"onmouseover="cancelclosetime()"onmouseout="closetime()">
<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="open('Menu2')" onmouseout="closetime()">Nama Propinsi</a>
<div id="Menu2" onmouseover="cancelclosetime()" onmouseout="closetime()">
<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="open('Menu3')" onmouseout="closetime()">Nama Kabupaten/Kota</a>
<div id="Menu3" onmouseover="cancelclosetime()" onmouseout="closetime()">
<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="open('Menu4')" onmouseout="closetime()">Nama Orang</a>
<div id="Menu4" onmouseover="cancelclosetime()" onmouseout="closetime()">
<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="open('Menu5')" onmouseout="closetime()">Merk Mobil</a>
<div id="Menu5" onmouseover="cancelclosetime()" onmouseout="closetime()">
<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>
Keterangan :
<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.
![[Valid RSS]](valid-rss-rogers.png "Validate my RSS feed")
wah....ini yang saya cari mas