Help - Search - Members - Calendar
Full Version: Drop Down Menu Using Javascript
Zymic Webmaster Forums > Zymic Free Web Hosting > Tutorials
k.digennaro
Hey all, I wrote that tutorial on how to create a simple drop down using HTML/CSS only, this tutorial is similar but is the javascript way to do it. I prefer this method because first off it works in more situations, and second off its much cleaner.

Live Preview, http://www.digennarodesigns.com/tutorials/javadrop/*Ignore the errors on the page I just uploaded this to show the drop at the top.

First we've going to create the HTML section of the JS,

Add this bit of code where you want your drop down,
CODE
<div id="menu">

<ul id="nav">
<li><a href="i#">Home</a></li>
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Music</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Discography</a>
<a href="#">Lyrics</a>
<a href="#">Learn To Play</a>
</div>
</li>

<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Community</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Forum</a>
<a href="#">News</a>
<a href="#">Street Team</a>
<a href="#">Affiliates</a>
</div>
</li>

<li><a href="#">Contact Us</a></li>

</ul>
<div style="clear:both"></div>

</div>

This is the basic drop down, it's just a <ul> with some javascript added to make the hover's work.

Next to make this code actually work you need to create the javascript (*Note that I didn't write the Javascript for this dropdown it's just the best code I found).

Create a new document and save it as "dropdown.js" you can do this in Notepad or any html editor.
Paste this code into the document and save.
CODE
// 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;


This is basically it, except one key element, the link to the JS

CODE
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Hello!</title>
</style>
<script type="text/javascript" src="dropdown.js"></script>
</head>


Now this is a bit boring so add some CSS to it, here's an example, I'm not going to explain it though,
CODE
#menu {
background: #392115;
width: 270px;
height: 32px;
margin: 0 0;
position: relative;
}

#nav{
padding-top: 7px;
padding-left: -1px;
margin: 0 0;
z-index: 30;}

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

#nav li a
{ display: block;
margin: 0 0 0 0;
padding: 0 0;
width: 90px;
height: 32px;
background: #392115;
color: #d4cebd;
text-align: center;
line-height: 29px;
text-decoration: none;}

#nav li a:hover
{ background: #5a0e09;}

#nav div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #d0bb8c;
border: 1px solid #392115;}

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

#nav div a:hover
{ background: #766441;
color: #330000;}


Enjoy!
Kevin DiGennaro
MrTouz
Boooo, i don't like JS.

Why JS ? i can't see the effect so i will shut my mouth for now tongue.gif But yea... fix the previews and ill see what my complains are tongue.gif
k.digennaro
Works fine for me, wat browser are you using? Hover over the "Music" and "Community" links at the top, should work fine.

Kevin DiGennaro
MrTouz
i have to refresh several time to connect to your site.

From france... using latest version of FF.

As for the hover, i can acheive the same thing using CSS only. Same styling.

Does it work with JS disabled ? If not... not a great idea. It's is the main reason why i don't like using anything that has JSin it. Don't get me wrong, sometimes is usefull... but when i use it, i would most likely give an alternative. In this case... it's kind of hard.
Jenie
i have this project in school and this will come in handy..thanks...
Jenniferlinn
QUOTE(k.digennaro @ Feb 16 2009, 03:12 AM) *
Hey all, I wrote that tutorial on how to create a simple drop down using HTML/CSS only, this tutorial is similar but is the javascript way to do it. I prefer this method because first off it works in more situations, and second off its much cleaner.

Live Preview, http://www.digennarodesigns.com/tutorials/javadrop/*Ignore the errors on the page I just uploaded this to show the drop at the top.

First we've going to create the HTML section of the JS,

Add this bit of code where you want your drop down,
CODE
<div id="menu">

<ul id="nav">
<li><a href="i#">Home</a></li>
<li><a href="#"
onmouseover="mopen('m1')"
onmouseout="mclosetime()">Music</a>
<div id="m1"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Discography</a>
<a href="#">Lyrics</a>
<a href="#">Learn To Play</a>
</div>
</li>

<li><a href="#"
onmouseover="mopen('m2')"
onmouseout="mclosetime()">Community</a>
<div id="m2"
onmouseover="mcancelclosetime()"
onmouseout="mclosetime()">
<a href="#">Forum</a>
<a href="#">News</a>
<a href="#">Street Team</a>
<a href="#">Affiliates</a>
</div>
</li>

<li><a href="#">Contact Us</a></li>

</ul>
<div style="clear:both"></div>

</div>

This is the basic drop down, it's just a <ul> with some javascript added to make the hover's work.

Next to make this code actually work you need to create the javascript (*Note that I didn't write the Javascript for this dropdown it's just the best code I found).

Create a new document and save it as "dropdown.js" you can do this in Notepad or any html editor.
Paste this code into the document and save.
CODE
// 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;


This is basically it, except one key element, the link to the JS

CODE
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Hello!</title>
</style>
&lt;script type="text/javascript" src="dropdown.js"></script>
</head>


Now this is a bit boring so add some CSS to it, here's an example, I'm not going to explain it though,
CODE
#menu {
background: #392115;
width: 270px;
height: 32px;
margin: 0 0;
position: relative;
}

#nav{
padding-top: 7px;
padding-left: -1px;
margin: 0 0;
z-index: 30;}

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

#nav li a
{ display: block;
margin: 0 0 0 0;
padding: 0 0;
width: 90px;
height: 32px;
background: #392115;
color: #d4cebd;
text-align: center;
line-height: 29px;
text-decoration: none;}

#nav li a:hover
{ background: #5a0e09;}

#nav div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background: #d0bb8c;
border: 1px solid #392115;}

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

#nav div a:hover
{ background: #766441;
color: #330000;}


Enjoy!
Kevin DiGennaro



I was in search of this script and finally found it here, thanks for sharing the post on the board, keep posting
rojerbinny3132
It works for me..not bad..
Jennysmith
Hello

Thanks for sharing this useful script as i was really in search of such an useful script
True
Broken preview link :'(
zpcs
Hi Kevin
yeah the link is brok-den unsure.gif. For all of us that would like to see the action could you please repost the page .... Hmmm?
chanchalseo
Hi,


Really it is very useful for me, i am a java developer and i really love it. I was searching for this script, because i have some problem in the drop down menus so it is hug resource for me.



Thanks.

-------------------
Spanish Lessons online / Gmat Test Prep Cource
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2010 Invision Power Services, Inc.