arieh/yaddm

Yet Another Drop Down Menu

YADDM - Yet Another Drop-Down Menu

YADDM stands for "Yet Another Drop-Down Menu".

It supplies an interface for creating keyboard and mouse accessible drop-down menus. This means the class handles all related events, but it does not supply any open/close effects, ony hooks for supplying them:

1. CSS class based effects.
2. Supply an open/close functions to the constructor
3. Use the class's events.

The supplied demo shows how to use these.

Tested and found working on FF 3.5, IE6-8, Safari 4 (read notes) and Chrome 3

How to use

The class is very simple. you simply need to call it and it will generate a dropdown functionality on all marked ULs it assumes each li has exactly one anchor in it. sub-menues are neted ULs with specified class (default to submenu). NOTE: you can use whatever structure you would like, but you should note that the keyboard accessiblility assumes each menu item has an anchor in it. i haven't tested it, but a missing anchor might break the class

You can either use the contructor:

#JS
var menu = new YADDM();

Or use the supplied function:

#JS
setDropDownMenus('alternative-classname');

Knows Issues

• The library assumes standart keyboard support using Tag / Shift+Tab to navigate between anchors for it's keyboard support. This means 2 things: 1. If a browser has different shortcuts, they should work almost completetly. 2. if the browser does not have these the keyboard functionality will not work.
• Using Shit+Tab on last Subemenu item will result in unfocused menu (behaviour changes between different browser
• Safari requiers that you enable tab browsing through 'Prefrences' > 'Advanced' > 'Press Tab to highlight each item on a web page'
• For browser with different shortcuts, there will be an issue if you try to unfocus a menu who's handle is the first anchor on the menu-bar using the Shift+Tab alternative.

Options

• className (string) : an alternative class-name to identify the submenus with
• openFunction (Function: defaults to $empty): an alternative function to use for opening effect. recieves one paramater- the menu to be opened
• closeFunction (Function: defaults to $empty): same as above but for close

Events

• open : fires when a menu was opened. passes the menu element
• close : same as above but for close

CSS Classes

the Class assigns 2 css classes to it's element:

• menu-opened : an opened menu
• menu-closed : a closed menu

yaddm's Issues

IE png background flash

On every version of IE:
If submenus have png background and you move the mouse over them it will flash when mouse leaving a submenu and entering into another.

i have a solution to this problem:

parent.addEvent('mouseout',function(event){
if (!menu.hasClass('menu-closed') && !onMenu){
var evt=window.event || event;
if(! menu.hasChild(evt.toElement) ) {
menu.getElements('.'+self.options.className).each(function(m){hideFn(m);});
hideFn(menu);
}
}
onParent = false;
});

Bug with Tab/Mouse navigation

The bug:
http://dl.dropbox.com/u/121630/YADDM_bug.png

Browsers:
I could reproduce the bug on FF3.5, Chrome3 and IE8

How to reproduce:
Tab through the menus until you open Settings > Personal, then click outside to "blur()" the element. Tab again to open Add, then click outside to "blur()". Both dropdown menus will stay open until another interaction.