Change animation settings

22 Mar 20225 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.

CSHTML

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

Animation.cs

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