New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
Bookmark online:


FF1+ IE5+ Opr7+

Dropdown HTML control

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:

Select All

Example 2: Drop down search box:

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

Site Search
Enter search terms:

The code for it would look like this:

Select All

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.