Hybrid CSS Dropdowns: A List Apart
Popularity Report
 |
|||
|
|||
|
|||
|
|||
|
|||
|
Rank
URL Tag Cloud
- css
- , design
- , menu
- , web
- , webdesign
- , navigation
- , tutorial
- , javascript
- , howto
- , development
- , xhtml
- , accessibility
- , code
- , Layout
- , menus
- , tabs
- , navigation_menus
- , webdev
Bookmark History
Saved by 53 people (-20 private), first by anonymouse user on 2006-03-02
- Samybenamor on 2009-12-13 - Tags no_tag
- Jsurmieda2002 on 2009-07-28 - Tags css
- Torlanglo on 2008-12-23 - Tags CSS , Layout , Menu , Tabs
- Billkracke on 2008-09-19 - Tags css , code , navigation
- Midpath89 on 2008-05-16 - Tags css , webdesign , navigation , menu
Public Sticky notes
Hybrid CSS Dropdowns
by Eric Shepherd
I know what you’re thinking...“Do we really need another article about CSS dropdowns?” Allow me to convince you. What if we could have one clean, well-structured menu which would combine the dynamism and code-ease of dropdown menus and do away with their main problems (not to mention degrade beautifully)? The problems with dropdown menus are:
1. their secondary options are inaccesible unless you activate the entire menu system; and
2. they offer insufficient orientation cues for the user. It can be difficult to navigate within a particular section of the site because you have to go back to the dropdown to change pages.
Highlighted by tzon02
You can either leave the menu as is, knowing that it will work beautifully in a few years when all browsers support :hover (knock on wood), and resting in the knowledge that all the navigation options will be visible and accessible to all users, or you can work up a bit of JavaScript to rewrite the CSS selectors in language IE understands to make the dropdown dynamism accessible to all.
Highlighted by dcorking
Hybrid CSS Dropdowns
by Eric Shepherd
I know what you’re thinking...“Do we really need another article about CSS dropdowns?” Allow me to convince you. What if we could have one clean, well-structured menu which would combine the dynamism and code-ease of dropdown menus and do away with their main problems (not to mention degrade beautifully)? The problems with dropdown menus are:
1. their secondary options are inaccesible unless you activate the entire menu system; and
2. they offer insufficient orientation cues for the user. It can be difficult to navigate within a particular section of the site because you have to go back to the dropdown to change pages.
Highlighted by tzon02
Hybrid CSS Dropdowns
by Eric Shepherd
I know what you’re thinking...“Do we really need another article about CSS dropdowns?” Allow me to convince you. What if we could have one clean, well-structured menu which would combine the dynamism and code-ease of dropdown menus and do away with their main problems (not to mention degrade beautifully)? The problems with dropdown menus are:
1. their secondary options are inaccesible unless you activate the entire menu system; and
2. they offer insufficient orientation cues for the user. It can be difficult to navigate within a particular section of the site because you have to go back to the dropdown to change pages.
Highlighted by tzon02
We’re going to create a hybrid menu that runs horizontally across the window. It has two levels of navigation (in our example, main topics and their associated pages). Our menu will allow for dropdown access to all pages in both navigation levels, display the current choices in the selected topic area constantly, keep the user aware of where he is in the site, and be clean and light to boot.
Highlighted by jonphipps
Public Comment
on 2006-10-24 by kgl0903