Home / Free JavaScripts / Combo Boxes / Here
Cut & Paste DHTML Select Menu
|
Description: This script transforms ordinary SELECT elements on your page into custom DHTML drop down menus instead! The end result is a custom looking navigation menu based entirely on the SELECT menu's HTML. The original HTML is untouched as the script automatically goes about hiding the select menu while replacing that with its counterpart. It's time to give those combo boxes on your site an instant makeover!
Example:
Directions
Step 1: Add the following code to the <head> section of your page:
It references two external files and an image. Download them below (right click, and select "save as"):
- dhtmlcombo.css
- dhtmlcombo.js
-
Single image used:
Step 2: Add the below sample HTML to your page, which illustrates two DHTML select menus:
More Information
As mentioned, this script will transform your regular SELECT menus into a DHTML Menu instead. If you look at the code of Step 2, you'll see how it works exactly:
<!-- 1st example -->
<select id="webmaster" title="Developer Sites">
<option value="http://www.javascriptkit.com">JavaScript Kit</option>
<option value="http://www.php.net">PHP.net</option>
<option value="http://www.codingforums.com">Coding Forums</option>
<option value="http://www.dynamicdrive.com">Dynamic Drive</option>
<option value="http://www.cssdrive.com">CSS Drive</option>
<option value="http://www.dynamicdrive.com/forums/">CSS Menus and codes</option>
</select>
<script type="text/javascript">
//dhtmlselect("id_of_select_menu", "optional_width_of_select_box_px",
"optional_width_of_drop_down_menu_px")
dhtmlselect("webmaster")
</script>
The first portion is just your regular SELECT menu HTML with various options and urls defined (via the "value" attribute). To transform it into a DHTML menu, just call the JavaScript function:
dhtmlselect("webmaster")
immediately following the SELECT menu to replace it, where the ID of the menu is passed in as its parameter. You should call this function immediately following the HTML code, so the DHTML menu position on the page is identical to the original SELECT menu's.
Styling the DHTML Select Menu
To customize the look of the DHTML select menu, just modify the values inside dhtmlcombo.css. However, for each menu on your page, you can individually change the menu's width from the default. This is done by using two optional parameters when calling the dhtmlselect() function:
dhtmlselect("webmaster", "150px", "200px")
This causes the main box to be "150px", and the drop down menu that appears onMouseover to be "200px" for this particular DHTML select menu.