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}); |
Custom Search
