GRC | Script-Free Pure-CSS Menu Demo

GRC's Script-Free Pure-CSS Menuing System

Our website has been steadily growing, and our lack of site-wide navigation has become an increasing problem. So before adding several significant new blocks of content to GRC I decided to stop and develop a site-wide menuing system. The "masthead menu" you see above is the result of nearly two months of research, development, and extensive testing by participants in GRC's active newsgroup community. It was inspired by the efforts of previous web designers (see acknowledgements section below) but it surpasses anything we found on the web in its robustness of operation.

The menuing system incorporates a number of features that may not be immediately apparent, but which were crucial for real use and which, at the time it was developed, made it unique on the Web:

No client-side scripting of any sort (Javascript) was used:
Nearly all web browser based menus depend upon running script code in the user's browser. But because running executable code provided in web pages by untrusted web servers is inherently dangerous, a growing number of security conscious users (currently about 10%) wisely disable their web browser's scripting features for all unknown sites and selectively enable scripting only for trusted sites that require scripting for important web services.

Therefore, our first requirement for GRC's menuing system was that it would operate without any dependence upon scripting and be immediately functional for all visitors without requiring security conscious users to lower their web defenses just to use our menuing.
Absolute browser and platform compatibility:
Our biggest challenge was getting this system to operate across all old, new, and pre-release browser makes, models, versions, families and platforms. It runs correctly on every browser we have found. This includes IE5.x, IE6, IE7's betas, all old and new Netscapes, Mozillas, Firefoxes (on PC and Linux platforms), Operas, Safari and many other Mac browsers.
Text scaling friendly:
The whole menu system scales carefully and deliberately as the browser's displayed text size, set by browser options, is changed. This was also somewhat challenging but it was an important feature of any robust solution.
Narrow window width handling:
We also wanted the system to function across a wide range of browser window widths. As you narrow the viewing width of this page, notice how the various layers of items slide together, and when the horizontal scroll-bar is finally forced to appear. By carefully controlling the drawing order we were able to handle, as gracefully as possible, instances where insufficient width was available.
Functional for non-CSS, or CSS-disabled, browsers:
Despite the fact that our menuing system is entirely dependent upon CSS (cascading style sheets) for formatting of its appearance, we wanted a solution that would still be useable by very old browsers that didn't understand CSS. If CSS is not available, this solution displays a standard hierarchical indented "unordered list" of site links.

Placed into the Public Domain:
All of this work has been placed into the Public Domain. We hope that it will be of use and benefit to anyone wishing to adapt this system for their own use.

GRC's final implementation uses two style sheets, one for GRC's pages and a second independent (and heavily commented) style sheet containing the menuing declarations: mainmenu.css style sheet to ease its understanding, use, and migration into other applications.

Acknowledgments and comments about previous work:
The very clever idea of using CSS to style standard unordered HTML lists into dynamic menus using the CSS :hover property to change their appearance was not ours. But many examples of this cleverness that we found online ("CSS-only Drop-down Menus", "Expanding menus in pure CSS", "CSS menus") failed to function under IEv6 (still, by far, the most popular web browser on the Net) or with other popular browsers such as Firefox. The authors of these demos realize the limitations of their demos, saying things such as, on this page: "It does not work in IE (IE's CSS sucks, so this is nothing new)". While it might be that IEv6 is quite "CSS challenged", bashing IE didn't help us since it's used by 85% of all web surfers and approximately 54% of GRC's visitors. We needed a truly universal solution.

But inspired by these many demos, after nearly two months of development we arrived at the final result, which is running the menu at the top of this page. We do wish to acknowledge several closely related efforts that provided substantial guidance and encouragement along the way:

This page has been viewed 424,461 times and currently 25 times per day.