New to Kendo UI for jQuery? Start a free 30-day trial

Animation

configuration

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 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).

animation

Boolean|Object

slideIn

Menu content slides in from the top

fadeIn

Menu content fades in

expand

Menu content expands from the top down. Similar to slideIn.

<ul id="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>
    $("#menu").kendoMenu({
        animation: { open: { effects: "fadeIn" } }
    });
</script>

animation.close

Object

The animation that will be used when closing sub menus.

<ul id="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>
    $("#menu").kendoMenu({
        animation: { close: { effects: "slideIn:up" } }
    });
</script>

animation.open