Menu with rounded corner
17 Feb 20226 minutes to read
The rounded corner can be achieved by using the cssClass
property. Add a custom class to the menu component and customize it using the border-radius
CSS property. For more information, refer to the styles
specified in the below sample.
@Html.EJS().Menu("menu").Items(ViewBag.menuItems).CssClass('e-rounded-menu').showItemOnClick("true").Render()
<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();
}