DropMenu Tutorial
This tutorial explains how to obtain an effective dropdown menu system using HTML lists, CSS style and JavaScript. It uses CSS2 element display and visibility properties, DOM level 1 access methods and dynamic content menu building. DropMenu.zip contains a demo using the first three sample modules as well as a sidebar variant.
The JavaScript Code
The dropMenu script code simply shows or hides the relevant menu/submenu to provide dropdowns and pullouts. The script adapts to various window widths but resizing can be problematic.
mainWidth and subWidth are set to the maximum widths of captions for the main and submenus. barHPos ['left', 'center', 'right', '##'] and barVPos ['top', 'middle', 'bottom', '##'] positions the main menubar. subPosn ['left', 'center', 'right', '##'] positions the dropped submenus. '##' represents a specific pixel count.
The following code module should be placed in an external file. A script element must be placed in the HTML document's head section to insure that the JavaScript functions can be accessed.
Note: An alternative menu can be included for browsers who do not use script or have it turned off!. Use an element with an id of jsmsg.
CSS Style Module
The following CSS module for HTML list menus can be placed in a separate stylesheet (preferred - see dynamic) or included in a style element at the top of each HTML page. The style element or link must be placed in the HTML document's head section to insure that the style rules are declared before the program starts.
The zone class is for the container div element where the menu structure and content data will be written. The menu can be frozen on-screen using the css position:fixed property. The cl1 class is for the main menu bar properties and the cl2 class is for the dropdown/pullout menu properties. Notice that the dropdown item width can be set independently from the main menu item width. For example, the main items can be images much smaller than the dropped menu items.
Caution #1: Make sure that there is no conflict in class names (cl1, cl2, etc) with other style rules.
Caution #2: Check that your settings for the base div, ul, li and a elements do not set properties not set in the cl1 class properties. These can cause some unanticipated effects and are the most problematic area in getting the menu to 'look right'.
Note: The example sets all menu links to no underlining but hovering an item will change its background color.
HTML List Menus
Static HTML list menus are placed on each HTML page. This is not a problem for a few pages but if you have many pages with the same menu you can use dynamic html to build the menu. Use the following static menu example as a starting point for experimenting with menu structures and tuning the styling. Alter the contents to fit your own site.
The enclosing <div class="zone" id="zone"> is the container element used for centering and styling purposes. The outside <ul class="cl1" id="cl1"> is the main menu bar. It is a horizontal list of 'x' dropdown menus. Be sure to include the attribute onload="menuInit();" in the body element. A tipoff that you forgot is a non-aligned menubar.
Note: Use the noscript element to provide any required navigation for browsers that do not use scripting.
Adding Pullout Menus
Pullout menus can be added to the submenus by using nested lists at the appropriate submenu caption. This site uses four levels of menuing but there really is no limit except that you may confuse the user. You may also want to try a collapsing tree style for four or more levels.
Here is a style rules sample for up to four levels of dropdown/pullout menus for a HTML list system. Each menu level can be tweaked after the generic settings for all levels. The margin-left property can be adjusted to reduce pullout menu overlaps. Any additional levels will require more class rules.
As a demo of how easy it is to write pullouts, start with the above html menu and replace...
with the following...
Note: The onmouseover/out actions are the same as for the list item that the pullout is attached to. This allows the original menu to stay on screen even when the cursor is moved onto the new menu. Make sure that both menus overlap or you may lose the first menu.
Dynamically Built Dropdown Menus
Instead of including the menu structure on each page, you can write the menu dynamically from an external .js file. This allows a single source for easy menu updating and maintenance. It also saves document space and uploading time. Be sure to include a noscript element to provide any required navigation for non-scripted browsers.
Warning: Since dynamically written links can't be spotted by search engine spiders, be sure to have either an alternative menu or a sitemap page that is linked from your home page.
The easiest way of building a dynamic dropdown system is to cut and paste from the menu system used on this site. Fetch and save zemenu.js and zestyle.css. Rework the menus to suit your site and then point at the files from each document that uses the menu (eg. home.htm). Check your changes with jsLint!
However if you already have a working dropdown menu list, you can convert it to a dynamically built list by following the following steps:
- Start a new file (eg. menu.js)
- Initialize a string variable to hold the menu (eg. var copy=' ';).
- Cut the HTML menu between the zone div tags (but leave the zone div) and paste it to menu.js.
- Add copy=copy+' to the start of each line of the menu.
- Add '; to the end of each line of the menu. Note: Each line of the menu has a single quote at each end!
- Scan each menu string and if it already has a single quote in it, precede that character with an escaper backslash (ie. \).
- Scan each menu string and precede any forward slash (ie. /) with an escaper backslash (ie. \).
- After all the menu lines have been added to the copy string, write it to the zone div (eg. document.getElementById('zone').innerHTML=copy;).
- Wrap these lines inside a function called menuWrite().
- Insert this file/function after the last line of menuInit().
- Insert a call to menuWrite() at start of menuInit().
- Revalidate the script with jsLint
- Move the script to its own file (eg. menu.js) and link it to each page that needs the menu.
For those who do not wish to use dynamic html but have too many pages for brute force cut/paste methods there is a third alternative. The include utility lets you set up a separate file for the menu and then insert it into each page before upload. This makes menu maintenance easier but adds bulk to your pages.
Vertical Sidebar Menu With Pullouts
Vertical sidebar menus with pullouts can be created using the same HTML menu structure as above. Only CSS style changes are required. This illustrates why there is now a great emphasis on structure/style separation in modern html.
Normally sidebar and content are separated into their own div blocks to allow positioning and styling effects.
To change a menu list from horizontal to vertical just alter the float property from left to none. You will also have to adjust left margins on all classes for the pullouts. You may want to change the JavaScript variables barVPos and barHPos for correct menu positioning.
If the menu is a simple single level one, consider using the jsfloat technique which saves real estate for page content.