Free-Webmaster-Tools.com is a collection of tools for your web development needs and insightful articles and tips.

DropDown Menu Generators Using JavaScript
By Steve Shubitz

Many of you have requested another way to create a DropDown menu which opens the link in a new window or another method which does not use images like our popular DropDown Menu Generator.

1. This method opens each link in a new window. This drop down menu should be used for external links on other sites. A well designed drop down menu should always provide a label on the first line. Copy and paste the following code into a table and change the labels and links to reflect your own site.

<!----- start drop down - links open in new window ----->
<form method="post" action="" name="">
<select name="select15" onChange="window.open(this.options[this.selectedIndex].value,'_blank')">
<option selected>Webmasters: Free Services For Your Site</option>
<option>---------------------------------------------------</option>
<option value="https://www.geekvillage.com/guest_book/index.html">Guest
Book</option>
<option value="https://www.geekvillage.com/tell_a_friend/index.html">Tell
A Friend</option>
</select>
</form>
<!----- end drop down new window ----->

2. This method opens each link in the same window. These are links on your own site and not another site. The first line contains a label (Site Navigation) to help your guests and improve the usability. Copy and paste the following code into a table and change the labels and links to reflect your own site.

<!----- drop down same window ----->
<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option selected>Site Navigation</option>
<option value="/index.html">Home</option>
<option value="/product_reviews.htm">Product Reviews</option>
<option value="/sitemap.htm">Site Map</option>
<option value="/advertise.html">Advertise</option>
<option value="/addsite.htm">Add Your Site</option>
<option value="/linktous.htm">Link To Us</option>
<option value="/contact.html">Contact Us</option>
</select>
</form>
<!----- end drop down same window ----->

This article is ©2003 by Free-Webmaster-Tools.com/Published Perfection. All rights reserved. Reproduction in any form is prohibited. Print this article.

Return to Webmaster Tips and Articles Index

Top of Page. Free-Webmaster-Tools.com is a collection of tools for your web development needs and insightful articles and tips.