Change sub menu position
21 Dec 20224 minutes to read
The submenu position can be changed by using the beforeOpen
event. Assign the top and left position where you want to open the submenu to the beforeOpen
event arguments args.top
and args.left
respectively.
In the below sample, the sub menu opens above the parent menu item.
<ejs-menu id="menu" items="ViewBag.menuItems" beforeOpen="onBeforeOpen"></ejs-menu>
<script>
function onBeforeOpen(args) {
// Getting parent menu item element offset
var relativeOffset = ej.base.closest(args.event.target, '.e-menu-item').getBoundingClientRect();
// Getting sub menu wrapper element using closest method
var subMenuEle = ej.base.closest(args.element, '.e-menu-wrapper');
subMenuEle.style.display = 'block';
args.top = (relativeOffset.top - subMenuEle.getBoundingClientRect().height) + pageYOffset;
args.left = relativeOffset.left + pageXOffset;
subMenuEle.style.display = '';
}
</script>
<style>
body {
margin-top: 200px;
text-align: center;
}
</style>
public ActionResult Position()
{
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 = "Cut" },
new { text = "Copy" },
new { text = "Paste" }
}
});
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();
}
NOTE
For custom positioning, set both
top
andleft
position in thebeforeOpen
event.