Change sub menu position in Angular Menu component
28 Sep 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 { Component } from '@angular/core';
import { enableRipple, closest } from '@syncfusion/ej2-base';
import { MenuItemModel, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-angular-navigations';
enableRipple(true);
@Component({
selector: 'app-root',
template: `<div class="e-section-control">
<!-- To Render Menu. -->
<ejs-menu [items]='menuItems' (beforeOpen)='onBeforeOpen($event)'></ejs-menu>
</div>`
})
export class AppComponent {
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' }];
onBeforeOpen(args: BeforeOpenCloseMenuEventArgs): void {
// 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 = '';
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MenuModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';
@NgModule({
imports: [BrowserModule, MenuModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
For custom positioning, set both
top
andleft
position in thebeforeOpen
event.