• Calendars
• Date & Time
• Document Effects
• Dynamic Content
• Form Effects
• Games
• Image Effects
• Links & Tooltips
• Menus & Navigation
• Mouse and Cursor
• Scrollers
• Text Animations
• User/System Preference
• Window and Frames
• Other
• XML and RSS

• Script Forums
• Recommend Us
• Usage Terms
• Free JavaScripts

• IE5+: IE 5 and above
• FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
• Opr7+: Opera 7 and above.

Description: Use this script to create a drop down control for arbitrary content on the page, such as a a search form. The content to drop down is simply wrapped inside a hidden container and dynamically shown onClick or onMouseover. Furthermore, you can specify whether the content should drop down directly below or to the right of the activating element. A nice space saver script that's also not bad as a menu!

See also: Overlapping content link.

Example 1: Drop down menu:

This example uses Dropdown HTML control to create a dropdown menu. The menu itself is simply a DIV with links contained inside it:

The code for it would look like this:

Example 2: Drop down search box:

This example shows a search form that drops to the right of a DIV when clicked on:

The code for it would look like this:

Download: Download Dropdown HTML Control (External .js file plus examples).

Parameters for main function:

at_attach(parent, child, showtype, position, cursor)

• parent - id of visible html element

• child - id of invisible html element that will be dropdowned

• showtype - "click" or "hover"- first value causes content to be shown onClick, and the second, onMouseover.

• position - "x" or "y"- first value causes content to drop down and to the right, and the second, just down.

• cursor: The CSS cursor to display for this control. See here for a list of valid CSS cursor values.