Mootools Drop Menu

This is a simple yet powerful drop menu class. You can create an unlimited nested menu, build by the HTML tags ul and li. You can define your functions to open and close the menus with the onOpen and onClose Events. This gives you great power in customizing your drop down menu. You can customize the menu even more by CSS. The class is origionally written by Crhis Esler but almost totally rewritten.

Demo

Example Code

Javascript	
window.addEvent('domready',function(){
	
	$('nav').dropMenu();
	
});

HTML
<ul>
	<li><a href="#">Home</a></li>
	<li>
		<a href="#">Blog</a>
		<ul>
			<li><a href="#">Archive</a></li>
			<li>
				<a href="#">Categories</a>
				<ul>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">Mootools</a></li>
					<li><a href="#">PHP</a></li>
				</ul>
			</li>
			<li><a href="#">Last comment</a></li>
		</ul>
	</li>
	<li><a href="#">Contact</a></li>
</ul>

A more advanced example

Javascript	
$('nav').dropMenu({
	onOpen: function(el){
		el.fade('in')
	},
	onClose: function(el){
		el.fade('out');
	},
	onInitialize: function(el){
		el.fade('hide').set('tween',{duration:1000});
	}
});

Use the Awf.DropMenu class

Javascript	
var dropMenu = new Awf.DropMenu($('nav'),{
	onOpen: function(el){
		el.fade('in')
	},
	onClose: function(el){
		el.fade('out');
	},
	onInitialize: function(el){
		el.fade('hide').set('tween',{duration:1000});
	}
});

Documentation: Awf.DropMenu

Syntax:

var dropMenu = new Awf.DropMenu(element, [options]);

Arguments:

  1. element - (mixed) An Element or the string id of an Element to apply the drop menu to.
  2. options - (object,optional) An object with options for the drop menu. See below

Options:

Events:

Native Element Method: dropMenu

Syntax:

$('myElement').dropMenu[options]);

Arguments:

  1. options - (object,optional) An object with options for the drop menu. See the Awf.DropMenu options

Returns:

Download & links

Dependencies

License

MIT-style license.

Created By

Aryweb Webdevelopment