What is YADDM?

Simply put - YADDM is a simple event handling Mootools Class, designated specifically to handle all the events required for a fully accessible drop down menu. This includes the obvious mouse hover events, but also tab / shift-tab navigation. An important note is that it does not supply any of the effects.

Unlike many of my other Classes, I've used this class extensively, passing it between my projects. It has proved to be extremely useful, and easy to use - mostly it was enough to simply add the code and init the class.

The main concept is to supply a Class that uses the inherent markup of semantic menus - usually - 

UL > LI > a   UL.submenu

and let you decide in which way you want to style and open/close your menus. 

An important point to make is that the only markup restriction is that you use anchors for you menu items - thus supplying a cross-browser tab-browsing. This means that although technically you can now add a tabindex to any element on H5, YADDM only recognized anchors.

The last point is that it is also very very easy to use, and is fully cross browser (as cross browser your effects are obviously).

Some examples

First - some markup - an example menu -

<ul id='yaddm-menu-examle'>
	<li><a href="#">a</a></li>
	<li><a href="#">b</a>

		<ul class="yddm-ex-submenu">
			<li><a href="#">e</a></li>
			<li><a href="#">f</a></li>

			<li><a href="#">g</a></li>
		</ul>
	</li>
	<li><a href="#">c</a></li>

	<li><a href="#">d</a></li>
</ul>

and lets initialize the menu:

var menu = new YADDM({className:'yddm-ex-submenu'});

now - YADDM supplies 3 ways for you to add effects:

1. CSS-classes - whenever a menu is opened, its added a menu-opened class, and when closed a menu-closed class. Simply styling them with altering displays will give you an open/close effect,
2. Passing functions to the constructor - openFunction and closeFunction. Both will be passed the menu as a single variable.
3. Events - when a menu is opened it will fire a open event, and when closed a close event. Both will be passed the menu as a single variable.

for this example i simply used the CSS Classes, but you can see that this is extremely flexible.

the CSS:

/*
 * The Main Menu Styles
 */
#yaddm-menu-examle{
	width:640px;
	height:30px;
	margin:0 auto;
	padding:0;
}
#yaddm-menu-examle li{
	width:155px;
	height:28px;
	display:inline-block;
	margin:0;
	padding:0;
}
#yaddm-menu-examle li a{
	width:155px;
	border:1px solid black;
	height:28px;
	display:block;
	background:#8FBAD5;
	margin:0;
	padding:0;
	text-align:center;
}

/*
 * Submenu Styling
 */

#yaddm-menu-examle .yddm-ex-submenu, #yaddm-menu-examle .yddm-ex-submenu.menu-closed{
	display:none;
	padding:0;
}

#yaddm-menu-examle .yddm-ex-submenu.menu-opened{
	display:block;
	position:absolute;
}

#yaddm-menu-examle .yddm-ex-submenu li{
	display:block;
}

The Result

This is obviously not a very pretty design, and uses no fancy effects, but it does the trick- it's fully functional, and it is completely keyboard accessible.

More Resources

1. Forge Page
2. Docs
3. Github age