Animate the wijmenu

The wijmenu widget supports animation effects. Follow these steps to add animation to the wijmenu widget:

Create an ASP.NET MVC Wijmo application.
In the Solution Explorer, click Views | Shared folder and double-click the _Layout.cshtml file to open it.

Add the following markup within the <body> tags and after @Render to create a list:

<ul id="menu">
<li><a>menuitem1</a>
<ul>
<li><a>menuitem1a</a></li>
<li><a>menuitem2a</a></li>
</ul>
</li>
<li><a>menuitem2</a></li>
<li><a>menuitem3</a></li>
</ul>

Add the following script to initialize the widget and add animation:

<script type="text/javascript">
    $(document).ready(function () {
        $("#menu").wijmenu();
        $("#menu").wijmenu("option", "animation", { animated: "bounce", option: { direction: "right" }, duration: 400, easing: null })
    });
</script>

Run the application. The dropdown for "menuitem1" will bounce as it drops. Note that you can change the animation effect by changing the name of the effect in the animated: "bounce" property.