Simple Dropdown Menu

Posted on by

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”

Leave a Reply