Inside Technique : Navigation Lists
By Scott Isaacs

You can quickly and easily add a drop down list of links to your page that runs on all JavaScript aware browsers. You define the list without writing any code. Instead, the standard value attribute on each individual list item specifies the URL. When the user selects an item from the list, they are taken to the specified page.

To demonstrate, try the sample list below. The destination URL is displayed in a message box rather than navigating you to the page:

Defining a list is as simple as adding a form to your page:

 <FORM>
   <SELECT ONCHANGE="window.location.href = this.options[selectedIndex].value; 
                     this.selectedIndex=0">
     <OPTION STYLE="color: darkgreen" 
             SELECTED>Where do you want to go?</OPTION>
     <OPTION 
             VALUE="/home.asp">Home Page</OPTION>
     <OPTION 
             VALUE="/insidedhtml.asp">Inside Dynamic HTML Book Info</OPTION>
     <OPTION 
             VALUE="/tips.asp">Inside Techniques</OPTION>
   </SELECT>
 </FORM>

The onchange event is executed every time a new choice is selected from the list. When the user selects an item, the URL is taken from the VALUE attribute on the selected OPTION element. Before the navigation actually occurs, the user's selection is reset to the first item. This is necessary as browsers may cache the last selected value. By always reverting back to the first item, you are ensuring that the user sees the "Where do you want to go?" message every time they enter the page.

You will also notice the first item also has a color specified with an in-line style sheet. At this time, this color is only displayed in Internet Explorer 4.0, and has no effect on other browsers. It was included to demonstrate how you can provide an improved appearance using style sheets to some of your users without adversely effecting the experience for others.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.