dHTML Drop Down Menu Tutorial - Part 3

How the System Will Work

The code for the menus will be perform two main tasks:

1. Building the menus

To make the menus easy to build and maintain, we'll build a set of functions that will create the html for the menus for us. Not only does this make building the menus simpler, these configuration files will used throughout your site - just change one file and the changes will effect every page.

There will be functions to build the menu bars and the menus themselves. The menu bars are just tables containing links that activate the menus, the actual menus are tables wrapped in a <div> element that can be displayed, hidden and moved around the page.

2. Operating the menus

These functions will show and position the menus when the user activates them and hide them again when necessary.

The positioning of the menus is based on the position of the label they are attached to. We'll use functions from the JavaScript API to get the page co-ordinates of the label, and then to position the menu relative to it.

Terminology Used in the Tutorial

In the tutorial I'll be using terms like "menus", "submenus", "menu labels", "submenu labels" and "menu items".

The figure on the right should help to explain what I mean by these terms. It shows a menu bar along the top of a page with a menu dropping down from it. Hanging off this menu is a submenu.

Menus drop down from the menu bar, Submenus hang from other menus.

We need different names for them in the tutorial because the rules for positioning them are different.

Menus and submenus are made up of Menu Items. Menu items which spawn submenus are referred to as Submenu Labels.