The download file includes:
- NoGray mooTools extenssion
- NoGray DockingMenu Class
- mooTools vs 1.11
- Examples file
Download It Now
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:
Verticle Menu:
Dragable Menu: (click and drag)
Dragable Menu Items: (click and drag on any item)
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}); |
