Javascript

• Home
• Test link 1
  • Test link 1.1
  • Test link 1.2
  • Test link 1.3
  • Test link 1.4
• Test link 2
  • Test link 2.1
  • Test link 2.2
  • Test link 2.3
  • Test link 2.4
• Test link 3
  • Test link 3.1
  • Test link 3.2
  • Test link 3.3
  • Test link 3.4

This menu is an adaptation of a two level drop down menu designed by Patrick Griffiths and Dan Webb and published here in 2003 on A List Apart, a wonderful resource for examples of interesting and standards-compliant CSS work and discussions of web design.

1. HTML markup based on nested unordered lists

2. CSS style declarations that style, structure and power the menu

3. A javascript that handles a display problem that IE for Windows has with the CSS

The HTML markup looks like this:

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Test link 1</a>
        <ul>
            <li><a href="#">Test link 1.1</a></li>
            <li><a href="#">Test link 1.2</a></li>
            <li><a href="#">Test link 1.3</a></li>
            <li><a href="#">Test link 1.4</a></li>
        </ul>
    </li>
    <li><a href="#">Test link 2</a>
        <ul>
            <li><a href="#">Test link 2.1</a></li>
            <li><a href="#">Test link 2.2</a></li>
            <li><a href="#">Test link 2.3</a></li>
            <li><a href="#">Test link 2.4</a></li>
        </ul>
    </li>
    <li><a href="#">Test link 3</a>
        <ul>
            <li><a href="#">Test link 3.1</a></li>
            <li><a href="#">Test link 3.2</a></li>
            <li><a href="#">Test link 3.3</a></li>
            <li><a href="#">Test link 3.4</a></li>
        </ul>
    </li>
</ul>

What's going on here

Notice that the submenuas are nested unordered lists. The submenu is place inside the list item

The opening <ul> tag has an id with a value of nav. This links the menu to the javascript shown below, the purpose of which is to make the menu work in IE.

The CSS markup looks like this

<style type="text/css">

<!--

ul {margin: 0;
     padding: 0;
     list-style: none;
    }

li {float: left;
     position: relative;
     width: 10em
    }

li ul {display: none;
        position: absolute;
        top: 1em;
        left: 0;
       }

ul {top: auto;
     left: auto
    }

/* Styles for Menu Items */
ul li a {display: block;
           font-size: .75em;
           text-decoration: none;
           color: #000;
           background: #fff; /* IE6 Bug */
           padding: 5px;
           border-width: 1px; /* The border properties fix an IE6 Bug */
           border-style: solid;
           border-color: #ff0000; /*IE Bug */
           border-bottom: 1
          }

li:hover ul, li.over ul { display: block } /* The magic */

-->
</style>

What's going on here

Using the list-style property with a value of none declared as part of the <ul> selector removes the markers (bullets) from the list items

The <li> selector uses the float property with a value of left and the position property with a value of relative to force the list items to array themselves horizontally. the width of 10em set the width of the box within which the link is contained.

Each submenu is then positioned using the position property in the <li ul> contextual selector. This time the positioning is absolute within the parent element. The entire submenu is positioned 1em below its parent.

Because the display property has a value of none, the submenu's initial state is hidden. When the cursor hovers over the menu item, the submenu will appear below its parent

The <li > ul> contextual selector is needed to make sure other browsers are not effected by the workarounds that are used to deal with IE's buggy handling of the CSS

The way the links appear is set in the <ul li a> contextual selector can be changed. The display and text-decoration properties should not be changed.

The <li:hover ul> and <li.over ul> contextual selectors make the submenus appear when the cursor is over the appropriate link. The second selector works with the javascript below.

And the javascript looks like this

// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
   }
   node.onmouseout=function() {
   this.className=this.className.replace(" over", "");
    }
    }
   }
  }
}
window.onload=startList;

What's going on here

The purpose of this script is to ensure that the menu works with IE. Use it exactly as it is here

Since it is likely to be reused, it is convenient to place it in an external javascript file, in this case called drop_down.js

The script is called in the <head> of the document where it is to be used. The call looks like this

<script type="text/javascript" src="drop_down.js"></script>

Return to Javascript for home use.