Tutorial 10 - Menuing SystemsTutorial 9 - Cookies - Tutorial 11 - Form Validation Clean navigation schemes are essential for successful website viewing and user comfort. A variety of menuing techniques have been used depending on application complexity. Simple links can be dressed up as tabs using style. Dropdown, pullout, floatout and popup menus save real estate by opening when hotzones are hovered. Collapsing tree menus open/close with keyclicks to show submenus. Working examples are included in this tutorial to aid in rapid inclusion on websites. The technique of dynamic menu creation is also explained and demonstrated as it is important for installation and maintenance on larger sites. Autoflagged Menu ItemsMany 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 unload action. Otherwise the objects to be modified do not yet exist. Here is a very rudimentary example. The tabbed menu system that follows shows autoflagging in a more polished way. Tabbed MenusOne simple menu yet attractive approach 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 JavaScript 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 hardcoding into the menu writing function. Be sure to read the included readme.txt file! Select List MenusA very simple dropdown menu can be built from a select list control and an onclick event. By setting the size attribute the list can be displayed open if desired. 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 top.location.href for the jump. top.location is an object that refers to the location (ie current web address) of the first document layer. 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 MenusAnother popular menu technique is to have a single menubar with dropdown item selections as in my main menu [see top of screen]. This minimizes real estate and yet allows accessibility to more complex sites. One simple approach for constructing dropdown menus is to build static divisions, lists or tables in the body of your document that have the appropriate links. Your script either shows or hides elements depending on the hover event and cursor position. This is very simple to understand and program but the tradeoff is that a substantial amount of 'table' code must be inserted into each document.
A better approach is to construct the menus dynamically. This involves more complex script but allows the menu itself to be contained in an external file, written to the screen as needed. This is a much better approach for maintenance of a larger site. Collapsing Tree MenusCollapsing Tree menus are similar in appearance to folder/subfolder trees in Windows. They allow organization of a large number of pages with much less clutter than a linear list. But some find them too techie! Know your clients !!!
Popup Box MenusHover a hotzone and a popup box can allow a set of links to be displayed. Hover a link and a tooltip like information box can be provided. |