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.