Dropdown menus using CSS and/or Javascript

Date: Wed Jan 02 2008
A 'menu' is a website navigation paradigm drawn from normal desktop applications. One moves their mouse over an element, does something, and more choices drop down so that the user can have a broad range of choices of action. Menus collect related choices together so that you have a branching effect from general choices to specific choices.

A menu has an advantage over a simple list of links in that you can give the same list of choices more compactly (using less space on the screen). Implementing menus can be done with .. Java ... Javascript ... or CSS.

It's useful to consider the capabilities of the various web browsers. Not every browser properly renders the techniques given in these pages. As browsers improve compatibility, the techniques will work in all generally available browsers. However so long as the old browsers are still in use, this means web developers have to test on various browsers. Some of these techniques degrade properly in older browsers such that the user doesn't see a dropdown menu but still sees the whole of the navigation structure.

It's useful to make sure the site remains accessible. Not everybody can see or hear as well as you do, and there are legal requirements in many places that websites must be accessible. Accessibility means that the site offers extra information snippets so that people with disabilities can use special equipment or software to aid them to navigating the web site.

Killer CSS Navigation: Everything You Need to Design Sweet CSS Menus: A compendium of CSS based navigation tutorials and methods.

The ULTIMATE CSS only drop-down menu is the final iteration in one guys quest to have CSS-only menus for all web browsers. CSSplay overall is a huge resource site of tips and tricks to using CSS.

CSS Horizontal Drop Down and Pop Out Menu using Peterned's csshover.htc is a tutorial on creating a "horizontal" menu using pure CSS. Horizontal means the labels of the menu are in a horizontal line, and the menu panes drop down below. The same site has other tutorials such as a vertical CSS menu.

DD Tab Menu (5 styles) is several forms of horizontal menus developed using CSS and definition list elements. On Menu and Navigation they have several other tutorials and the site is chock full of other ideas. Chrome CSS Drop Down Menu (v2.01)

CSS+Javascript power. Fancy menu is a discussion of creating a fancy menu using CSS and Javascript together. There's a point here worth considering -- accessibility is not just a good idea, it's the law. Whatever technique one uses should remain accessible.

CSS menus is a detailed tutorial taking you step-by-step through designing a CSS menu.

Hoverbox Menu is a detailed tutorial taking you step-by-step through designing a CSS menu (of sorts). The results they show are hideous, but the code they use is key. It's not quite a menu, however, because there are not dropdowns.

CSS Menu Maker is a set of predesigned pure CSS menu modules you can download and customize for your needs.

CSS Express Drop-Down Menus is an almost-pure CSS menu system. Most of the pure-CSS menu methods use the :hover tag to implement the mouseover dropdown behavior, but this tag is not supported on all browsers. Hence there's a need for some other techniques such as a small bit of javascript to workaround the missing :hover behavior.

Dropdown low down is a listing of several CSS menu implementations, as well as a discussion of pro's and con's of each.

Advanced CSS Menu is a methodology for a very fancy looking design oriented for constructing a CSS menu.

Pure CSS Drop-down Menu Has a method which works across "all" browsers and which does not rely on javascript, only CSS. However the HTML code is more than strange and relies on the typical IE HTML hacks ("<!--[if IE 7]>" and "<!--[if lte IE 6]>").