CSS Fly-out Menu

Introduction

This page demonstrates how a fly-out menu can be constructed by using pure CSS techniques. The menu should work on most standards-compliant browsers. Naturally, Internet Explorer 6 (IE6) likes to screw things up, so I used a little helper [1] to get the menu functioning as it should. There are various other pure CSS menu tricks on the web [2, 3, 4 and 5], although some implementations don't work well in IE6 without relying on messy HTML hacks [3]. I tried to avoid that as much as possible.

In addition to creating the menu, I also played around with PNG transparencies to get some nifty drop-shadow effects happening in the banner, footer and in some of the menu icons. I might have gotten a little carried away with the green though. Of course, the colour scheme can be easily changed by editing the CSS files, and/or by replacing the background graphics. I already contemplated on making a demo that supports changeable themes.

Summary on How the Menu Works

The fly-out menu is structured entirely out of unordered lists. Submenus are basically lists nested within a parent list. To give you an idea how a typical menu is structured, I have taken the CSS Menu Demo section from the main menu and reproduced it with the styling absent:

• CSS Menu Demo
• Nested Menus
  • Top-down Menus:
  • Of Mice
    • Speedy Gonzales
    • Jerry
    • Stuart Little
    • Itchy
  • Of Cats
    • Garfield
    • Tom
    • Sylvester
    • Scratchy
  • Of Dogs
    • Dogmatix
    • Chester
    • Odi
    • Gromit
  • Bottom-up Menus:
  • Of Birds
    • Tweety
    • Road Runner
    • Penguin
  • Of Machines
    • Bender
    • Terminator
    • Motoko
• Menu Headings
  • Large Heading
  • Item 00
  • Item 01
  • Medium Heading
  • Item 02
  • Item 03
  • Small Heading
  • Item 04
  • Item 05
• Dividers
  • Item 00
  • Item 01
  • Item 02
  • Item 03

As you can see, without styling the entire menu falls back to a bunch of plain, boring unordered lists. The nested lists are highlighted by the green dashed boxes. When the appropriate styling is applied, these nested lists (or more precisely the submenus) become hidden by default. They are only revealed when the mouse cursor hovers over a list item in the parent menu. The revealed submenus are displayed as floating elements, which are offset by the parent menu's width.

The tricky part was to get the hover effect working on all browsers. In Firefox, this was not a problem. Unfortunately, IE6 only supports :hover pseudo classes specifically with anchor tags. Therefore, to get IE6 behave as intended, I was forced to use a hack known as Whatever:hover [1]. This hack works quite well, except it makes the menu's response a little bit sluggish - this may be caused by a background image caching issue present in IE6.

Other Unrelated Design Issues

I also wanted to make this page to have a two-column layout, with a banner (i.e.. header) and a footer. Getting this layout to work in pure CSS turned out to be a bigger challenge than I anticipated. I spent more time trying to get the page layout to work compared to the time I spent making the menu! Eventually, I gave up and I cheated by using tables. (An acquaintance of mine regarded this decision as blasphemy...)

There are some really cool CSS layout demos on the web [6 and 7], but none of them seemed to work well for my application. The first problem was getting the CSS layouts to work consistently on Firefox and IE6 browsers. The second problem was to make the layout fit the client window 100% vertically and horizontally. Third, there were issues with elements overlapping other regions of the layout, such as the footer or neighbouring columns. This was further complicated by the fact that I wanted to make the layout dynamic enough to accommodate almost any display resolution.

Most the of the demos [6] I came across used percentages to set the column width. Such methods are fine, provided you don't use fixed widths on any of the columns. My implementation uses a fixed menu width, and the content block has to "best fit" remaining client space horizontally. There are excellent samples out there that can do this [8], but they do not extend the columns all the way vertically to the footer block. The amount of CSS code required to get these effects working without tables was not worth the effort. Perhaps one day I will revisit this problem and do something about it.

References

[1] P. Nederlof, Whatever:hover, 2006.

[2] P. Griffiths, D. Webb, Suckerfish Dropdowns, www.alistapart.com, 2003.

[3] S. Nicholls, CSSplay - CSS Only Menus, cssplay.co.uk, 2006.

[4] H. Bergevin, J. Gallant, All-CSS Flyout Nav, positioniseverything.net, 2005.

[5] H. Bergevin, J. Gallant, Deluxe CSS Dropdowns and Flyouts, positioniseverything.net, 2005.

[6] E. Costello, CSS Layout Techniques: for Fun and Profit, www.glish.com, 2004(?).

[7] E. Costello, Introduction to CSS Layout, www.oreillynet.com, 2002.

[8] R. Chandanais, The Layout Reservoir, bluerobot.com, 2002.

Boring Copyright Stuff

The menu specific CSS code and graphics is Copyright © 2006, Dominik Deak. You are welcome to use and modify this code in non-commercial projects only. :)