- Introduction
- The Concept: "Sliding" Menu Table in a Navigation Frame
- The DHTML in the Nav Menu
- The JavaScript "Slides" a New Menu into the Top Table Row
- Final Thoughts: Opportunities for Improvement
- References
- Conclusion
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The Concept: "Sliding" Menu Table in a Navigation Frame
One HTML File, Multiple Images/Image Maps
The metaphor I like to think of for this solution is the View-Master toy of my youth. Each click of the handle on the stereo viewer would slide a new picture into view. In this case, the click of a link seemingly slides a new menu image, with its associated image map, into a narrow "navigation" frame at the top of the page, replacing the previous image/image map combination.
NOTE
An image map is an HTML element with attributes that associate specific hyperlinks to a predefined pixel space within an image. FrontPage 2000 provides a GUI and wizard-like approach to "drawing" the boundaries of an image map and assigning a URL to the area as a hyperlink, all without getting your hands dirty in the actual HTML code.
Menu Option Drives Content, Content Drives Menu
In operation, clicking a menu option does what you would expect. It loads a new page into the main content frame of the page. The <Body> tag of the new page has an OnLoad attribute that invokes a JavaScript function with a particular argument. The argument communicates to the function which new menu image/image map should be loaded into the navigation frame at top.
Four-Step Process
There are four general steps to completing the menu system:
Specify one table row/cell in a "navigation" HTML page.
Create image files that display each of the possible menus (some images may contain identical options with different menu options highlighted.)
Define image maps for each of the above image files, which assign specific links to each menu option.
Create a JavaScript function to "slide" the appropriate image file with its associated image map into place in the navigation row/cell from step 1 above.
The following paragraphs describe steps 1, 3, and 4 in more detail. The image files in step 3 are left to the creativity of the art department.