Having trouble getting help?
Contact Support
Contact Support
Change animation settings
14 Dec 20245 minutes to read
To change the animation of the ContextMenu, animationSettings
property is used. The supported effects for ContextMenu are,
Effect | Functionality |
---|---|
None | Specifies the sub menu transform with no animation effect. |
SlideDown | Specifies the sub menu transform with slide down effect. |
ZoomIn | Specifies the sub menu transform with zoom in effect. |
FadeIn | Specifies the sub menu transform with fade in effect. |
The following sample illustrates how to open ContextMenu with FadeIn
effect with the duration
of 800ms
.
<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
<ejs-contextmenu id="contextmenu" target="#contextmenutarget" items="ViewBag.menuItems" animationSettings="@new Syncfusion.EJ2.Navigations.ContextMenuAnimationSettings(){ Effect= Syncfusion.EJ2.Navigations.MenuEffect.FadeIn, Duration=800 }"></ejs-contextmenu>
<style>
#contextmenutarget {
border: 1px dashed;
height: 250px;
padding: 10px;
position: relative;
text-align: center;
color: gray;
line-height: 17;
font-size: 14px;
}
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace WebApplication1.Controllers
{
public class ContextMenuController : Controller
{
public ActionResult Animation()
{
List<object> menuItems = new List<object>();
menuItems.Add(new
{
text = "Show All Bookmarks"
});
menuItems.Add(new
{
text = "Bookmarks Toolbar",
items = new List<object>()
{
new {
text = "Most Visited",
items = new List<object>()
{
new {
text = "Google"
},
new {
text = "Gmail"
}
}
},
new {
text = "Recently Added"
}
}
});
ViewBag.menuItems = menuItems;
return View();
}
}
}