Dropmenu the small, easy to implement script for creating DropMenu menus

Overview Menu DropMenu Overview F-A-Q Script Goals Known Issues Browser Check

Instructions Menu Step 1 - The Script Step 2 - The Variables Step 3 - Menu Header Step 4 - The Menus Step 5 - Style Sheet

Download Menu Download Dropmenu DropMenu PageMaker

Contact Menu Contact Privacy Statement

Partner Sites Menu WebDevTips andys onestop

Step 1 - The Script

The script is in 2 parts cbddm.js and vars.js.

vars.js is where you change the few values that make the menu work the way you want. There is more about vars.js here.

Link to vars.js using
<script type="text/javascript" language="JavaScript" src="/YOUR_DIR/vars.js"> </script>

cbddm.js does not require any editing or modification. you just upload it, link to it from the webpage and forget all about it.

Link to cbddm.js using
<script type="text/javascript" language="JavaScript" src="/YOUR_DIR/cbddm.js"> </script>

There is upto 3 things that need to be called from body onload
On pages that don't display the news layer use this
<body onload="startup();" bgcolor="White">

If you are using the news layer then use this
<body onload="startup();donewsitem(1);" bgcolor="White">
The value in () can be 1 or 0. 1 = news displays - 0 = no news

If your page has a form use this
<body onload="isform='yes';startup();" bgcolor="White">
Enclose your form in a div with an ID="formhide" so when the menu is displayed the form disappears - this is done as most form elements remain on top of all the layers which can obscure the menu. Remember to give the div a style class in your stylesheet.

This bit is for nosey people :)

The script itself isn't that complicated really, the problems arose from a lack of standards (as usual). Mozilla and IE use practically identical code - very little tweaking needed to make these 2 browsers happy.

Netscape 6 comes close but uses different syntax for certain things which is really annoying. For example : because an open menu can potentially open wider than the document width some, calculations were required to make sure that this doesn't happen.

Opera, Mozilla and MSIE all use document.body.clientWidth to return the document width. Netscape 6 decide to use window.innerWidth which personally I think is odd as it is based on mozilla (so they say:)

MSIE, Mozilla and Netscape 6 all seem to understand offsetLeft and offsetTop however Opera seems to only like offsetLeft but not if you are using tables (another oddity) as getElementById is supposed to make finding things easier, I can't understand why Opera has a hard time with it.

Netscape 4x is just a pain but if you have tried to do anything useful with Netscape 4x you'll know some of the problems associated with it.

So, if you are nosing through the code and wonder why certain bits where done certain ways you now know the answer :)