Dynamic Drive DHTML code library!
Dynamicdrive.com


.
.

Menu

Search DD
Recommend DD
Help Forums New
DHTML books
Advertising
Contact

Featured Script
Rollover buttons 

Turn regular form buttons into rollover menus with this script!
.

Partners

Free JavaScripts
.

Link to DD

Do you use scripts from Dynamic Drive? Please give something back by linking to us...
.

Home Small4.gif (1046 bytes) Menus and navigation systems Small4.gif (1046 bytes) Here

Drop down menu link All

Credits: Dynamic Drive
Last updated: 98/11/08

Description: Combo link boxes are great- and outdated. With all the DHTML capabilities that comes with fourth generation browsers, isn't it time you upgraded your shabby combo box to a more stylish, versatile DHTML drop down menu? The below is a cross-browser menu script that allows you to pack into it rich HTML links. IE 4 users will experience the added effect of the menu incrementally coming into view when clicking it. As always, the script degrades well with all low-level browsers, so what are you waiting for? Give your combo boxes a total makeover today!

Demo:

Click here


Directions Developer's View

Step 1: Add the following style sheet to the head section of your page:


Step 2: Insert the below code into the <body> section of your page where you wish the drop down link to appear:


Step 3: Add the below code inside the <body> section as well. It should always follow the above fragment, and inserted in open space (not contained inside any other tags, such as a <table>).


Configuring the drop down link: Obviously, you'll want to change the links inside the menu to your own. To do so, change the contents inside array "selection[]" of Step 2. You may also wish to change the width of the drop down menu, depending on the contents. To change it's width, go to the code in Step 3. Change the width attribute inside the <div> from 120 to another pixel value.

Notes: The nature of this script requires that the drop down menu link always be left-aligned in the document. "So what if I want the link to appear in the center of the page?", you yell. Well, you'll need to use some cheap HTML techniques. One way is to put the link (code of Step 2) inside a columned table that's centered. For example:

Sample document:
 

Menu here

 

Another note: The default url of the drop down link is "alternate.htm", which is the url old browsers will follow (NS 3, IE 3, for example), for the sake of backwards compatibility. Make it a good one!

Recommend Us!
-If you like Dynamic Drive, please recommend us to a friend...

Legend
All- Script works with Netscape 4 AND Internet Explorer 4+
NS- Indicates script works with Netscape 4 (NOT NS 6 yet)
IE- Indicates script works with Internet Explorer 4 and above
NS6!- Temporary index set up on script category pages to indicate script works in NS6


Copyright 1998-2004 Dynamic Drive. Please read Terms Of Use here before using any of the scripts.
Partners: JavaScript Tutorials | JavaScript Reference