Designing Drop-Down Menus / Sams Teach Yourself JavaScript in 24 Hours

One of the most common uses for JavaScript and the DOM is to create drop-down menus, similar to those used in Windows and MacOS, as a navigation system for a page. Figure 21.1 shows a drop-down menu in action.

Why use drop-down menus? Ideally, you should use them when a website or web application has too many options to conveniently fit on the page. Adding a drop-down menu to a site with only a few pages will just make it more confusing to visitors.

Another potential problem with drop-down menus is that they traditionally require some messy browser-specific code and some awkward HTML markup. Thanks to the now standard W3C DOM, you can create menus using simple markup and a script that works in all modern browsers.

Creating the HTML Markup

'There will always be browsers that don't support drop-down menus correctlyin particular, mobile phone browsers are unlikely to work with this script. You can avoid problems with compatibility by making an unobtrusive script using standard markup. The HTML document for this example, shown in Listing 21.1, uses bullet lists (<ul> and <li> tags) to organize the links into menus.

Listing 21.1. The HTML for the Drop-Down Menu

<html>
<head>
<title>A DOM drop-down menu</title>
<link rel="stylesheet" type="text/css" href="dropdown.css">
<script language="javascript" type="text/javascript"
   src="dropdown.js">
</script>
</head>
<body>
<h1>Menu Test</h1>
<ul id="menu">
<li class="menu"><a href="#">Home</a></li>
<li class="menu"><a href="#">Products</a>
   <ul>
    <li><a href="#">Sub-item 1</a></li>
    <li><a href="#">Sub-item 2</a></li>
    <li><a href="#">Item 3</a></li>
   </ul>
</li>
<li class="menu"><a href="#">Support</a>
   <ul>
    <li><a href="#">Sub-item 1</a></li>
    <li><a href="#">Sub-item 2</a></li>
    </ul>
</li>
<li class="menu"><a href="#">Employment</a>
   <ul>
    <li><a href="#">Sub-item 1</a></li>
    <li><a href="#">Sub-item 2</a></li>
   </ul>
</li>
<li class="menu"><a href="#">Contact Us</a>
   <ul>
    <li><a href="#">Sub-item 1</a></li>
    <li><a href="#">Sub-item 2</a></li>
   </ul>
</li>
</ul>
</body>
</html>

The top-level links (Home, Products, Support, Employment, and Contact Us) are formatted as a bullet list. Most of the links have subitems, listed in a nested bullet list. These subitems will be displayed as drop-down menus using CSS formatting and JavaScript.

Although you have not yet created the CSS or JavaScript for this example, you can try the HTML document in a browserit will be displayed as a simple bullet list, as shown in Figure 21.2.

Notice the class and id attributes in the HTMLthese will be used by the CSS and JavaScript code to format the menu and add behavior. The main <ul> tag that encloses the top-level items has an id attribute of menu, and each top-level item's <li> tag has the class attribute menu.

Watch Out!

The links in this example all link to a nonexistent URL, #. To use the menu on your site, you'll need to replace them with actual links.

Laying Out the Menu with CSS

As you can see in Figure 21.2, the list of links doesn't look much like a drop-down menu yet. You can now use CSS to format the links to appear in the right format.

The first step is to make the main list display in a horizontal format. This can be done with two CSS rules:

#menu li {
   float: left;
   list-style-type: none;
}

The selector, #menu li, looks for any list item directly under the #menu list. The float: left rule causes the items to display left to right instead of vertically, and list-style-type: none prevents a bullet from being displayed. Next, a couple of rules for the subitems:

#menu li ul li {
   float: none;
   list-style-type: none;
}

The selector here, #menu li ul li, looks for <li> items nested under the main <li> items. Once again, list-style-type: none is used to eliminate bullets. The float: none rule is necessary because we want the subitems to be listed vertically rather than inheriting the floating behavior of the main list.

Figure 21.3 shows what the list looks like with the styles so far. As you can see, the menu is beginning to take shape: The main links are displayed in a horizontal row, and each subitem list appears vertically underneath its corresponding item. The spacing and alignment needs work, but it's a start.

By the Way

As you develop a complex layout using CSS, be sure to test in multiple browsers. Floats are one area where Internet Explorer shows its quirks, and you may need to adjust a few rules to make it work cross-browser.

To make the menu look more like a menu, you just need some padding, width, and other settings. Listing 21.2 shows the complete style sheet for the drop-down menu.

Listing 21.2. The CSS File for the Drop-Down Menu

/* The whole menu */
#menu {
   position: absolute;
}
/* Each menu name */
#menu li {
   float: left;
   list-style-type: none;
   padding-right: 20px;
   width: 100px;
   background-color: silver;
}
/* The entire submenu */
#menu li ul {
   background-color: silver;
   margin: 0px;
   padding: 0px;
}
/* Each submenu item */
#menu li ul li {
   padding: 0px;
   margin: 0px;
   float: none;
   list-style-type: none;
   width: 80px;
}

This style sheet uses padding and width values to make sure the submenus line up with their headings. Some background-color attributes are applied to make the menu appear more solid.

The position: absolute rule is used so the menus can overlap the content of the page when they drop down. There's no content in the example, but on a real site you don't want to leave room for the menusif you have that kind of room, you might as well just display the links all of the time.

Using position:absolute has a downsidebecause the menu isn't positioned in the normal flow of the page, the main menu can overlap part of your page unless you avoid it by positioning the other content around it. The ideal situation would be for the main menu to use relative positioning while the submenus use absolute positioningunfortunately, this does not work consistently in Internet Explorer.

The styled menu is shown in Figure 21.4. As you can see, the entire menus are shown at this timethe submenus will be hidden by the script. This ensures that the menu will still be accessible to browsers that support CSS but not JavaScript.

By the Way

When the script is added, the full menus will display for an instant before the script hides them. If you find this annoying, you can add a display:none rule to the CSS for the submenu <ul>. This eliminates the flicker, but makes the menu less useful to browsers without JavaScript support.

Index: [SYMBOL][A][B][C][D][E][F][G][H][I][J][K][L][M][N][O][P][Q][R][S][T][U][V][W][X][Y]

Sams Teach Yourself JavaScript in 24 Hours