Dynamic Navigation

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:

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’);”

Leave a Reply