O'Reilly logo

JavaScript & DHTML Cookbook by Danny Goodman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating Expandable Menus

NN 6, IE 5

Problem

You want to present a navigation menu that looks and operates like the expandable/collapsible hierarchy shown in the lefthand frame of many popular products (Windows Explorer, Outlook Express, Adobe Acrobat PDF bookmarks, and so on).

Solution

Use the expandableMenu.js library shown in Example 10-6 in the Discussion to populate an HTML container on your page with a collapsible menu like the one shown in Figure 10-4. A simple, empty div element is all you need in the HTML portion of the solution:

<div id="content"></div>

In the body, assign the menu initialization function, initExpMenu( ), to the onload event handler:

onload="initExpMenu( )"

Other pieces that you need to provide or customize, as described in the Discussion, are the following:

  • Images for the outline graphics

  • Script global variable values for precached images and outline item link target

  • Outline data assigned to the olData object

  • A pre-expansion state (optional)

  • Style sheet rule dimensions to match your image designs and font specifications

This recipe works with Internet Explorer 5 or later and Netscape 6 or later. It does not operate as-is in Opera, but see the Discussion section for more information.

The expandable navigation menu

Figure 10-4. The expandable navigation menu

Discussion

Participating in this recipe are a few style sheet rules that control the appearance and layout of elements that scripts create ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required