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 slideout menus save real estate by opening only when hotzones are hovered. Collapsing tree menus open/close with keyclicks to show submenus. Dynamic menu creation, useful for menu maintenance on larger sites, is also explained and demonstrated. Working examples of several types of menus are included in this tutorial.
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.
OpenCube offers a complete solution including a menu builder and easy customization.
Menus can be made to move out from an edge of a screen when a grabtab is either hovered or clicked on. Push menus displace the text while slide menus overlay. This type of menu really saves on window real estate. It is best used with a single level of menu content.
- SlideMenu is an extension of the ideas used to implement DropMenu. Hovering on the grabtab on the left edge rolls out (aka slides) a menu to select from. It is very unobtrusive, consuming no real estate until the user calls for it.
- RightSlideMenu has the menu tab sitting at the right edge. Hovering the tab rolls out (aka slides) the menu. The floating menu system is very unobtrusive, consuming no real estate until a user requests the menu.
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.
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.
Float menus remain in one place (or float) as the page content is scrolled. They are easy to construct with the CSS style rule position:fixed. An example is float.
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 !!!
Collapsing elements shows how collapsing menus work with elementary CSS visibility rules.
Two dimensional menus can benefit some commercial websites. For example both a selection by product type and by distribution area can be readily accessed. My 2Dmenu.zip [12k] demo shows how to split page selection into several folders for clarity.