Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
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:

  1. Specify one table row/cell in a "navigation" HTML page.

  2. Create image files that display each of the possible menus (some images may contain identical options with different menu options highlighted.)

  3. Define image maps for each of the above image files, which assign specific links to each menu option.

  4. 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.

  • + Share This
  • 🔖 Save To Your Account