Perjalanan seorang Herli

"because writing is, like death, a lonely business." – Neil Gaiman

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 Responses to “Dropdown menu dengan javascript”

  1. deden says:

    makasih mas, tapi bikin sub menunya ada tambahan lagi nga…..n boleh tanya lebih nga mas, kalau butuh bantuan….?

  2. Herli says:

    @deden
    duh, koq mas sih (_ _”)
    yang aku tau baru segini, nanti kalau ada yang lain lagi, aku bagi deh 🙂

  3. Slamet says:

    Saya ucapkan terima kasih, saya kebetulan sedang belajar html/javascript spt ini.
    Tks sekali lagi

  4. Herli says:

    @Slamet:
    sama2, saya juga nemu artikel ini di internet koq, jadi saya hanya berbagi saja.. 🙂

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>