Tutorial 14 - Menu Systems
Clean navigation schemes are essential for successful website viewing and user comfort. A variety of menuing techniques are being used depending on application complexity. Simple links can be dressed up as tabs using style. Dropdown, pullout, and floatout menus save real estate by opening only when hotzones are hovered. Collapsing tree menus open/close with keyclicks to show submenus. Working examples of several types of menus are included in this tutorial. Dynamic menu creation, useful for maintenance on larger sites, is also explained and demonstrated.
Tabbed Menus and Forms
One simple yet attractive approach for menus resembles the tabs used on filing systems or sometimes on textbooks by hyper-organized students. This type of menu can be created quite easily with a one dimensional table and CSS styling. When the table is drawn in a vertical fashion it is usually styled as a button menu. Button and tab menus are the same from a structural view and only styling makes them different.
A quantum improvement for installation and maintenance of the menu can be achieved by dynamically creating the menu using external .js files. TabMenu.zip is a quick example that can be cut and pasted into your project. It has external .css and .js files plus three demo documents. It requires a div dedicated to holding the text written by the script file itself (see the working example). One feature to look at is how captions and links are isolated to variables instead of hard coding into the menu writing function. Be sure to read the included readme.txt file!
The tabbing system can also be applied to a long form to avoid scrolling. In the TabForm example included in the above zipped file, a separate division is used for each page's elements. The tabbing system then modifies the display property appropriately. Submission sends all data including currently undisplayed info.
Autoflagged Menu Items
Many menu systems indicate the current page by changing the text or background color or image. This is normally done by manually altering the page in some way. But that technique causes problems for those who have automated the menu provision process thru an include utility or by using an external script to write the menus dynamically.
The solution turns out to be quite easy with JavaScript. First identify the page name and then use it to modify a specific id tag. The id tags could be on each cell of a navigation table or on each hotlink. The style object is accessed through DOM and modified as needed. The small fragment of code follows:
id=document.location; re=/\w+\./i; rf=/\w+/i id=re.exec(id); id=rf.exec(id)+""; styleObj=document.getElementById(id).style; styleObj.background="#ffdead";
Caution: This code must be executed as a function called by the onload action. Otherwise the objects to be modified do not yet exist. Here is a very rudimentary example. The previous tabbed menu demos autoflagging in a more polished way.
Select List Menus
A very simple dropdown menu can be built from a select list control, a button and an onclick event. Adding an ondblclick event to the list control improves usability. You could eliminate the button by using the onchange event. The list can be displayed opened by setting the size attribute.
|
|
|---|
The key to this example is the action contained in the onclick event. It takes the option highlighted in the select form and feeds its value to window.location.href for the jump. window.location is an object that refers to the location (ie current web address) of the first document. href is a property that is the complete url within an object.
Note: The default selection (which is really a prompt) uses a JavaScript command to display a message rather than moving to a new document.
Dropdown/Pullout Menus
Another popular menu technique is to have a single menubar with dropdown or pullout submenu item selections as displayed at the top of this document. This minimizes real estate and yet allows accessibility for more complex sites. Hovering or rolling over a menu item exposes the submenu. CSS style display properties and JavaScript mouse events make this all work.
A good approach for maintaining a larger site is to construct the menus dynamically. This involves more complex scripting but allows the menu itself to be contained in an external file, written to the screen as needed and pointed at by all pages using the same menu.
- DropMenu is a simple approach that uses nested divisions and lists in the body of your document that have the appropriate links. The script either shows or hides elements depending on the hover event and cursor position. This is easy to understand and program but the tradeoff is that a large amount of menu code must normally be inserted into each document. DropMenu now includes dynamic content routines for building/maintaining menus.
Float Out Menus
Float out menus move out from an edge of a screen when a pulltab is either hovered or clicked on. This type of menu really saves on window real estate. It is best used with a single level of menu content.
- FloatMenu is an extension of the ideas used to implement DropMenu. Hovering on the pulltab on the left edge rolls out (aka floats) a menu to select from. It is very unobtrusive, consuming no real estate until the user calls for it.
- RightFloatMenu has the menu tab sitting at the right edge. Hovering the tab rolls out (aka floats) the menu. The floating menu system is very unobtrusive, consuming no real estate until a user requests the menu.
Collapsing Tree Menus
Collapsing Tree menus are similar in appearance to folder/subfolder trees in Windows. They allow organization of a large number of pages at multiple levels with much less clutter than a linear list. But some readers find them a bit too techie! Know your clients !!!
- OpenCube offers a complete solution including a menu builder and easy customization.
- Collapsing elements shows how collapsing menus work with elementary CSS visibility rules.
Two Dimensional Menus
Some commercial websites can benefit from a two dimensional menu with for example both a selection by product type and by distribution area. My 2Dmenu.zip [12k] demo shows how you can easily split page selection into several folders for clarity.