JavaScript Dropdown Menu Tutorial

[[Li] Brad]

Alright, based on the number of questions I see and receive from people looking for a good JavaScript dropdown menu tutorial, I decide to write this – though it’s more of a walkthrough, so bear with me.
----
Ahh, JavaScript. It’s quite useful in certain situation, I have found. Too bad I don’t have a clue on how to write the darned stuff; couldn’t be bothered to learn in fact (at least at this time) so naturally when I stumbled across this code for a great dropdown menu, I was pleased.

**NOTE: I did not write the actual JavaScript functions, I stumbled on them awhile ago and any credits that were in the code have been lost in transfer. I’m not trying to pass this code off as my own, so if you know whose it is, please inform me 

Step 1 – The .js File
First we start off with the actual file with all the functions. Rather than insert it all here, I will attach it as a text file following all these instructions, as it is lengthy to say the least.

The script is in an external .js file since a dropdown menu would be used on more than one page and therefore including it in the HTML is a more efficient way of doing it. I will discuss the insertion of the code at a later spot in this walkthrough.

Step 2 – The .CSS File
The Cascading Style Sheet file basically defines the look and feel of the dropdown menu, it formats everything from background color to mouseover effects. I will include the code here since it isn’t long: .menu {
filter:alpha(Opacity=100, FinishOpacity=65,
_ Style=1, StartX=0, StartY=0, FinishX=500, FinishY=250);
}
.MenuBox {
border-bottom: 1px solid #999999;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
}
a.MenuHeader
{
COLOR: #0033CC;
FONT-SIZE: 10px;
FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
}
a.MenuHeader:link
{
COLOR: #0033CC;
FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
}
a.MenuHeader:visited
{
COLOR: #0033CC;
FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
}
a.MenuHeader:hover
{
COLOR: #0033CC;
FONT-FAMILY: Tahoma, Arial, Helvetica, sans-serif;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
}
a.MenuItem
{
COLOR: #666666;
FONT-SIZE: 10px;
FONT-FAMILY: Tahoma;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
}
a.MenuItem:link
{
COLOR: #666666;
FONT-SIZE: 10px;
FONT-FAMILY: Tahoma;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
}
a.MenuItem:visited
{
FONT-SIZE: 10px;
FONT-FAMILY: Tahoma;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
}
a.MenuItem:hover
{
COLOR: #990000;
FONT-SIZE: 10px;
FONT-FAMILY: Tahoma;
TEXT-DECORATION: None;
FONT-WEIGHT: Bold;
}If you understand this then you can skip to Step 3, otherwise here is an explanation on how the following CSS properties work (I’ll display the attributes that I know what they do):
.menu – Formats the menu’s background to slowly fade out as towards the right side of the screen. While this is a cool feature, it is not supported by Netscape or Mozilla (that I know of) though adding it in won’t cause problems in these browsers.
The attributes(?) for the .menu property are:
- Opacity: Controls the starting opacity (left side; in percentage)
- FinishOpacity: Controls the ending opacity (right side; in percentage)

.MenuBox – Formats the dropdown menu box.
- border-bottom: Controls the style of the bottom border in the dropdown items
--- 1px: The weight of the border
--- solid: The style of the border
--- #999999: The hexadecimal color code for dark gray. Check out http://www.colorschemer.com/online.html for a list of hex color codes
- The rest (border-right, left and conceivably top you can figure out ;))

The rest of the properties just format different instances of the text, you can change what is listed under these properties and more if you want. Check out http://www.w3schools.com/css/default.asp to learn all about Stylesheets!

Step 3 – The JavaScript Include
At this time we will go ahead and insert the JavaScript include for the .js file. Place this code: <script language="JavaScript" src="myjsfile.js"></script>in each HTML page that will use the dropdown menu. I just put it right after the <body> tag, but you can put it anywhere in the file you need.
*Remember that the link in the code above is relative, if you stored the .js file somewhere other than the same directory as the page it is included on, you will need to add a path (scripts/myjsfile.js))


Step 4 – The Table
We need to start the table where the dropdown menu will be placed so (some of the code is in long lines, so rather than mess up the forum, I have added an underscore ( _ ) to where the code skips to the next line. There are about 10, so take them out along with the line breaks to fix the code) : <table width="136" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>Of course you may need to change this to suit your needs. Now we add a link-to-nowhere so the JavaScript can detect an event: <div id="label1">
<a href="#" class="MenuHeader" onMouseover="return !showMenu('1', event,
_ 'label1'); menuOver('rollimg1');" onMouseOut = "window.status='';return true;">
<img src="images/services.gif" alt="Services" width="72" height="25"
_ border="0">
</a>
</div>All the code is relative to my site, so you will need to change the image size and location for your own. This section creates the actual “closed” view of the menu, so my dropdown will be Services. Just copying and pasting the code will suffice here, just be sure to change your image locations, sizes and alt text.

Step 5 – The Hidden Divs
Alright, now it gets tricky. Just align your code right and you should see the logical pattern of the code, so here goes: <div id="menu1" style="width: 150px; height: 52px; position:absolute; z-index:1;
_ visibility:hidden" onmouseover="event.cancelBubble = true;" class="Menu">
<table border="0" cellspacing="0" cellpadding="0" width="200">
<tr>
<td bgcolor="#336699" width="100%">
<table border=0 cellpadding=2 cellspacing=0 width="100%">
<! -- Chunk ->
<! -- Chunk 1 Starts ->
<tr id="1a" bgcolor="#336699">
<td onMouseover="this.style.backgroundColor = '#004d99';" onMouseout =
_ "this.style.backgroundColor = '#336699';" width="100%" class="MenuBox">
<a class="MenuItem" href="temp.php?page=webdesign.html"
_ onMouseOut="menuOut('rollimg1');" onMouseOver=
_ "menuOver('rollimg1');">Web Design</a></td>
</tr>
<! -- Chunk 1 Ends ->
<! -- Chunk 2 Starts ->
<tr id="1b" bgcolor="#336699">
<td onMouseover="this.style.backgroundColor = '#004d99';" onMouseout =
_ "this.style.backgroundColor = '#336699';" width="100%" class="MenuBox">
<a class="MenuItem" href="temp.php?page=logodesign.html"
_ onMouseOut="menuOut('rollimg1');" onMouseOver=
_ "menuOver('rollimg1');">Logo Design</a></td>
</tr>
<! -- Chunk 2 Ends ->
<! -- Chunk 3 Starts ->
<tr id="1c" bgcolor="#336699">
<td onMouseover="this.style.backgroundColor = '#004d99';" onMouseout =
_ "this.style.backgroundColor = '#336699';" width="100%" class="MenuBox">
<a class="MenuItem" href="temp.php?page=quoteform.html"
_ onMouseOut="menuOut('rollimg1');" onMouseOver=
_ "menuOver('rollimg1');">Free Quote</a></td>
</tr>
<! -- Chunk 3 Ends ->
<! -- Chunk ->
</table>
</td>
</tr>
</table>
</div>Now, I don’t think I need to explain this HTML, but I will say:
1. Keep the classes on everything as is and nothing should go wrong.
2. Each chunk of code I have commented represents one of the menu items that appears. To remove a menu item, take out all code between a chunk. To add a menu item, copy and paste the code for a chunk within the Chunk comments. It must be between these comment lines at all times or your page will mess up. Also note that in each chunk, the <tr> has an ID. Just name them logically as I have to avoid problems. (As long as no two IDs are the same, the name doesn’t matter.

Step 6 – Finish the Table
Now just end the table code: </td></tr>
</table>And you should be ready to go!

If you have further questions/comments/bugs in the above walkthrough, PM me, and I’ll help you/fix them ;)

[smoseley]

Good tutorial. Your menus are VERY similar to mine at http://www.transio.com - although it's obvious that we did them separately, I find it funny that we went about making them in almost the exact same way!

[[Li] Brad]

I love this script, it works great, the only thing I cannot find out is how to change the position of the menus for say a side navigation dropdown, it seems easy enough, just change the positioning, but I had tried a lot of different things and none seem to work.

[Li] Brad

[smoseley]

Absolute positioning is a little buggy if you ask me. If I have absolute positioning within a div, it should be absolute RELATIVE to the div I'm in. Really, there should be a third one called "relative-absolute". LOL

[Meepo]

Ok this may sound a bit dumb but im sorry =/

What exactly do you do with the .js and the .css files?

[[Li] Brad]

transio: Really, there should be a third one called "relative-absolute". LOLHeh, I said the exact same thing about it two days ago to my friend Mark, and I agree, there does need to be something like that.

Meepo: The .js file and .css file just need to be saved as their respective type in the same directory as your HTML page (unless you change the links to it in the HTML page, but with the code above you save it in the same directory)

[Li] Brad

[Meepo]

ahh ok thanks a bunch.

I made a 'test' page and ran into a problem right away. I have the image I want loading ok but the drop down menu wont apear when when you highlight it only when you refresh and even then it goes away quickly. http://www.phantasia4.com/meepo.html

[tekp]

error report:

line: 72
char: 3
error: expected ')'

u might wanna check that out

[ashlie]

Hey, Thanks for the tutorial, I was searching for one for ages ><.
I've loaded my own image in, and still getting an idea of how the code works, but there is a slight gap between the image and the drop down part. When you scroll over the small gap the drop down area dissapears, any way you can help me?

[shineability]

Absolute positioning is a little buggy if you ask me. If I have absolute positioning within a div, it should be absolute RELATIVE to the div I'm in. Really, there should be a third one called "relative-absolute". LOL

Simply add this declaration to your parent tag (in this case div):
position: relative;

Every tag declared as 'position: absolute' in this parent tag will position itself in regards to the parent's upper left corner.

Works in Mozilla, Opera, IE, FireFox ...

Grtz, Maarten

[thowcroft]

I'm just starting out with javascript although I've got a bit of experience in html and css. Could someone tell me where would be a good place to go to get an explanation of the js file (functions and stuff) as I prefer to understand the code than just copy it.

Cheers...

[Brak]

Absolute positioning is a little buggy if you ask me. If I have absolute positioning within a div, it should be absolute RELATIVE to the div I'm in. Really, there should be a third one called "relative-absolute". LOL
Really, it makes a lot of sense once you get into how positioning works. For instance, if you simply add this:
position:absolute;
left:50px;

It works exactly how you mention it, positioning absolute relative to containing div... however, once you throw in top it goes all wacko.

One might ask why, there's a simple explination: Once you start moving elements up and down, you must take them out of the document flow, meaning they "float" above everything, allowing things to go underneath them. It's all about the document flow, if you break it, massive changes have to be made... hence the seemingly "weird" rendering of absolute positioning.

shineability> Sorry dude, you're wrong. Relative positioning is positioning something relative to where would be in the document flow. Not the containing div. The element does float above everything (VISUALLY), but it's space in the document flow is preserved, and offset by t
he values you put in.

The solution to "relative-absolute positioning"? Floats and margins. Simply set the element to float:left;, then use margin-left, margin-top, etc to position the element accordingly.

[brianrocco]

i've been having major difficulty trying to learn pop up menus. initially i used fireworks to create them and they only worked in IE. and when i attemped this tutorial, it also didnt work on netscape. any suggestions? am i doing something incorrect?