Inside Dynamic HTML | Fun and Games | The 10K Demo | XML Online | CSS Online | Resources
Write Once! | DHTML Toolkits | Inside Techniques | Inside Scriptlets

Inside Techniques/

Outline Everywhere

Building an Outline
Reviewing the Code

Defining a cross-browser HTML outline requires a small amount of JavaScript and client-side refreshing of the page.


Outline Everywhere

This article demonstrates a script that creates an expanding an collapsing outline that runs on both Netscape Navigator 3 or 4 and Internet Explorer 4. This menu is created without using any of the new Dynamic HTML enhancements and instead relies on a few very basic features of the document object model.

To the left you will find a simple site map. Clicking on the light green link "Inside DHTML" expands to show the different areas of the site. Expanding a particular area displays the details for each section. In this example, we only created a simple outline. Each item can be enhanced to optionally navigate you to the specific page.

When using the outline, you may notice a brief flicker as the page rerenders itself. This flicker gives away how we are creating the outline without using Dynamic HTML. Each time you click on an item, the page is regenerated and redisplayed on the client (no server interaction is required). Since this code constantly reloads with each expanding and collapsing of the outline, you should limit the use of these outlines to navigation panes.

Next we take you through the steps for building an outline.