Collapsible menus - HTML

Collapsible menus have become a staple in Web development, and you can generally avoid the hassle of creating your own from scratch by simply searching the Internet for something that is close to what you want; then make any adaptations necessary to reflect your own site’s needs. Collapsible menus generally come in two styles:

• Vertical menus that expand and collapse on the left side of a Web page and within a reasonably small space. When a user clicks his or her mouse on an item, a group of one or more subitems is displayed, and, generally, remains displayed until the user clicks the main item again, which then collapses the tree.
• Horizontal menus that live at the top of a page. When a user rolls his or her mouse over an item, a group of one or more subitems is displayed, and, generally, disappears when the mouse loses focus on the item.

How they work
Generally, most collapsible menus rely on either the CSS display property or the CSS visibility property. The JavaScript used to manage these menus turns the visibility on or off depending on where a user’s mouse is, or turns the display on or off to collapse or expand a menu. The difference between the visibility property and the display property is that when you hide an element’s visibility, the element still takes up visible space in the browser document. When you turn the display property off by giving it a none value (display=“none”), the space where the affected element lives collapses.

The other component to a DHTML menu is usually a JavaScript array containing all the menu items. For example, the JavaScript might contain a function for defining the menu’s parameters:

When using a prewritten menu you acquire from the Internet, you’ll generally want to look for a JavaScript array containing all the menu item parameters. In this case, the array would contain arguments for the previously defined function:

To edit the menu for your own purposes, you simply change the links in the array (shown in bold in the preceding code). Most menus are built using an array that’s at least somewhat similar to the preceding one. Note the correlation between the first argument in the item function (parent) and the actual values used in the array. When an item’s parent argument is true, instead of a link, the category of links is named and no actual link is generated. When the parent argument is false, a link is generated. Each menu you find on the Web might have a somewhat different implementation, but the general construction will be the same.

Finding collapsible menus on the Internet
As mentioned, you generally don’t need to write your own menu from scratch, because so many developers have made them freely available. Instead, you can download someone else’s menu and change the CSS and some of the other specifics, such as where the links go.

One common style used with vertical menus is a Windows Explorer-like menu tree. The scripts on this site contain detailed instructions on how to use the menus on your own site. You can enter “DHTML menus” into Google to find additional menus.