Posted in html, css & javascript, teknis

Dropdown menu dengan javascript

Gara-gara Erwin nanya gimana sih caranya bikin dropdown menu pakai javascript, akhirnya saya jadi ikutan nyari gimana caranya. Saya sebelumnya memang belum pernah tau caranya. Saya hanya tahu selintas, bahwa dropdown menu itu dibuat memakai tag <ul> dan <li>.

Banyak sekali source dropdown menu dengan javascript yang beredar di internet, tapi saya menemukan 1 yang simpel dan gampang di-customize dan diimplementasi.

Dropdown menu dengan Javascript
Dropdown menu dengan Javascript

HTML code:

<ul id=”dropdownmenu”>
<li><a href=”#” onmouseover=”mopen(‘m1’)” onmouseout=”mclosetime()”>Home</a>

<div id=”m1″ onmouseover=”mcancelclosetime()” onmouseout=”mclosetime()”>
<a href=”#”>HTML Drop Down</a>
<a href=”#”>DHTML Menu</a>
<a href=”#”>JavaScript DropDown</a>
<a href=”#”>Cascading Menu</a>
<a href=”#”>CSS Horizontal Menu</a>

</div>
</li>
<li><a href=”#” onmouseover=”mopen(‘m2’)” onmouseout=”mclosetime()”>Download</a>
<div id=”m2″ onmouseover=”mcancelclosetime()” onmouseout=”mclosetime()”>
<a href=”#”>ASP Dropdown</a>
<a href=”#”>Pulldown menu</a>
<a href=”#”>AJAX Drop Submenu</a>

<a href=”#”>DIV Cascading Menu</a>
</div>
</li>
<li><a href=”#” onmouseover=”mopen(‘m3’)” onmouseout=”mclosetime()”>Order</a>
<div id=”m3″ onmouseover=”mcancelclosetime()” onmouseout=”mclosetime()”>
<a href=”#”>HTML Drop Down</a>
<a href=”#”>DHTML Menu</a>

</div>
</li>
<li><a href=”#”>Help</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
<div style=”clear:both”></div>

CSS:

<style>
#simpledropdownmenu
{    margin: 0;
padding: 0;
z-index: 30}

#simpledropdownmenu li
{    margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}

#simpledropdownmenu li a
{    display: block;
margin: 0 1px 0 0;
padding: 4px 10px;
width: 60px;
background: #5970B2;
color: #FFF;
text-align: center;
text-decoration: none}

#simpledropdownmenu li a:hover
{    background: #49A3FF}

#simpledropdownmenu div
{    position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #EAEBD8;
border: 1px solid #5970B2}

#simpledropdownmenu div a
{    position: relative;
display: block;
margin: 0;
padding: 5px 10px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background: #EAEBD8;
color: #2875DE;
font: 11px arial}

#simpledropdownmenu div a:hover
{    background: #49A3FF;
color: #FFF}

</style>

Javascript code:

<script type=”text/javascript”>
// Copyright 2006-2007 javascript-array.com

var timeout    = 500;
var closetimer    = 0;
var ddmenuitem    = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = ‘hidden’;

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = ‘visible’;

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = ‘hidden’;
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

</script>

Dah, itu saja. Cukup simpel kan, tapi kalau masih bingung juga, bisa download file html contohnya disini. Klik kanan di link-nya, pilih Save Target As.

4 thoughts on “Dropdown menu dengan javascript

Leave a Reply

Your email address will not be published. Required fields are marked *