Inside Technique : Dynamic Flip Menus
By Scott Isaacs

When we redesigned InsideDHTML we had a few simple requirements for handling site navigation:

1. Quick access to a standard main menu
2. Minimal use of screen real-estate
3. Works consistently in all browsers

Achieving this goal was challenging. We wanted to include a menu on all pages to provide access to all sections of the site. We wanted this menu to have a consistent look and feel across all browsers. Prior to this latest update, we had a solution that worked, but failed to provide a consistent experience across different browsers. We had an extensive set of server side scripts that performed browser detection to serve the appropriate layout. This caused different browsers to receive different versions of the same page.

Our original plan was to display the main menu in the left column and provide menus specific to the page's context in the right column. This approach failed miserably in both asthetics and usability. The extra menus made many of our pages cluttered and therefore harder to navigate. At this point, we started heading down the same path of our original design - creating a smart "up-level" template and a simple down-level template.

The IE4 version of the template basically was a modified version of our original quick-jump drop-down menu (our old web-site had a link that dropped down a menu of choices). Our new approach swaps between the menu for the current page and the global menu by hiding and showing the appropriate contents. This design essentially creates a web-page with two states.

When we started work on the down-level template for non-IE4 browsers, we realized that by separating the two states into separate web-pages, we could provide the menu-flip effect in all browsers. Rather than create two physical pages, we authored a simple server-script that serves the same page with the appropriate menu for down-level browsers. For IE4, the page with both states is sent to the client using DHTML to switch between them.

Before we continue, try the menu to the left. If you click on "Main Menu", the menu contents will change to include the site's standard navigation menu. The remainder of the page's content is maintained. In IE4, this occurs instantly on the client. In all other browsers, when you click to switch menus, you are actually clicking on a link that re-requests the page from the server. We append a flag in the URL's query string to notify the server which menu should be served with the page.

Next we show you how we created the flip-menu.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.