HTML Markup | JavaScript | Java | Home & Links

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

Tabbed Menus DropDown/PullOut/Slide Autoflagging Select List Misc Menus

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.

Dropdown/Pullout Menus

A popular menu technique is to have a single menubar with dropdown or pullout (aka push or slide) 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 items to be contained in an external file, written to the screen as needed and pointed at by all pages using the same menu.

Download and read the script [search for tutorial 14] and style for the dropdown menu used at this site. Check this page's html source for how to include the menu builder and its position 'zone'.

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.

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.

Miscellaneous Menus

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.



JR's HomePage | Comments [jstutore.htm:2016 01 11]