1. Tech

Your suggestion is on its way!

An email with a link to:

http://javascript.about.com/library/blnav1.htm

was emailed to:

Thanks for sharing About.com with others!

Site Navigation

1. Introduction

clr gif

Once you get lots of pages on your web site, providing links to all of the pages starts to take up a lot of space on the screen. Eventually, you start looking for a method of placing lots of links onto the screen in such a way that the links only appear when the person viewing the page wants to select one. A drop down selection box provides a method of choosing between lots of options while only using up as much space as a single option except while a selection is being made. Here is a simple drop down selection box that allows you to choose a colour.

The code to create this selection box is as follows:

<form name="example1"><div align="center">
<select name="select1" size="1">
<option>Red</option>
<option>Blue</option>
<option>Green</option>
</select></div></form>

The form and div tags define this as a form that will be centred on the page. The select tag defines the drop down list box. Size=1 makes the box display only one entry unless the list is opened up to make a selection. Each option tag defines one of the options to display in the list. A selection is made from the list by clicking on the down arrow at the right hand end of the box and then clicking on the option that you want to select.

By default, the first item in the list is the one that appears when the list is first displayed. To specify a different option as the default you just add selected="selected" within the option tag of the entry that you want to be the default. For example

<option selected="selected">Blue</option>

So now we know how to create a drop down list but how do we make it so that the list will act as a series of links to other pages on your site? Let's look at how to create a Drop Down Navigation list that links to other pages on the site next.

1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9

Note that the script and the descriptions of the functions that it contains are rewritten from the "Ask Felgall" website with the permission of the copyright owner.

Related Video
Excel Lists- Remove Duplicates
Create Bullet, Number, and Definition Lists in HTML

©2014 About.com. All rights reserved.