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
  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: 808
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/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
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: 808
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


Ninja
***

Group: Members
Posts: 231
Joined: 10-May 09
From: Wisconsin state: United States
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
chanchalseo
post Mar 16 2010, 09:16 AM
Post #11


Newbie
*

Group: Members
Posts: 8
Joined: 13-November 09
Member No.: 118,301
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
Go to the top of the page 
 
  + Quote Post
bobbbyboy
post Mar 30 2010, 10:06 PM
Post #12


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 #13


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
« Next Oldest · Tutorials · Next Newest »
 
 Reply to this topic Start new topic
left
2 User(s) are reading this topic (2 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: 30th July 2010 - 11:33 PM
Powered By IP.Board 2.2.2 © 2010  IPS, Inc.