Mootools Navigation Plugin

Every site needs some sort of navigation — some are just more complex then others. The goal of this plugin is to make create a complex navigation menu as seamless as possible.

All you need to do is create a standard unordered list and the plugin will do the rest.

Hop on over to the demo page, or check out the code below. A commented version of the plugin is available for download.

The Mootools Plugin

var mooNav = new Class({
	Implements: [Events,Options],

	options: {
		autoPosition: true,
		fade: true,
		fadeDuration: 500,
		mode: 'horizontal',
		onShow: $empty,
		onHide: $empty,
		parentClass: 'has-sub',
		slide: true,
		slideDuration: 500
	},

	initialize: function(nav, options) {
		this.setOptions(options);
		if(typeof nav == 'string') { nav = $(nav); }

		var that = this;

		nav.getElements('li').each(function(li) {
			var child = li.getElement('ul');

			if(child) {
				var level = child.getParents('ul').length;

				li.addClass(that.options.parentClass);

				if(that.options.slide) {
					var container = new Element('div').inject(li).adopt(child);
					if(that.options.autoPosition) { that.setCss(container, level, that.options.fade, that.options.slide); }
					var slide = new Fx.Slide(child, { mode: level > 1 || that.options.mode == 'vertical' ? 'horizontal' : 'vertical', link: 'cancel', duration: that.options.slideDuration }).hide();
					child = container;
				} else {
					if(that.options.autoPosition) { that.setCss(child, level, that.options.fade, that.options.slide); }
				}

				child.set('tween', { duration: that.options.fadeDuration });

				li.addEvents({
					mouseenter: function() {
						if(that.options.slide) {
							slide.slideIn();
							if(that.options.fade) { child.fade('in'); }
							that.fireEvent('show', [li, child.getElement('ul')]);
						} else {
							child.fade(that.options.fade ? 'in' : 'show');
							that.fireEvent('show', [li, child]);
						}
					},
					mouseleave: function() {
						if(that.options.slide) {
							slide.slideOut();
							if(that.options.fade) { child.fade('out'); }
							that.fireEvent('hide', [li, child.getElement('ul')]);
						} else {
							child.fade(that.options.fade ? 'out' : 'hide');
							that.fireEvent('hide', [li, child]);
						}
					}
				});
			}
		});
	},
	setCss: function(container, level, fade, slide) {
		var parent = container.getParent('li');

		container.setStyle('position', 'absolute');
		if(fade || !slide) { container.setStyle('opacity', 0); }
		if(level > 1) {
			container.setStyles({
				'left': parent.getStyle('width').toInt() + parent.getStyle('border-left-width').toInt() + parent.getStyle('border-right-width').toInt(),
				'margin-top': (parent.getStyle('height').toInt() + parent.getStyle('border-top-width').toInt()) * -1
			});
		}
	}
});

Implementation

window.addEvent('domready', function() {
	var myNav = new mooNav('nav');
});

Thats it! Specify what list you want navigation-ized and its all done for you, all you need to do is add your touch of css