Tutorial on Pull-Down Menus in JavaScript

JavaScript pull-down menus are a way to create graphically enhanced menus for user navigation in web pages. These menus have become a standard in HTML web-page programming, so many users recognize the functionality of the interface. When creating a JavaScript pull-down menu, it's only necessary to add a few lines of code in the application.

The Javascript

Creating JavaScript pull-down menus can be accomplished using a function embedded in the web page. The JavaScript function is then called by the element in the menu. Every time the user hovers over the menu, the JavaScript function is called and it opens a list of options for the user. Below is an example of a Javascript pull down menu function:

function pulldown(menu_element, position) {
menuObject = document.getElementById(menu_element).style;
newPosition= (parseInt(menuObj.top) == -10) ? -100 : -10
}

The first statement in the code is the name of the function. This is used in the HTML later in this tutorial. The first statement in the code is the menu element. Since several menu items are used in JavaScript navigation, this uses the element ID that is passed from the HTML element. The next line repositions the element to either close the pull-down menu or expand it.

Add the Javascript Function to the Menu

Menu items are created using div tag objects in HTML. A div tag that is used for a pull-down menu normally has text assigned to it to visually prompt the user to hover the mouse over the element. Once the mouse is hovered over the HTML div tag, the call is made to the JavaScript function to open the pull-down menu. The following is an example of a div tag element that calls the function created in section 1:

<DIV ID="main_menu" onMouseover="pulldown('main_menu', -10)" onMouseout="pulldown('main_menu',-100)">

This code calls the pull-down function when the mouse hovers over the div tag, but then it calls the function again when the mouse is moved away from the element. This gives the appearance of an opening and closing menu in a web page.

References

• Peachpit website