Simple Dropdown Menu


Di internet pastinya sudah banyak source – source mengenai Dropdown Menu, ada yang menggunakan jQuery, mooTools dan sebagainya. Namun kali ini aku coba buat dropdown sesimple mungkin, namun dropdown ini tanpa delay waktu saat mouse mejauh. Jadi jika kita jauhkan mouse, maka langsung aja dropdownnya hilang tanpa selang waktu berap detik. Aku berharap bisa membantu bagi semua pembaca artikel ini.šŸ˜‰

Ini sintaks Javascript nya, silahkan kamu taruh ini di antara element <head> dan </head>

<script>
function tampilMenu(){
document.getElementById(‘menuPopup’).style.display = ‘block’;
}

function tutupMenu(){
document.getElementById(‘menuPopup’).style.display = ‘none’;
}
</script>

Lalu, di bawah ini untuk stylenya pake CSS taruh diantara element <head> juga.

<style>
#menu{
background:#0099FF;
border:1px solid #0033FF;
color:#FFFFFF;
padding:5px;
height:auto;
cursor:pointer;
}
#menu:hover{
background:#00CCFF;
}
.submenu{
margin-top:5px;
background:#0099FF;
border:1px solid #0033FF;
color:#FFFFFF;
height:auto;
cursor:pointer;
position:absolute;
display:none;
}
.submenu li{
list-style:none;
padding:5px;
}
.submenu li:hover{
background:#00CCFF;
}
</style>

Setelah Javascript dan CSS nya selesai, sekarang giliran buat menunya pakai HTML, contoh scriptnya di bawah ini :

<span id=”menu” onmouseover=”tampilMenu();” onmouseout=”tutupMenu();”>Menu</span>
<div id=”menuPopup” onmouseover=”tampilMenu();” onmouseout=”tutupMenu();”>
<li>Menu Pertama</li>
<li>Menu Kedua</li>
<li>Menu Ketiga</li>
</div>

Untuk HTML nya silahkan taruh di dalam element <body>. Nah nanti akan jadi seperti ini klik untuk lihat contoh hasil

2 thoughts on “Simple Dropdown Menu

Mari Berdiskusi Bersama

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s