New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:

FF1+ IE5+ Opr7+

Drop down menu w/ description

Author: Dynamic Drive

Note: Updated May 26th, 04' for ability to include multiple drop downs on page.

Description: This is your straightforward drop down menu, except in IE5+ and NS6+, a description of each selection is displayed beneath it. Very nice addition to a popular application wouldn't you say? Script updated to support options opening in a new window (IE5/NS6+ only), and ability to include multiple menus on the same page.

In below example, the selections "Wired.com" and "CodingForums.com" launches in new windows.

Demo:




Directions Developer's View

Just insert the following code into the <BODY> section of your page where you want the menu to appear:

Select All

Study the source code carefully, as customizing this script involves not just configuring the variables inside the script per the comments, but the FORM's HTML with certain information. For example, a form may look like:

<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="http://www.javascriptkit.com">JavaScript Kit </option>
<option value="http://freewarejava.com">Freewarejava.com</option>
<option value="http://wired.com" target="newwin">Wired News</option>
<option value="http://www.news.com">News.com</option>
<option value="http://www.codingforums.com" target="newwin">Coding Forums</option>
</select>
<input type="button" value="Go"
onClick="jumptolink(document.form1.select1)"><br>
<span id="textcontainer1" align="left" style="font:italic 13px Arial">
</span>
</form>

The parts in red are significant, and point to the areas within your FORM's HTML that need to be changed depending on your form and select menu's names, array name that holds the descriptions, and ID of the SPAN tag that will contain the description, respectively. This is especially relevant if you're including more than one menu on your page.

With that out of the way, change the links inside the OPTION tags to your own, plus their corresponding descriptions inside script. You can also customize the menu's colors and font style. Modify the inline CSS that appears within the tags themselves (ie: style="background-color:#FFFFD7").

Finally, this script allows you to specify that certain links open in a new window. To do so, just insert the attribute "target=newwindow" into the <OPTION> tag in question, for example:

<option value="http://wired.com" target="newwin">Wired News</option>

Enjoy!