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:

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.

Although GRC's final implementation will use several interdependent style sheets, this page uses the single independent cssmenu.css style sheet to ease its understanding and migration to 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 367,251 times and currently 40 times per day.

Jump to top of page
Gibson Research Corporation is owned and operated by Steve Gibson.  The contents
of this page are Copyright (c) 2016 Gibson Research Corporation. SpinRite, ShieldsUP,
NanoProbe, and any other indicated trademarks are registered trademarks of Gibson
Research Corporation, Laguna Hills, CA, USA. GRC's web and customer privacy policy.
Jump to top of page

Last Edit: Feb 23, 2008 at 08:53 (3,206.81 days ago)Viewed 40 times per day