Implement a Pull-Down Menu

Ask the DHTML Pro 10-Minute Solutions

Implement a Pull-Down Menu
By Dori Smith

One of the most common uses of DHTML is to add flashy effects like flying images to Web pages. But that's not by any means the only thing you can do with it! You can also use DHTML make your site more useful and intuitive. For example, you can add a pull-down menu to your Web site. A good principle of user interface design is to use elements that your visitors may already be familiar with. In this case, they've seen pull-down menus in their operating system and applications, so they should already know how they work.

The pull-down menu code has two DIV statements in the BODY: one for a File menu, and one for a Search menu. Each DIV tag contains normal HTML links, but when the page is first loaded, you cannot see them because the top position of each DIV has been set to display starting at -90px—off the top of the window. This means that all you see is each menu's name. In order to see the contents of the menu, the code just resets the top position of that menu to display at -5px, pushing the contents down into the window.

There are two ways to pull the menus down. In browsers that support events in the DIV tag (such as IE), if you move the cursor over the menu, the mouseover event handler is triggered, which then calls the toggleMenu() function. In all browsers, if you click on the name of the menu, the toggleMenu() function is called.

The toggleMenu() function itself can be called in three ways. Calling it by clicking on "File" or "Search" causes it to toggle that menu: to move it up if it's down, and vice versa. However, when toggleMenu() is triggered by an event, you know which direction the menu should go. If it's caused by a mouseover, the menu should go down, but when it's caused by a mouseout, the menu should go up. For the latter two cases, you pass a second parameter: the position of where you want the top of the menu to be placed.

In all three cases, the toggleMenu() function is passed the name of the menu to toggle. The function starts by initializing a variable named menuObj. How this variable is set depends on the browser's Document Object Model (DOM). If document.all exists, you're using Internet Explorer, and you set the menu object by looking at document.all.element.style. If not, you just want to look at document.element.


menuObj = (document.all) ? eval("document.all." + currElem + ".style") : 
    eval("document." + currElem)

Secondly, you want to figure out where to place the top position of the menu. If the function was called with a second parameter (for example, using a mouseout or mouseover), it's been passed in as nextPos. But if there's only one argument, nextPos is set to the opposite of its current value.


if (toggleMenu.arguments.length == 1)
    nextPos = (parseInt(menuObj.top) == -5) ? -90 : -5

And finally, you use the DOM to set the top position of the DIV.


if (document.all)
    menuObj.pixelTop = nextPos
else
    menuObj.top = nextPos

You can set the links inside each menu to be whatever you want. You'll probably want to change them to be sections within your site. In particular, this UI widget would work well as a kiosk, where you disable all the menu items in the browser, and then use these menus to just add back the ones you want available.

Click here for sample code.

Other 10-Minute Solutions