How to change animations in ASP.NET MVC Context Menu

28 Aug 20265 minutes to read

To change the animation of the ContextMenu, the animationSettings property is used. This property applies to both the submenu open and close animations. The supported effects for the ContextMenu are,

Effect Functionality
None Specifies the submenu transform with no animation effect.
SlideDown Specifies the submenu transform with slide down effect.
ZoomIn Specifies the submenu transform with zoom in effect.
FadeIn Specifies the submenu transform with fade in effect.

Along with the Effect, the Duration (in milliseconds) and Easing options can be set to control the animation timing.

The following sample illustrates how to open the ContextMenu with the FadeIn effect and a duration of 800ms. The Effect value can be changed to None, SlideDown, or ZoomIn to see the other animations.

<div id="contextmenutarget">Right click/Touch hold to open the ContextMenu </div>
@Html.EJS().ContextMenu("contextmenu").Target("#contextmenutarget").Items((IEnumerable<object>)ViewBag.menuItems).AnimationSettings("animation").Render()

<script>

    var animation = {
        effect: 'FadeIn',
        duration: 800
    };

</script>

<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();
        }
    }
}