CSS / DHTML Hybrid Navigation Bar
Inspired by Eric Meyer's pure CSS menus and the recently re-vamped DevEdge, I created this hybrid of CSS and DHTML, based on a simple unordered-list. Since the core data is HTML, it degrades all the way back to white text on a black background.
It's coded to work up to six levels deep, but this can easily be extended, with just two lines of CSS per additional level. The whole thing, including the list itself, weighs in at less than 10K!
Please note this menu is of an experimental, and not entirely stable, nature; I later acheived much better results by abandoning behaviors and using minimal OO JavaScript instead.
For Mozilla 1.0 RC2 or later, Opera 7 and Safari the menus work with pure CSS. This family of support includes third-party browsers such as Netscape 7, Chimera and Phoenix.
For Windows Internet Explorer 5 or later, which doesn't support :hover
on list-items, it uses a
DHTML behaviour
attached to the same element. The scripting is very minimal - a rollover and display toggle
which cascades through the structure
from a single attachment. I've used a
conditional-comment
to apply a browser-specific stylesheet, both
for this, and a few hacks to make it look right and work properly.
One of these is a white background on the menu list containers,
to stop events passing through them
(! which was causing them to close prematurely).
However there's also too much whitespace around the list-items,
which I haven't been able to hack away completely,
and so a white margin is visible on the menus when they're over something.
This can be solved by using a transparent gif as a background-image
(which I haven't done here because it exposes another, entirely different bug
in IE - the image is reloaded each time a menu appears). Unfortunately,
simply setting the background color to be explicitly transparent
does *not* solve the problem.
In Konqueror 3 the main rollovers work, but the menus
don't. This is strange - the rollovers prove that fundamental
support for li:hover is there, but the menus don't appear.
However the build I have (3.0.3-13) is an older version of the KHTML engine, and the
fact that it works in Safari leads me to conclude it's proabably also
okay with KDE 3.1.
Konqueror 2.2 behaves the same way - rollovers but no menus.
Earlier gecko builds, Opera 5 and 6, Internet Explorer 5 for Mac and Espial Escape see the main navigation bar, correctly positioned and styled, but with no rollovers or menus.
Opera 4 is almost as good, but the items have no background-color.
OmniWeb looks terrible - although the menus are coloured correctly and make the right basic shape,
they're all visible at once, and scattered across
the top of the page, suggesting that the li:hover style is being applied by default.
There is a CSS hack for OmniWeb
which can stop it reading chunks of CSS; but I haven't applied it here.
Netscape 4 and Internet Explorer 4 see an unstyled list of links
(but could be given simple styling); in Explorer 4
the two-column structure (using float) is preserved, but in Netscape 4 it isn't -
the list starts underneath the main content.
iCab is the same, but it takes on some of the navbar styles - the width, colour, font, background and no-bullet.
In all these cases only the main list is displayed, the nested levels are not;
this can be changed by removing the rule from the basic stylesheet:
/* hide nested list items for
browsers which support it */
ul.navmeister ul { display:none; }
Netscape 3, Opera 3, Mosaic, Lynx and presumably all non-CSS browsers get the whole list expanded - starting underneath the main content.