1 nice.

nice.

posted at 06:49 am on November 7, 2003 by tim

2 A nice example

A nice example of drop down menus – probably the most semantically correct bug free version yet. But it still has it’s bugs…

Ah, for a world where we didn’t have to work around the bugs of useless browsers!

Might just consider this for one of my future projects – and it’s certainly better than any of the javascript/dhtml versions.

posted at 06:49 am on November 7, 2003 by Michael Ward

3 Safari...

…works fine. At least, it does in version 1.1 (comes with OS X 10.3). I agree that it’s broken in version 1.0.

The good news is that this means Apple are addressing all these incompatibilities that are being reported…

posted at 07:03 am on November 7, 2003 by Seb Duggan

4 Safari glitches?

I still have 10.2.8 on my work system and as such Safari 1.0 and the drop down menus appear in the upper left hand corner of the screen. On my other system I upgraded to Panther and it has a newer version of Safari which works perfectly.

I wonder if we need to keep an older version of Safari for testing purposes as some people may not upgrade immediately? The more the merrier as far as browsers is great but just makes our jobs as designers a little tougher.

posted at 07:03 am on November 7, 2003 by Jim S.

5 What about Accessibility?

As we learned in the previous issue, display: none effectively hides the content from the screen readers. So is this TRULY accessible or are the screen readers only going to get the top level items and not the secondary items?

posted at 07:14 am on November 7, 2003 by Andy A.

6 Drop down genius

Finally a dropdown that looks great and works great. Good article on the technique.
Is there any way to go and create decendent lists from the child list?

posted at 07:14 am on November 7, 2003 by Blakems

7 Short and sweet

Darn! Why wasn’t this published a month ago?

I ended up coming up with a similar method for a redesign project at work, though I used mouseover methods on the URLs rather than DOM coding. This is cleaner, though.

Hmm. May be time for me to recode. ;-)

If IE/Win is your only concern (and not Opera or IE5/Mac, say), and you aren’t a Javascript language purist, you can do a slightly simpler script with conditional comments and DHTML behaviors. But of course, that doesn’t get you compatibility with as many browsers.

posted at 07:27 am on November 7, 2003 by Stephen Sample

8 More dropdown levels?

As Blakems just mentioned above we are working on getting further nested levels in the dropdowns now and have gone most of the way to making this work.

The javascript patch for IE is simple enough, it just needs to recurse through any child nodes to attach the behaviour. However, the CSS is another thing…

We’ll keep you posted. Any ideas greatly appriecated.

posted at 07:34 am on November 7, 2003 by Dan Webb

9 Accessibility

Andy, as I understand it (and I don’t have much experience with screen readers, so I may be wrong here), the submenu items probably won’t be accessible as-is.

If any of the screen readers support Javascript, you could also add an onfocus handler to the script code, which would allow the menus to expand on tab selection as well. The HI of that is a little odd, but it seems possible. Of course, I don’t know that any screen readers would support this in any case. Joe?

But at least on the sites I’ve worked on, dropdown menus are frills. They save you a step in your navigation, but if your top-level categories are intelligently designed, that’s all they get you—the top-level category you need is hopefully obvious, and when you follow the top-level link, the subnavigation will probably appear early on the index page anyway.

So I don’t know. I’m something of an accessibility (and standards) advocate, but I’m also a pragmatist. And I’d rather have pretty-good accessibility than none, particularly if the differential is small, and perfection is unattainable.

Of course, since I’m arguing that dropdowns are optional, it might be more equitable to have no-one get to have dropdowns, since after all, they aren’t really necessary.

I guess my question becomes “is the utility of dropdown menus for your audience such that it’s acceptable to offer them to only part of that audience?” And I can’t answer that for you. …It might be the client’s call in a lot of cases, anyway.

posted at 08:08 am on November 7, 2003 by Stephen Sample

10 More accessiblity

Actually, We experimented using onfocus and onblur to enable mouseless use but I found this was not going to work easily as you cannot attach onfocus and onblur methods to list elements.

But yes, as you said above Stephen, the objective was to create a simple but effective solution to the problem with the minimum amount of code.

I also have always used dropdowns as an optional quick route in to deeper content that is always backed up by traditional navigation and this was designed to do that at the minimum of disruption and extra page weight.

In my opinion, adding a few extra CSS rules and a few lines of JavaScript does mean that giving an optional extra navigation feature to users that can (and want) to use it comes at a much more acceptable cost.

And yes, clients love this kind of thing..what can you do?

posted at 09:09 am on November 7, 2003 by Dan Webb

Discussion Closed

New comments are not being accepted, but you are welcome to explore what people said before we closed the door.

Got something to say?

Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.

Create a new account or sign in below if you’d like to leave a comment.

Forgot your password?

Subscribe to this article's comments: RSS (what’s this?)