Meaningless Drivel is fun!*
The moose likes HTML, CSS and JavaScript and the fly likes Accessible, all CSS, cross-browser dropdown menus? Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Murach's Java Servlets and JSP this week in the Servlets forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Accessible, all CSS, cross-browser dropdown menus?" Watch "Accessible, all CSS, cross-browser dropdown menus?" New topic
Author

Accessible, all CSS, cross-browser dropdown menus?

Katrina Owen
Sheriff

Joined: Nov 03, 2006
Posts: 1357
    
  17
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
Author
Ranch Hand

Joined: Oct 08, 2007
Posts: 42
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60765
    
  65

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 ]

[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Katrina Owen
Sheriff

Joined: Nov 03, 2006
Posts: 1357
    
  17
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!
 
wood burning stoves
 
subject: Accessible, all CSS, cross-browser dropdown menus?
 
Similar Threads
Display jsp based on user agent
Centering a column heading in a datatable
html:file width
consistent font size across the project?
Wrapping of select box