Description
My web site uses basic dropdown menus. They are based on the
Netscape
DevEdge DHTML
menus, plus some hints from More Eric
Meyer on CSS.
This type of menu is also known as a "pure
CSS" menu. I use it because
they're simple, lightweight, and can even work if JavaScript is disabled
(up-to-date browsers only, such as Opera and Mozilla/Firefox).
I'm also using a five-year-old CSS
technique called "generated content". If you're using an up-to-date
browser such as Opera or
Mozilla/Firefox you'll have no problems.
If you're using an out-of-date browser such as
Internet Explorer (which is
now more than two years old) the menu items will be missing separating
characters (">" and ":"). I would strongly encourage you
to upgrade to Opera or
Mozilla/Firefox.
Note that the generated content issue concerns my site styles only.
Other Menus
If you're interested in Windows Explorer-like collapsible trees, you might
want to have a look at my Explorer Tree page.
There are some other menus systems around. The list below is a small
selection. All of them have good cross-browser support.
- Suckerfish
Dropdowns - From A List Apart.
These are dropdown menus with really simple markup and very little
Javascript. Highly recommended. Free.
- Sons of Suckerfish
- A series of articles at
HTML
Dog describing further development of the above Suckerfish menus -
primarily leaner Javascript and support of multiple level dropdowns. Free.
(Editorial: I disagree with their comparison of Javascript vs
HTC
implementation of :hover support. The HTC can be placed in IE conditional
comments to keep things valid. The HTC is general purpose and can be used
for more than just the menus - highlighting table rows, for example. I use
it to hide my validation icons (see the bottom right of this page). As for
not working in IE 5.0 - it works for me! (IE 5.00.2920.0000, Win2k))
- Hierarchical dynamic
menu with CSS
- Cross-Browser -
DHTML
libraries. Menus are just one of their things! Everything is free
(GPL licensed).
- Ultimate Dropdown Menu
(UDM) also known as Accessible Web Site
Menu - Cross-browser, free (link back) for non-commercial use. Claimed
to conform to W3C
XHTML 1.0 and
WAI
AAA WCAG 1.0.
- Brainjar Menus -
Free.
- Coolmenus -
Free.
- Tigra Menu -
Free.
- Milonic menus - Note that these are
notorious for being browser version dependant and you will want to keep up
to date with new releases! Free to non-profit users.
- SmartMenus - Free for non-commercial
use.
- Menu and PopMenu - Free
for non-commercial use. Also known as
HV
Menu.
- Likno - Commercial.
- HierMenus -
Commercial.
- Xara Menu Maker -
Commercial.
- OpenCube - Commercial. I've
discovered that OpenCube tend to use hidden and undocumented browser
functions. That makes their scripts potentially troublesome. However, they
did respond in less than a day with a fix to a problem I reported! Worth
evaluating.
- Sothink DHTMLMenu -
Commercial.
- Xtreeme DHTML Menu Builder -
Commercial.
- xFX DHTML Menu
Builder - Commercial.
- Visual Menu -
Commercial.
- HotScripts
- Collection of various menu scripts
- Swap
Class Menu - Project Seven appears to have a few menu systems, mostly
commercial. They appear to be designed for Dreamweaver users. The menu
system on the linked page seems to be free.
Hallvord Steen is maintaining a
list of various menu
systems. More importantly, he's created a bookmarklet which attempts to
identify what menu system a page is using!
Not menus, the following techniques allow Internet Explorer to apply :hover
styles to any element (not just <a>s). This is very important for
"pure CSS" menus to work
unchanged on Internet Explorer.