Zymic Forums

Webmaster resources

Zymic IRC Server

Chat in real time at irc.zymic.com - Learn More

Welcome

Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.

In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.

left Zymic Webmaster ForumsZymic Free Web HostingTutorials right
left
Drop Down Menu Using Javascript
 right
k.digennaro
post Feb 16 2009, 03:12 AM
Post #1


Outrageously Uber Ninja
*******

Group: Members
Posts: 840
Joined: 30-March 08
From: Cincinnati, OH
Member No.: 16,073
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/JS_Drop_Down/

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
Go to the top of the page 
 
  + Quote Post
 
 Start new topic
Replies
bobbbyboy
post Mar 30 2010, 10:06 PM
Post #2


Newbie
*

Group: Members
Posts: 9
Joined: 30-March 10
Member No.: 136,567
thanks buddy, i have needed this script for quite a while, i will use it soon.
Go to the top of the page 
 
  + Quote Post

Posts in this topic
k.digennaro   Drop Down Menu Using Javascript   Feb 16 2009, 03:12 AM
MrTouz   Boooo, i don't like JS. Why JS ? i can't ...   Feb 17 2009, 12:05 AM
k.digennaro   Works fine for me, wat browser are you using? Hove...   Feb 18 2009, 12:42 AM
Iwantha   Works fine for me, wat browser are you using? Hove...   Apr 19 2010, 01:18 PM
MrTouz   i have to refresh several time to connect to your ...   Feb 18 2009, 01:07 AM
Jenie   i have this project in school and this will come i...   Feb 26 2009, 11:19 AM
Jenniferlinn   Hey all, I wrote that tutorial on how to create a ...   Mar 10 2009, 10:36 AM
rojerbinny3132   It works for me..not bad..   Apr 3 2009, 10:50 AM
Jennysmith   Hello Thanks for sharing this useful script as i ...   Apr 3 2009, 12:58 PM
True   Broken preview link :'(   Dec 23 2009, 03:36 PM
zpcs   Hi Kevin yeah the link is brok-den :unsure:. For a...   Jan 7 2010, 06:46 AM
bobbbyboy   thanks buddy, i have needed this script for quite ...   Mar 30 2010, 10:06 PM
k.digennaro   Sorry guys I was cleaning the server and deleted t...   Aug 23 2010, 09:30 PM
Michael Wilson   Nice :D   Aug 25 2010, 12:40 AM
credasys   I'll also try this code if it's really wor...   Nov 11 2010, 05:02 PM
FrankMarten   A well designed drop down menu should always provi...   Nov 23 2010, 08:17 AM
fly9fly9   Thanks for sharing this useful script !   Nov 23 2010, 10:01 AM
heff   Thanks for sharing. I'm tring to center this ...   Nov 28 2010, 08:00 PM
John Migh   wow ! nice tutorial thanks for sharing   Feb 26 2011, 12:13 PM
shnooky   Thanks for the drop down script. I'm still ver...   Oct 12 2011, 03:47 PM
dann12   Works like charm ! Great share.. will be usefu...   Oct 29 2011, 01:20 PM

« Next Oldest · Tutorials · Next Newest »
 
 Reply to this topic Start new topic
left
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
 right
0 Members:
left
Forum Jump
 right
 
Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

Lo-Fi Version Time is now: 26th May 2013 - 12:42 AM
Powered By IP.Board 2.2.2 © 2013  IPS, Inc.