Open menu and sub menu on click only

27 Apr 20226 minutes to read

You can open menu items and sub menu on menu item click by setting showItemOnClick property of the Menu. To open sub menu items only on item click, should be set as true.

<ejs-menu id="menu" items="ViewBag.menuItems" cssClass="e-rounded-menu" showItemOnClick="true"></ejs-menu>

<style>
    body {
        margin-top: 100px;
        text-align: center;
    }

    /* Styles to achieve rounder corner in menu */
    .e-menu-wrapper.e-rounded-menu:not(.e-menu-popup),
    .e-menu-wrapper.e-rounded-menu .e-menu {
        border-radius: 20px;
    }

    /* Increased the menu component left and right padding for better rounded corner UI */
    .e-menu-wrapper.e-rounded-menu ul.e-menu {
        padding: 0 14px;
    }
</style>
public ActionResult Rounded()
{
    List<object> menuItems = new List<object>();
    menuItems.Add(new
    {
        text = "File",
        items = new List<object>()
        {
            new { text = "Open" },
            new { text = "Save" },
            new { text = "Exit" }
        }
    });
    menuItems.Add(new
    {
        text = "Edit",
        items = new List<object>()
        {
            new
             {
              text= "Toolbars",
              items = new List<object>()
                {
                  new { text= "Menu Bar"},
                  new { text= "Bookmarks Toolbar"}
                }
             },
             new 
             {
                text = "Zoom",
                items =new List<object>() 
                {
                 new { text= "Zoom In"},
                 new { text= "Zoom Out"},
                 new { text= "Reset"}
                }
              },
             new 
             {
               text = "Full Screen",
               items =new List<object>() 
               {
                 new { text= "cancel"}
               }
              },
        }
    });
    menuItems.Add(new
    {
        text = "View",
        items = new List<object>()
        {
            new { text = "Toolbar" },
            new { text = "Sidebar" },
            new { text = "Fullscreen" }
        }
    });
    menuItems.Add(new
    {
        text = "Tools",
        items = new List<object>()
        {
            new { text = "Spelling & Grammar" },
            new { text = "Customize" },
            new { text = "Options" }
        }
    });
    menuItems.Add(new
    {
        text = "Help"
    });

    ViewBag.menuItems = menuItems;
    return View();
}