Nifty Navigation Using CSS

[brothercake]

Notice: This is a discussion thread for comments about the SitePoint article, Nifty Navigation Using CSS.
__________

"but you're also locking out text-only devices such as screen readers"

A screen reader is NOT a text-only device, and frankly, it's pretty sad to see this myth is still being perpetuated. The dropdown menus example will be inaccessible to the most popular screenreaders because they can't read content which is not displayed. Quite apart from the the fact that such menus are inaccessible to keyboard users.

Pure CSS menus have extremely poor accessibility and usability, and should never be used.

[markbrown4]

The dropdown menus example will be inaccessible to the most popular screenreaders because they can't read content which is not displayed.
Quite apart from the the fact that such menus are inaccessible to keyboard users.

I've heard JAWS read text with display: none; loud and clear. It seems ridiculous to me that a screen reader should look at the CSS in this way, though I don't doubt that some do actually work like that - I just think it's stupid.

I've used the keyboard to move around CSS only menus fine and dandy,

Pure CSS menus have extremely poor accessibility and usability, and should never be used.

frankly, it's pretty sad to see this myth is still being perpetuated

[AutisticCuckoo]

Originally Posted by markbrown4

It seems ridiculous to me that a screen reader should look at the CSS in this way, though I don't doubt that some do actually work like that - I just think it's stupid.

A screen reader is not an aural browser, it's a layer on top of the operating system and its applications. I would guess that a screen reader such as JAWS doesn't read the HTML or CSS as such, but works with the DOM tree generated by the actual browser (usually IE). In fact, it's probably not the DOM tree but the rendering tree, which is why elements with display:none don't appear.

[Karpie]

By 'pure CSS', you mean keeping navigation items in plain (possibly nested) lists, and then styling them however?

This is the first time I've heard them be described as bad, and I don't understand why at all.

[brothercake]

By "pure CSS" I mean menus with only list-item :hover triggers and no additional behavior layer. In order to be useable by mouse users, and accessible to keyboard users, menus need behavioral scripting, to implement things like open/close delays and focus triggers.

The assumption that "works without javascript" == "more accessible" simply doesn't hold true; the situation is more complex than that.

Originally Posted by markbrown4

I've used the keyboard to move around CSS only menus fine and dandy,

Care to show me an example of such a menu?

[markbrown4]

A screen reader is not an aural browser, it's a layer on top of the operating system and its applications. I would guess that a screen reader such as JAWS doesn't read the HTML or CSS as such, but works with the DOM tree generated by the actual browser (usually IE). In fact, it's probably not the DOM tree but the rendering tree, which is why elements with display:none don't appear.

interesting, thanks Tommy,

Care to show me an example of such a menu?

Well.. not the sub-menu items without js. I see what you were getting at now, I wouldn't label it with "extremely poor accessibility and usability, and should never be used."

I better relax Sounds that Mark already has plans to start WW 3

i'm CALM!

UDM menus rock my world.

I would give any "css animated" menus the "dont use it" label.

[brothercake]

I should probably clarify my point - I'm not levelling my criticism at all forms of CSS navigation, not at all, and the vast majority of what's being taught in this article is solid best-practise.

All I'm saying is that CSS is not suitable for defining behaviors - it doesn't have the capability, and that's what JavaScript is for.

Pure CSS navigation bars and other static navigation structures:

Pure CSS dropdown/flyout menus:

[Stormrider]

Why would you put a <div id="navigation"> around the <ul> in the first example, when <ul id="navigation"> would work just as well?

[lloydi]

At this point, I should just throw this in:

http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

It does a lot of what Rachel refers to here and makes the process of creating horizontal or vertical navigation a doddle.

[junjun]

A great resource I use is Listamatic http://css.maxdesign.com.au/listamatic/ Seems like some of the examples here is taken from there so it's worth a visit.

[Dan Schulz]

Originally Posted by Stormrider

Why would you put a <div id="navigation"> around the <ul> in the first example, when <ul id="navigation"> would work just as well?

Thank you. I meant to say that yesterday, but had to run.

Furthermore, I'd change "navigation" to "menu" but that's just a personal choice.

[Bling]

If you want a css drop down that works in IE6 checkout http://tutorials.alsacreations.com/deroulant/menu-horizontal.htm

[markbrown4]

Bling, there's better options for dropdown menus than that,
http://www.htmldog.com/articles/suckerfish/

Anything that suggest inline javascript like onmouseover="javascript:montre();" is out of date.

Keep the content / presentation and beharioural layers completely separate.

[Tyssen]

Originally Posted by lloydi

http://www.accessify.com/tools-and-wizards/developer-tools/list-o-matic/

I like it.

that wrapping div is unnecessary, you can have id attribute for the ul itself.

[Drinky]

Lots of occurences of

& # 8 9 4 2 ;

throughout that article's code samples

[aarontgrogg]

"However, this approach doesn't work in Internet Explorer"

i think i might have put this phrase a little higher in the article...

like maybe in the first sentence?

but good article otherwise...

[mattymcg]

Thanks Drinky, not sure what happened there. All fixed.

[thenk83]

Skimming through the article, This will be useful in my collection of bookmarks :) I love the idea of CSS menus without Javascript.

Cool article!

Many many good techniques here though nothing really new or revolutionary. Plus pure CSS drop downs are pointless without IE 6 support.
Nice job spreading the word on these techniques though.

[loganathan]

it is great one to know about more on css

[Stevie D]

A really good article, thanks!

A few things to add...

The technique you use to give flyout or drop-down menus can be enhanced by the use of Javascript to make it work in IE6 - detailed in http://www.alistapart.com/articles/dropdowns/.
What this does is uses Javascript to apply a class to the sublist when you 'mouseover' the parent element, and to remove the class onMouseOut. This gives the same effect in IE6 as using :hover does in better browsers.

If you're going to make it really accessible, of course, you should repeat it for onFocus/onBlur so that keyboard users (on any browser) can access the submenus.

Another good thing to do is linked in with the technique of using <body id=...> to style the current tab - you can also use <body class=...> to make the current submenu always visible.

ie, if you had a page on menus in the CSS section of your site, you might have, within your menu:

...
<li id="css">CSS
<ul><li id="menus">Menus</li>
...</ul>
</li>
...

then at the top, have <body id="menus" class="css">.

You can then use CSS to keep the relevant submenu on the screen at all times,
eg

body.css ul#nav li#css ul {
display:block; padding-left:12px;
(other display styles) }

Specificity rules mean that this should override the :hover declaration. Obviously, you can apply the one declaration to all the different submenus by repeating the element line and swapping "css" for the names of the other submenus.

Disclaimer - this is all off the top of my head and may have one or two unforeseen bugs in the implementation. But the general principle is sound!

[tonybone]

I was working with the simple horizontal menu example and noticed that, in IE 7, the bottom padding of the links weren't being rendered, so the buttons looked like the bottoms were 'cut off' (no problems in FF). Anyone else see this and/or know how to fix it?