Want to get fancy? Does your audience need your site to be fancy? Do you have time to devote to making your site fancy?
Sometimes the simplest, most subtle changes will wow your audience, or at the very least (and most important) help them find their way and understand your message. Therefore, I recommend your navigation sets be as simple as possible. That means:
- Use seven or less main topics.
- Keep them text-based rather than graphical.
- Take advantage of a:link, a:hover, a:active, and a:visited styles in the style sheet.
- Define different styles for each menu set and apply the pseudo-classes.
- Ensure they are tab-key accessible.
OK. Ho hum. So what else is there? The sky is the limit! Your reading for this topic is a great overview of the most common options:
- Adding Style to Navigation Lists
- Pure CSS Menus (Horizontal or Vertical Multiple Level Menus)
- Pure CSS Dropdown Menus (tab accessible)
- Drop-down Nav Menu with HTML5, CSS3 and jQuery
- Text-based, using CSS pseudo-classes (link, visited, hover, active)
- CSS Button Control (generator)
- Sprites
- Image maps
- CSS Express Drop Down Menus
- Sliding
- Circular Exanding menu
- Expandable & collapsible up and down
- Bread crumb
- Garage Door
- Grid Accordian
- Site map
- Slide Show
- Seminar Registration
- Previous/Next
- Flash buttons
Form select drop down menu
Try W3Schools’ Drop Down navigation using the form select button. Does this method work best for your audience?
Try several of the other options listed on the Try-It-Yourself! .DHTML page.
Another option is this one if you’re looking for a keyboard-accessible menu:
- Ultimate Drop Down Menu 4.2
- Accessible Website Menu by Brothercake. Note the list of browsers which utilize the keyboard. Free for non-commercial use.
Adding the following to your <a href> tag will begin to make the menus tab-key accessible:
- tabindex=0
- onfocus=”MM_showMenu(window.menuitem,null,’idname’)”
- onblur=”MM_startTimeout(window.menuitem,null,’idname’);”