animationBoolean|Object
A collection of Animation objects, used to change default animations. A value of false will disable all animations in the widget.
animation:true is not a valid configuration.
Available animations for the ContextMenu 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
ContextMenu content slides in from the top.
fadeIn
ContextMenu content fades in.
expand
ContextMenu content expands from the top down. Similar to slideIn.
Example
<div id="target">Target</div>
<ul id="context-menu">
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
<script>
$("#context-menu").kendoContextMenu({
target: "#target",
animation: {
open: {
effects: "fadeIn"
}
}
});
</script>animation.closeObject
The animation that will be used when closing sub menus.
Example
<div id="target">Target</div>
<ul id="context-menu">
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
<script>
$("#context-menu").kendoContextMenu({
target: "#target",
animation: {
close: {
effects: "slideIn:up"
}
}
});
</script>animation.close.effectsString
Effect to be used when closing the popup.
Example
<div id="target">Target</div>
<ul id="context-menu">
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
<script>
$("#context-menu").kendoContextMenu({
target: "#target",
animation: {
close: {
effects: "slideIn:up"
}
}
});
</script>animation.close.durationNumber
Defines the close animation duration in milliseconds.
Example
<div id="target">Target</div>
<ul id="context-menu">
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
<script>
$("#context-menu").kendoContextMenu({
target: "#target",
animation: {
open: {
effects: "slideIn:down",
duration: 100
}
}
});
</script>animation.openObject
The animation that will be used when opening sub menus.
Example
<div id="target">Target</div>
<ul id="context-menu">
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
<script>
$("#context-menu").kendoContextMenu({
target: "#target",
animation: {
open: {
effects: "slideIn:down"
}
}
});
</script>animation.open.effectsString
Effect to be used when opening the popup.
Example
<div id="target">Target</div>
<ul id="context-menu">
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
<script>
$("#context-menu").kendoContextMenu({
target: "#target",
animation: {
open: {
effects: "slideIn:down"
}
}
});
</script>animation.open.durationNumber
Defines the open animation duration in milliseconds.
Example
<div id="target">Target</div>
<ul id="context-menu">
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
</ul>
<script>
$("#context-menu").kendoContextMenu({
target: "#target",
animation: {
open: {
effects: "zoomIn",
duration: 100
}
}
});
</script>