These two navs have identical HTML, other than classes for the brown arrows, and they are driven entirely via CSS rules. Scripting is not required, other than to make IE/win obey :hover when applied to non-links. The navs are floated opposite, sometimes touching the clearing element below.
The elements above are floated and cleared in a way designed to expose any IE float bugs that could occur, but they are all suppressed in this method. However, if the nav is at the bottom of the screen content, IE6 does not enjoy having the flyouts go below the bottom of the body element and will let the flyouts vanish when those low flyouts are hovered below the flowed content. A large bottom padding on the body element would satisfy IE in that rare case.
IE/Mac does not support this method, but it has been hack-fed a set of dumbed down rules to make the nav fully expand for accessibility. Additionally, there is a <noscript> block that holds similar code for IE/Win when Javascript is disabled, and the <noscript> block is inside a Conditional Comment, along with the MS proprietary Jscript behavior call that makes it all work.
The Jscript is the work of Peter Nederlof, and fine work it is, too. This script not only makes IE support all hovering, but all :active events as well. Try clicking on the H1 element in IE/win for a shocker!
A simpler script method for handling IE6 does exist, the Suckerfish script. Basically the script watches the links to be hovered, and when the mouseover event is triggered on a link it gets a class name applied, but only during the mouseover event. Then you write duplicate selectors for the hover rules, but referencing the JS-applied class name. The resulting IE6 faux-hovering is effective and doesn't need a specical served mime type (simple JS file), but at the cost of having to modify the CSS hover rules just a bit.
In this page we've added a small JS file from Son of Suckerfish to enhance keyboard focussing.
When Service Pack 2 is installed on Windows, the proprietary .htc file will only work in IE6 when correctly served with the mime type text/x-component. Mime types are defined by the server administrator, so if your server is incorrectly set, IE6 will fail to show the popups. That's just the way it is, folks. Hmmm, that Suckerfish is looking better and better...
Update (Feb 26, 2005): It now appears that setting IE6's image cache away from "Automatically" is the cause of both the arrow calls (known effect) and also the border bleed-thru effect. It appears that the BG images themselves have something to do with the border bug, so avoiding the arrows or rearranging the CSS might prevent this border bug. However, very few users ever mess with the cache settings, and a server-side fix exists here.
Update (Feb 27, 2005): The method has been enhanced by the addition of divs into the nested list structure. The divs provide hoverable padding areas around the flyouts, which are more forgiving of shaky-handed users who may stray off the flyouts. The flyout functioning is exactly the same, and the divs are semantically null so they do not alter the list structure for screen readers and search engines.
Structural classes have been eliminated, but reverse z-indexing is required and cannot be applied via the stylesheet without the use of sibling selectors, which IE/Win does not support. However, if the arrows are omitted and a database can apply descending z-index styling to the list items as they are outputted, then a dynamically generated navigation could be achieved with this method.
Currently the demo is set to a pixel width, but we plan to try it out with an EM width and are very confident it will work just as well that way. At least we hope so...
Update (April 6, 2005):This method has been demoed as a combo dropdown and flyout "flat" menu. Go to the Deluxe CSS Dropdowns and Flyouts page, to get a load of what CSS can really do.
Big John Design
Contact Us
©positioniseverything.net
Last updated: July 2, 2008
Created February 25, 2005