.jpg)
karena 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 untuk melihat gambar dalam ukuran besar).Lakukan penyimpanan javascript dan css di bagian head di atas KODE ]]></b:skin> atau javascript di bawah <head> sedang css di atas ]]></b:skin>
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;
}
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.
Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :
» Happy Blogging - gubhugreyot «
Catatan/Keterangan :
terimakasih gan,,,sngat mmbntu sya sbg anak baru,,,sukses y gan...
BalasHapusmas kalau membuatmenu accordion dengan javascrip gmn ya?
BalasHapusperbedaan pembuluh nadi dan balik
pengertian pembuluh nadi
pengertian pembuluh balik
sangat membantu artikelnya,,,v aku takut mengotak atik template...jangan lupa singgah sejenak di blog ku,,,http://pantunjenaka1.blogspot.co.id
BalasHapusTerima kasih jangan lupa kunjungi http://zonime.bloger.id
BalasHapus