Change sub menu position in EJ2 TypeScript Menu control
2 May 20235 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.
import { Menu, MenuItemModel, MenuModel } from '@syncfusion/ej2-navigations';
import { BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-navigations';
import { enableRipple, closest } from '@syncfusion/ej2-base';
enableRipple(true);
// Menu items definition
let menuItems: MenuItemModel[] = [
{
text: 'File',
items: [
{ text: 'Open' },
{ text: 'Save' },
{ text: 'Exit' }
]
},
{
text: 'Edit',
items: [
{ text: 'Cut' },
{ text: 'Copy' },
{ text: 'Paste' }
]
},
{
text: 'View',
items: [
{ text: 'Toolbar' },
{ text: 'Sidebar' }
]
},
{
text: 'Tools',
items: [
{ text: 'Spelling & Grammar' },
{ text: 'Customize' },
{ text: 'Options' }
]
},
{ text: 'Go' },
{ text: 'Help' }
];
// Menu model definitions
let menuOptions: MenuModel = {
items: menuItems,
beforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
// Getting parent menu item element offset
let relativeOffset: ClientRect = closest(args.event.target as Element, '.e-menu-item').getBoundingClientRect();
// Getting sub menu wrapper element using closest method
let subMenuEle: HTMLElement = closest(args.element, '.e-menu-wrapper') as HTMLElement;
subMenuEle.style.display = 'block';
args.top = (relativeOffset.top - subMenuEle.getBoundingClientRect().height) + pageYOffset;
args.left = relativeOffset.left + pageXOffset;
subMenuEle.style.display = '';
}
};
// Initialize Menu component
new Menu(menuOptions, '#menu');
<!DOCTYPE html>
<html lang="en">
<head>
<title>Essential JS 2</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name="description" content="Essential JS 2" />
<meta name="author" content="Syncfusion" />
<link href="https://cdn.syncfusion.com/ej2/22.2.5/ej2-base/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/22.2.5/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/22.2.5/ej2-navigations/styles/material.css" rel="stylesheet" />
<!--style reference from app-->
<link href="styles.css" rel="stylesheet" />
<!--system js reference and configuration-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>LOADING....</div>
<div id='container'>
<div class="control-section">
<ul id="menu"></ul>
</div>
</div>
</body>
</html>
For custom positioning, set both
top
andleft
position in thebeforeOpen
event.