MenuMatic is a MooTools 1.2 class that takes a sematic ordered or unordered list of links and turns it into a dynamic drop down menu system. For users without javascript, it falls back on a CSS menu system.

<link rel="stylesheet" href="css/MenuMatic.css" type="text/css" media="all" />
...
<ul id="nav">
	<li><a href="#" >Link 1</a></li>
	<li><a href="#" >Link 2</a>
		<ul>
			<li><a href="#" >Link3</a></li>
			<li><a href="#" >Link4</a></li>
		</ul>
	</li>
	<li><a href="#" >Link 5</a></li>
</ul>
...
<script type="text/javascript" src="http://www.google.com/jsapi" ></script>
<script type="text/javascript" > google.load("mootools", "1.2.1"); </script>
<script type="text/javascript" src="js/MenuMatic_0.68.3.js" ></script>   

Javascript:

 var myMenu = new MenuMatic({/*options here*/});  

Features:
* Search Engine Friendly: Only manipulates existing links, does not generate links with javascript.
* Usable: Adjust hide delay to keep menus from disappearing to quickly.
* Accessible: Tab through main menu links with tab key. Navigate through drop down menus with arrow keys.
* Fails Gracefully: Falls back to suckerfish CSS based drop down menu system in the absence of javascript.
* Stylish: Control how menu looks with CSS, add flair with some effects.
* Flexible: With plenty of options (and more coming down the road) and the open source code, make it do your bidding.


Demo: http://greengeckodesign.com/?q=menumatic
Download: http://menumatc.googlecode.com/files/MenuMatic_0.68.3.zip
Source: http://greengeckodesign.com/?q=menumatic

Related Listings:

1. Simple Dropdown Menus With Pop Pop! is a simple but effective jQuery plugin for creating...
2. Dynamic Menu using MooTools This menu build did for Mootools way back even before...
3. Digg Like Menus Using CSS Navigation bar with rounded corners an sliding doors technique for...
4. Height Transitions using MooTools In this techniques like ‘height transitions’ and ‘class toggles’. Sounds...
5. MooTools ScrollSpy Script I’ve been excited to release this plugin for a long...

Do you like this post?

Email: