Dynamic Drive DHTML Scripts- Drop down menu w/ description

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

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

Select All

<!--Example drop down menu 1-->

<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>

<!--Example drop down menu 2-->

<form name="form2">
<select name="select2" size="1" style="background-color:#E3FFDF" onChange="displaydesc(document.form2.select2, thetext2, 'textcontainer2')">
<option selected value="http://www.cnn.com">CNN</option>
<option value="http://www.msnbc.com">MSNBC</option>
<option value="http://news.bbc.co.uk">BBC News</option>
<option value="http://www.theregister.com/">The Register</option>
</select>
 <input type="button" value="Go" 
onClick="jumptolink(document.form2.select2)"><br>
<span id="textcontainer2" align="left" style="font:italic 13px Arial">
</span>
</form>



<!--IMPORTANT: Below script should always follow all of your HTML codes above, and never proceed them-->
<!--To be safe, just add below script at the end of your page-->

<script type="text/javascript">

/***********************************************
* Drop down menu w/ description- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
var thetext1=new Array()
thetext1[0]="Comprehensive JavaScript tutorials and over 400+ free scripts"
thetext1[1]="Direct link to hundreds of free Java applets online!"
thetext1[2]="Up to date news on the technology front"
thetext1[3]="News.com- The #1 technology News site."
thetext1[4]="Web Coding and development forums"

/// You may define additional text arrays if you have multiple drop downs:
var thetext2=new Array()
thetext2[0]="CNN- US and World News."
thetext2[1]="MSNBC- NBC News online."
thetext2[2]="BBC News- Updated every minute of every day."
thetext2[3]="TheRegister- Daily IT news."

// Now, see 2) below for final customization step

function displaydesc(which, descriptionarray, container){
if (document.getElementById)
document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
}

function jumptolink(what){
var selectedopt=what.options[what.selectedIndex]
if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
window.open(selectedopt.value)
else
window.location=selectedopt.value
}

//2) Call function displaydesc() for each drop down menu you have on the page
//   This function displays the initial description for the selected menu item
//   displaydesc(name of select menu, name of corresponding text array, ID of SPAN container tag):
//   Important: Remove the calls not in use (ie: 2nd line below if there's only 1 menu on your page)

displaydesc(document.form1.select1, thetext1, 'textcontainer1')
displaydesc(document.form2.select2, thetext2, 'textcontainer2')

</script>

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!

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post