Docking Menus | NoGray.com
Download
The download file includes:
  • NoGray mooTools extenssion
  • NoGray DockingMenu Class
  • mooTools vs 1.11
  • Examples file
Visit mooTools.net for the latest version of mooTools. Files optimized and packed using dean.edwards.name/packer/

Download It Now
Docking Menus
If you ever saw the Mac, you know what's the docking menu. We have created a docking menu that will behave similary to the Mac menus for websites. You can see an example of it in our navigation or the small icons below. We use an undestructive approach to keep the menu code and event intact.

Requirements:
The docking menu requires an XHTML doctype, which means your <html> tag should look like 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Try It:

Horizontal Menu:
Sample Docking Menu Sample Docking Menu Sample Docking Menu Sample Docking Menu

Verticle Menu:
Verticle Menu Verticle Menu Verticle Menu Verticle Menu

Dragable Menu: (click and drag)
Dragable Menu Dragable Menu Dragable Menu Dragable Menu

Dragable Menu Items: (click and drag on any item)
Dragable Menu Items Dragable Menu Items Dragable Menu Items Dragable Menu Items


Configurations:

You can animate any CSS value that is numeric or a color for the images on the docking menu. The initial stage will be the middle value between the starting style and the ending style. You can pass the options when intiating the docking menu using an option object.

Options objects are a key: value object with the following syntax 
{option: value,
option: {option: value,
		option: value},
option: [value1, value2]}
Option Description Default Value
startStyle The minimum CSS values for the images { 'width':52 }
Example: 
var docking_menu = new DockingMenu("MyElement", {startStyle:{'width':0,
		'opacity':0.5}
});
endStyle The maximum CSS values for the images { 'width':128 }
Example: 
var docking_menu = new DockingMenu("MyElement", {startStyle:{'width':0,
				'opacity':0.5},
	endStyle:{'width':54,
				'opacity':1}
});
transition The mooTools FX transtion for the animation Fx.Transitions.Quad.easeOut
Example: 
var docking_menu = new DockingMenu("MyElement", {transition:Fx.Transitions.Quad.easeOut});
duration The time in milli seconds it takes for the animation. 500
Example: 
var docking_menu = new DockingMenu("MyElement", {duration:750});
keepLeftCenter If the menu has absolute positioning, it'll keep on the center (horizontally) false
Example: 
var docking_menu = new DockingMenu("MyElement", {keepLeftCenter:true});
keepTopCenter If the menu has absolute positioning, it'll keep on the center (verticlly) false
Example: 
var docking_menu = new DockingMenu("MyElement", {keepTopCenter:true});