That's true. IE < 7 won't operate drop-downs in a pure-CSS-only
solution (which uses the :hover pseudoclasses everywhere).
The other minor issue I have with the pure-CSS solutions is that the
developer gives up any control for making the menus more user-
friendly. For example, I've found it's often nice to set a timeout of
about 1 second or so when the user mouses out of the drop-down menu
before you hide the menu again. This gives folks with less mouse
dexterity more wiggle room. With a pure CSS solution, the menu will
disappear the instant a user mouses off the target area. There are
workarounds in the pure-CSS solutions, such as adding padding around
the menus to make an unintentional mouseout less likely. But tricks
like that can cause other usability confusions sometimes.
I've also found that, when none of the drop-downs are showing, it's
really nice to set a half-second (or less) delay before showing the
first menu. This allows the user to quickly slide their mouse up and
down from the page header, or the browser's back button to the page
content (passing over the main navigation) without having drop-downs
flash in their face when they don't want them. But once one of the
menus is showing, the half-second delay is removed so subsequent
menus are displayed instantly upon mouseover of their parent button.
When all of the menus are hidden again, the delay is reset so the
user needs to hover over one of the menu buttons for a half-second or
so before a menu displays again. So the delay (which should be almost
unnoticeable) only happens for the initial menu-showing each time.
But having a pure-CSS solution is a great backup for users that
intentionally disable javascript in their browsers.
Also, I recommend when creating pages that have a ton of navigation
code in the HTML source, make sure to insert hidden (or visible)
"Skip to Content" anchor links somewhere before the navigation.
Actually, right after the opening <body> tag is usually the best
place to put a "Skip to Content" link.
And if you hide "skipnav" links from view, make sure to hide them
using something like this:
.hidden { display:block; width:0; height:0; overflow:hidden; }
...not like this:
.hidden { display:none } /* most screen readers will ignore this
content altogether */
OK, I'll shut up now. :)
Cheers,
-THEO-
On Feb 6, 2007, at 4:32 PM, Christopher Jordan wrote:
Correct me if I'm wrong here (and I probably am, lol!) but in
implementing something like this using css alone wouldn't the
author have to worry about all the browser compatibility issues?
Where as with jQuery the browser compatibility stuff has been taken
care of for you... wouldn't that be one reason that you'd *want* to
use jQuery and not straight css? well... it would be for me,
because I'm not a css guru type person. I still get frustrated with
it at times, especially when it comes to browser compatibility issues.
Just my thoughts. :o)
Chris
Alexandre Plennevaux wrote:
You can do this in pure css:
http://www.cssplay.co.uk/menus/doors_drop_line_three.html
He's got plenty of interesting experiments with only css.
_______________________________________________
jQuery mailing list
[email protected]
http://jquery.com/discuss/
