We have talked about the HTML elements and the CSS for a common browser menu. It is now time to start talking about the script. There are four JavaScript functions that control the horizontal menu and its sub menus. In this part of the series, I give you the name of the functions and their roles. I also start discussing the details of one of the functions. Later on, I give you the complete code.
Scripting a Common Browser Menu - The Skeleton of the dropDownMenu() Function (Page 2 of 4 )
The skeleton of the dropDownMenu() function is as follows:
function dropDownMenu(ID)
{
//Make sure the sub menu of not removed when clicked
for (i=0; i<5; i++)
{
for (j=0; j<5; j++)
{
//remove any sub menu that was displayed.
}
}
for (i=0; i<5; i++)
{
if (document.getElementById(spanID)) //if it exist
{
//display the SPAN elements for the sub menu
}
}
}
Code Segments of the dropDownMenu(ID) Function
There are basically three code segments that comprise the dropDownMenu(ID) function.
The First Code Segment
When any sub menu is displayed, the user has the right to click on the sub menu. Whenever the user clicks on an element (sub menu) on a web page, the BODY element also receives a click indirectly. As we said above, when you click the BODY element, any sub menu displayed should be removed. We do not want the sub menu to be removed when you click on it. This first segment sets a variable, which is used for this purpose (prevention); see the details later.
HTML 
More Top jQuery Plugins for Menus
