Zymic Webmaster Forums > Drop Down Menu Using Javascript

Full Version: Drop Down Menu Using Javascript

Zymic Webmaster Forums > Zymic Free Web Hosting > Tutorials

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

Feb 17 2009, 12:05 AM

Boooo, i don't like JS.

Why JS ? i can't see the effect so i will shut my mouth for now

But yea... fix the previews and ill see what my complains are

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

MrTouz

Feb 18 2009, 01:07 AM

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

Feb 26 2009, 11:19 AM

i have this project in school and this will come in handy..thanks...

Jenniferlinn

Mar 10 2009, 10:36 AM

QUOTE(k.digennaro @ Feb 16 2009, 03:12 AM)

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>

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

Apr 3 2009, 10:50 AM

It works for me..not bad..

Jennysmith

Apr 3 2009, 12:58 PM

Hello

Thanks for sharing this useful script as i was really in search of such an useful script

True

Dec 23 2009, 03:36 PM

Broken preview link :'(

zpcs

Jan 7 2010, 06:46 AM

Hi Kevin
yeah the link is brok-den

. For all of us that would like to see the action could you please repost the page .... Hmmm?

chanchalseo

Mar 16 2010, 09:16 AM

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.