Kwicks is a MooTools plugin that enables dynamic navigation effects via lists.

MooTools Javascript Class

/*
Script: Kwicks

License: MIT-style license.

Copyright: Copyright (c) 2007-2009 [David Walsh](http://davidwalsh.name/).

Author: David Walsh (http://davidwalsh.name)
*/
var Kwicks = new Class({

	Implements: [Options],

	options: {
		squeezeWidth: 100,
		maxWidth: 285
	},

	initialize: function(list,options) {
		this.setOptions(options);
		this.list = document.id(list);
		this.parse();
	},

	parse: function() {
		var items = this.list.getElements('a'),
			fx = new Fx.Elements(items, {wait: false, duration: 250, transition:Fx.Transitions.Cubic.easeOut}),
			startWidths = [],
			options = this.options;
		items.each(function(item,i) {
			startWidths.push(item.getStyle('width').toInt());
			item.addEvent('mouseenter',function(){
				var fxSettings = {};
				fxSettings[i] = {
					'width': [item.getStyle('width').toInt(),options.maxWidth]
				};
				items.each(function(sibling,ii) {
					if(sibling != item) {
						var w = sibling.getStyle('width').toInt();
						if (w != options.squeezeWidth) {
							fxSettings[ii] = {
								'width': [w,options.squeezeWidth] 
							};
						}
					}
				},this);
				fx.start(fxSettings);
			},this);
		},this);
		this.list.addEvent('mouseleave',function() {
			var fxSettings = {};
			items.each(function(item,i) {
				fxSettings[i] = {
					width: [item.getStyle('width').toInt(), startWidths[i]]
				};
			});
			fx.start(fxSettings);
		});
	}
});

Class: Kwicks

Kwicks is a MooTools plugin that enables dynamic navigation effects via lists.

Implements:

Options

Kwicks Method: constructor

Syntax:

var kwicks = new Kwicks(options);

Arguments:

1. list - (string) The ID of the UL element that contains the Kwicks list items.
2. options - (object) Options for the class.

Options:

• squeezeWidth - (number, defaults to 100) The width of a squeezed element.
• maxWidth - (number, defaults to 285) The width of an expanded element.