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
2 Pages V   1 2 >   Reply to this topic Start new topic
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
MrTouz
post Feb 17 2009, 12:05 AM
Post #2


Outrageously Uber Ninja
*******

Group: Members
Posts: 1,196
Joined: 19-September 07
Member No.: 234
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
Go to the top of the page 
 
  + Quote Post
k.digennaro
post Feb 18 2009, 12:42 AM
Post #3


Outrageously Uber Ninja
*******

Group: Members
Posts: 840
Joined: 30-March 08
From: Cincinnati, OH
Member No.: 16,073
Works fine for me, wat browser are you using? Hover over the "Music" and "Community" links at the top, should work fine.

Kevin DiGennaro
Go to the top of the page 
 
  + Quote Post
MrTouz
post Feb 18 2009, 01:07 AM
Post #4


Outrageously Uber Ninja
*******

Group: Members
Posts: 1,196
Joined: 19-September 07
Member No.: 234
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.
Go to the top of the page 
 
  + Quote Post
Jenie
post Feb 26 2009, 11:19 AM
Post #5


Ninja
***

Group: Members
Posts: 248
Joined: 19-June 08
Member No.: 37,250
i have this project in school and this will come in handy..thanks...
Go to the top of the page 
 
  + Quote Post
Jenniferlinn
post Mar 10 2009, 10:36 AM
Post #6


Newbie
*

Group: Members
Posts: 10
Joined: 10-March 09
From: UK
Member No.: 86,397
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
Go to the top of the page 
 
  + Quote Post
rojerbinny3132
post Apr 3 2009, 10:50 AM
Post #7


Newbie
*

Group: Members
Posts: 19
Joined: 3-April 09
Member No.: 90,027
It works for me..not bad..
Go to the top of the page 
 
  + Quote Post
Jennysmith
post Apr 3 2009, 12:58 PM
Post #8


Newbie
*

Group: Members
Posts: 3
Joined: 3-April 09
From: UK
Member No.: 90,037
Hello

Thanks for sharing this useful script as i was really in search of such an useful script
Go to the top of the page 
 
  + Quote Post
True
post Dec 23 2009, 03:36 PM
Post #9


Newbie
*

Group: Members
Posts: 8
Joined: 21-December 09
From: England, UK
Member No.: 123,410
Broken preview link :'(
Go to the top of the page 
 
  + Quote Post
zpcs
post Jan 7 2010, 06:46 AM
Post #10


Marvellous Ninja
******

Group: Members
Posts: 570
Joined: 10-May 09
From: Wisconsin state, United States of America
Member No.: 94,482
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?
Go to the top of the page 
 
  + Quote Post
bobbbyboy
post Mar 30 2010, 10:06 PM
Post #11


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
Iwantha
post Apr 19 2010, 01:18 PM
Post #12


Newbie
*

Group: Members
Posts: 1
Joined: 19-April 10
Member No.: 139,001
QUOTE(k.digennaro @ Feb 18 2009, 12:42 AM) *
Works fine for me, wat browser are you using? Hover over the "Music" and "Community" links at the top, should work fine.

Kevin DiGennaro
Go to the top of the page 
 
  + Quote Post
k.digennaro
post Aug 23 2010, 09:30 PM
Post #13


Outrageously Uber Ninja
*******

Group: Members
Posts: 840
Joined: 30-March 08
From: Cincinnati, OH
Member No.: 16,073
Sorry guys I was cleaning the server and deleted the example I will rewrite/upload it. I may rewrite the tutorial at sometime I'm not sure if this is still what I use.

-Kevin DiGennaro

Edit: Fixed preview
Go to the top of the page 
 
  + Quote Post
Michael Wilson
post Aug 25 2010, 12:40 AM
Post #14


Newbie
*

Group: Members
Posts: 1
Joined: 25-August 10
Member No.: 154,140
Nice biggrin.gif
Go to the top of the page 
 
  + Quote Post
credasys
post Nov 11 2010, 05:02 PM
Post #15


Newbie
*

Group: Members
Posts: 10
Joined: 27-October 10
Member No.: 162,964
I'll also try this code if it's really working. Anyway, thanks for sharing this code.
Go to the top of the page 
 
  + Quote Post
FrankMarten
post Nov 23 2010, 08:17 AM
Post #16


Newbie
*

Group: Members
Posts: 3
Joined: 19-November 10
Member No.: 165,761
A well designed drop down menu should always provide a label on the first line.really its a so useful thread it work for me..Thanks.
Reason for edit: Removing Ad Link
Go to the top of the page 
 
  + Quote Post
fly9fly9
post Nov 23 2010, 10:01 AM
Post #17


Newbie
*

Group: Members
Posts: 1
Joined: 23-November 10
Member No.: 166,340
Thanks for sharing this useful script !
Go to the top of the page 
 
  + Quote Post
heff
post Nov 28 2010, 08:00 PM
Post #18


Newbie
*

Group: Members
Posts: 8
Joined: 26-November 10
Member No.: 166,802
Thanks for sharing.

I'm tring to center this menu bar instead of it being positioned to the left. I'm new to web development any help would be great.

I've tried changing all the margins to margin-left: auto; margin-right:auto; but this didn't work.

Thanks
Go to the top of the page 
 
  + Quote Post
John Migh
post Feb 26 2011, 12:13 PM
Post #19


Newbie
*

Group: Members
Posts: 5
Joined: 26-February 11
Member No.: 179,542
wow ! nice tutorial thanks for sharing
Go to the top of the page 
 
  + Quote Post
shnooky
post Oct 12 2011, 03:47 PM
Post #20


Member
**

Group: Members
Posts: 32
Joined: 12-October 11
From: Virginia
Member No.: 213,126
Thanks for the drop down script. I'm still very new to this language so these tutorials are life savers.
Go to the top of the page 
 
  + Quote Post
« Next Oldest · Tutorials · Next Newest »
 
2 Pages V   1 2 >
 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: Standard · Switch to: Linear+ · Switch to: Outline

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

Lo-Fi Version Time is now: 20th June 2013 - 05:24 AM
Powered By IP.Board 2.2.2 © 2013  IPS, Inc.