April 20, 2005

CSS: Hybrid CSS Dropdowns: A List Apart

Author Eric Shepherd says:

This technique is a bulletproof way to ensure browser compatibility and to maintain usability even for people who have old browsers or difficulty accessing dropdown menus, either because of a disability or a low level of comfort with the dropdown paradigm. It also does a much better job than standard dropdown menus of orienting the user within the site.

Warning: This technique will not work as well for lists that require large numbers of items, where dropdowns either shine or collapse under the weight of their own sheer mass, depending on your perspective.

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.

Sound good? Let’s get going.

Hybrid CSS Dropdowns: A List Apart Article

Hybrid CSS Dropdown Sample


No comments: