Fly-out Menu v2 - Dominik Deak

CSS Fly-out Menu v2

Introduction

My previous CSS fly-out menu had a number of limitations which made the page design a little problematic. For example, the original menu had fixed width, which forced the two-column layout to rely on XHTML table markup. However, using table markup defeated the principle of separating content from the layout. The improved CSS menu system in this demo removes the aforementioned constraints and allows fully customisable page layout, as demonstrated by the changeable theme system.

Improved Menu

The current menu system's width is no longer defined in pixels, instead it is given a percentage value. Using percentages for the width has two major advantages. First, a width in percent keeps the menu size proportionally the same for any client display resolution; second, it also simplifies the CSS page layout design by a great deal.

Unfortunately, having a display-independent width for the menu introduces a new problem where menu items begin to wrap if the display resolution is too low. Wrapping occurs because the menu items have a fixed size in pixels. Therefore, they do not scale proportionally like the menu width does, and potentially creates a situation where menu items don't fit when the display resolution becomes too low. Therefore, one must be conscious of these problems when defining new menu items.

Another change I made to the menu is the way it displays icons. The old implementation had each menu item assigned with an independent icon image. This worked quite well; however, it required multiple HTTP requests to load the icons. Furthermore, most browsers would not load the hidden submenu icons until the submenu itself was revealed, causing a delay for the icons to appear.

Icons In the current menu, the individual icons are part of a single icon-set image, as illustrated on the left. The advantage of this method is that a single HTTP request is required to load the entire icon-set. This essentially preloads all the icons, thus eliminating the aforementioned delayed rendering issue for sub menus. Finally, having a single icon-set image makes batch icon management a lot easier.

The downside with icon-sets is that additional markup is required in the menu list. This is needed to define the individual icon blocks next to each list item. Also, one must specify CSS background image coordinates for every unique icon in the set - a process which is not exactly human friendly.

Page Layout

The previous menu system had a fixed width in pixels, which floated on the left. This created an empty column space on the right, whose width was unknown. Filling that empty space with a content block was difficult, because there was no direct way for specifying a "best-fit" width in CSS. Therefore, a convenient way to resolve this issue was to use tables in the markup to create a two-column page layout.

Using tables for the purpose of layouts defeats the whole idea behind separating content from design. This also removes the flexibility of changing the page appearance to something different other than the standard two-column layout.

The current design has the table markup completely stripped and replaced by <div> elements, which can be floated and positioned via. CSS techniques [2]. Since the improved menu has its width defined in percentages, filling the remaining space to create the content column is more straightforward.

Menu Themes

The real flexibility behind CSS is its ability to change the page appearance with ease. This is accomplished by swapping style sheets. For example, this demo has multiple menu themes defined in independent CSS files. The pull-down menu (situated near the content menu) allows the user to select any one of the available themes at will. This action invokes a third-party JavaScript code [1], which activates the relevant CSS files associated with the selected theme. The remaining CSS files will become inactive.

The JavaScript code also saves the current theme settings to a cookie file, which restores the page appearance to the desired theme every time the user visits the site.

All themes in this demo were designed to be dynamic enough to accommodate most display resolutions, from 800x600 pixels and up.

References

[1] P. Sowden, Alternative Style: Working With Alternate Style Sheets, www.alistapart.com, 2001.