Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

Cara Membuat Drop Down Menu dengan Javascript

Drop down menu tetap menjadi satu menu terfavorit hingga saat ini 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 :

3 komentar:

  1. terimakasih gan,,,sngat mmbntu sya sbg anak baru,,,sukses y gan...

    BalasHapus
  2. sangat membantu artikelnya,,,v aku takut mengotak atik template...jangan lupa singgah sejenak di blog ku,,,http://pantunjenaka1.blogspot.co.id

    BalasHapus

 
GR | Edited by | gubhug reyot