Accessible, all CSS, cross-browser dropdown menus?

[Katrina Owen]

One of the things that I am currently researching, is getting a drop-down menu, to work with tabindex values without using any JavaScript.

Does the Pro CSS and HTML Design Patterns have a pattern or two that address this issue?

[Mike Bowers]

Does Pro CSS and HTML Design Patterns have dropdown and tab menus that do not use JavaScript?


Because IE doesn't support some CSS features, it isn't possible to do a reliable dropdown or tab menu without some JavaScript.

Chapter 17 of my book has dropdown and tab menu design patterns. These patterns use JavaScript, but only in the most minimal ways. Also notice that there is absolutely no JavaScript code in the body of the XHTML document! My approach uses the best practice of fully separating XHTML, CSS, and JavaScript. This makes the code more maintainable because these items are not intermingled throughout the XHTML code.

You can see the dropdown menu in action at http://www.cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Flyout%20Menu/example.html

You can see the tab menu in action at http://www.cssdesignpatterns.com/Chapter%2017%20-%20LAYOUTS/Tabs/example.html

Note that both of these design patterns are fully accessible, work in all major browsers, and display nicely when CSS is turned off and JavaScript is disabled.

[ October 12, 2007: Message edited by: Mike Bowers ]
[ October 13, 2007: Message edited by: Mike Bowers ]

[Bear Bibeault]

My approach uses the best practice of fully separating XHTML, CSS, and JavaScript.

I am so glad to see this.

While most people seem to understand that moving style information out of the markup is a good thing (though I still see a lot of embedded style tags), it seems to be a more difficult hurdle to get them to move the behavior out of the markup (the whole Unobstrusive JavaScript thing).

It makes just as much sense to avoid embedding script in the markup as it does to avoid embedding style.
[ October 12, 2007: Message edited by: Bear Bibeault ]

[Katrina Owen]

Exactly!

Last time I was this excited about a book I heard about was when I discovered the Beginning JavaScript with DOM Scripting and Ajax from Apress. I had completely avoided all contact with JavaScript before that, because it seemed so ugly, rude, messy, and incomplete. The day I read about the unobtrusive approach, I was converted.

Thanks, Michael, for directing me to the correct chapter in your book. I really want to work through this book chapter by chapter, but in this one case, I'm going to have to skip ahead a bit!