HTML Demo pages: Javascript

Javascript

Here is a vertically-arrayed drop down menu where the submenus appear to the right of their parent elements

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 Nick Rigby and published here in 2004 on A List Apart, a wonderful resource for examples of interesting and standards-compliant CSS work and discussions of web design.

This menu has three different components:

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


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

Since this menu uses unordered lists the list items are arrayed vertically. The position property in the <ul li> contextual selector is set to relative and in combination with the next declaration, allows the submenus to move.
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 submenu is moved to the right of the parent with a distance one pixel less than the width of the parent element. This overlap keeps the borders consistent.

When the cursor hovers over the menu item, the submenu will appear to the right. Because the display property has the value of none, the submenu does not appear until the cursor is over the appropriate list item.

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 <html ul li> and <html ul li> contextual selectors fix an IE bug that wqould prevent the submenus from aligning up correctly.

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.

Page by Howard Rosenbaum
Find me at hrosenba@indiana.edu	http://www.slis.indiana.edu/hrosenba/www/Demo/popup.html