Dropdown Menu

This version is v1.0. All the files used in this page are in bzip format or gzip format.

Download the most recent version, or other scripts by eightize, from the scripts page.

The advantage of this method is that it works well with most browsers, and degrades well on text-only browsers. The menu looks like nested lists on text-only browsers. In order to allow it to degrade gracefully where javascript is disabled, the links to the sub-menu must be displayed by default on the page that main menu item links to. Also, there is very little markup added to the html, so it's clean.

To set up script:

  1. Create an unordered list with class "menu":
    <ul class="menu">
  2. Each list item in the list is a main menu item
  3. For the dropdown within that menu item, add another unordered list within that list item:
  4. Link the stylesheet 'dropNav.css' in the head of the document.
    <link type="text/css" rel="stylesheet" href="dropNav.css" title="nav styles" media="screen">
  5. Attach the script 'Nav.js' as a head script in the document.
    <script type="text/JavaScript" src="Nav.js"></script>
  6. Colors, fonts, etc. can be adjusted in the 'dropNav.css' stylesheet.

Known Issues

If you assign an onload event in the <body> tag, it will override and eliminate the onload call setup for this script.
Solution is to use Simon Willison's addLoadEvent() function included in the Nav.js script for any onload events, instead of writing directly into the <body> tag.
Enlarged text will overflow
If the text size is made large enought, or a word is too wide, it will overflow out of the menu.
Does not work in Netscape 4.77 or earlier
Menu is completely missing in these really old browsers. Unfortunately this is not a very graceful degrade if you are concerned about browsers of this vintage.
IE4.5 Mac generates a script error 'Object doesn't support this property or method'.
Main level of menu shows, but sub-menus are missing. Rollover styles do not show.