Kundenmenue

full version in german language Alexander Farkas

The Script is inspired by Sons of Suckerfish and Drop-Down Menus, Horizontal Style and is based on jQuery.

Key-Benefits of the Dickerfisch/FatFish - Drop Down Menu

improved usability for mouse users due to controlled and customizable timeout
supports keyboard usage including Opera´s spatial navigation
visible to searchengines and screenreaders
accessible (WAI/WCAG 1.0, Section 508 compliant)
cross-browser compatible: tested with Trident- (Internet Explorer 6+), Gecko- (i.e. Firefox1.5), Opera- (Opera8.5+) and KHTML- (i.e. Safari2+) Engine; (IE5 and IE5.5 is supported too with the limitation, that you can just use one dhtml-menu on one page)
works basically without JavaScript, fallback to pure CSS menus (keyboard and mouse, 'progressive enhancement philosophy')
suports unlimited level-menus and several dhtml-menus on one page
unobtrusive JavaScript, OOP
easy to implement
does Layout only trough CSS (knowledge of JavaScript is not necessary)
optional effects
lightweight script (JavaScript-size compressed < 3kb, but you need jQuery)

Usage

The [X]HTML for the Script has to be a valid nested list (ordered or unordered), wich is wrapped by another element (for example: div container with id="nav"). The li-element of the active category should have the class value active and all li - ancestors of this category should have the class value activepath. The classes are important for screenreader- and keyboard- users, because we have limited the number of links for them. (It´s a feature not a bug! If you don´t like that behavior, you can change this simply by modifing one config variable [var _limitlinkforkeyboard = 1;] in the javascript.) The script doesn´t make any differences between these classes, but you should do so in your stylesheet for usability reasons.

The stylesheet is very similiar to the Drop-Down Menus, Horizontal Style. You can use the Stylesheets in the demo as drafts and edit the styles for your needs.

Execute the JavaScript after DOM is ready (jQuery):

var dhtmlmenu = new DickerFisch('CSS-selector of the wrapping Element');

The first parameter of the script expects a CSS 1-3 selector/jQuery-selector of the wrapping container (I recommend using an id-selector for performance reasons.) The second parameter are options.

NavTimeout: [type number] delay to hide submenu in ms (default is 250)
ListType: [type string] used listtype for menu (i.e. ol); default is 'ul')
Effect: [type number] should use an effect? 0 = no effect, 1 = effect for showing and hiding submenu, 2 = effect for showing submenu, 3 = effect for hiding menu (default = 0; needs jQuery-Plugin: CleanCssAnimation, wich removes display:none after animation effect for better accessibility and more controll due to your stylesheet, it´s included in the dropdown package, below)
ShowEffect: [type string] effect name for showing submenu (you can use any jquery-(plugin-)effect, default = 'show')
HideEffect: [type string] similiar to ShowEffect just for hiding the submenu (default = 'hide')
EffectSpeed: [type number|string] speed of hide/show- animation in ms or predefiened strings ('slow', 'normal' and 'fast', default = 300)

Example:

var dhtmlmenu = new DickerFisch('#nav',{NavTimeout:300,ListType:'ol',Effect:2});

Download/Demo

What you should know about accessible and usable dropdown-menus:

pure CSS drop down solutions with nested a-elements for IE6- aren´t accessible, not only because they lack in keyboard support, but also they can´t support screenreader-usage (screenreaders don´t know, where a link starts and where a link ends, most screenreader users have to use IE6- as standard browser!).
there are several drop-down menus claiming to be full accessible, only because they are supporting keyboard usage, too. but a lot of them are using display:none for hiding submenus, so they aren´t accessible for screenreaders.
flyout-menus (horizontal dropdown menus), that don´t offer a little amount of time till they are hiding the submenu are neither usable nor accessible, because a lot of people are expecting same behavior like in normal appication-flyouts and some people with motoric disabilities can´t use a flyout menu, wich immediately hides his submenus, if the user leaves the parent element just in a split second.

. top