A collection of
Animation objects, used to change default animations. A value of false will disable all animations in the widget.
Available animations for the Menu are listed below. Each animation has a reverse options which is used for the close effect by default, but can be over-ridden
by setting the close animation. Each animation also has a direction which can be set off the animation (i.e. slideIn:Down).
- slideIn
- Menu content slides in from the top
- fadeIn
- Menu content fades in
- expand
- Menu content expands from the top down. Similar to slideIn.
Example
$("#menu").kendoMenu({
animation: { open: { effects: "fadeIn" } }
});
The animation that will be used when closing sub menus.
The animation that will be used when opening sub menus.
Specifies that sub menus should close after item selection (provided they won't navigate).
Example
$("#menu").kendoMenu({
closeOnClick: false
});
Specifies Menu opening direction. Can be "top", "bottom", "left", "right".
You can also specify different direction for root and sub menu items, separating them with space. The example below will initialize the root menu to open upwards and
its sub menus to the left.
Example
$("#menu").kendoMenu({
direction: "top left"
});
Specifies the delay in ms before the menu is opened/closed - used to avoid accidental closure on leaving.
Example
$("#menu").kendoMenu({
hoverDelay: 200
});
Specifies that the root sub menus will be opened on item click.
Example
$("#menu").kendoMenu({
openOnClick: true
});
Root menu orientation. Could be horizontal or vertical.
Example
$("#menu").kendoMenu({
orientation: "vertical"
});
Specifies how Menu should adjust to screen boundaries. By default the strategy is "fit" for a sub menu with a horizontal parent,
meaning it will move to fit in screen boundaries in all directions, and "fit flip" for a sub menu with vertical parent, meaning it will fit vertically and flip over
its parent horizontally. You can also switch off the screen boundary detection completely if you set the popupCollision to false.
Example
$("#menu").kendoMenu({
popupCollision: false
});