How to add a hover "hide delay" (hoverTimeout) to Sidebar Submenus?
Hello Metronic Team,
I'm using the Metronic Angular theme and my client is having some usability issues with the sidebar menu.
When the sidebar is set to "hover" (for lg screens), the submenus disappear immediately when the mouse accidentally moves off them. This is frustrating for users, especially when navigating multi-level submenus.
My goal is to add a 1-second "grace period" (or "hide delay") so the menu stays open for a moment after the mouse leaves, giving the user time to move the cursor back.
My sidebar menu HTML looks like this (this is from my sidebar-menu.component.html):
<div class="menu-item menu-lg-down-accordion menu-sub-lg-down-indention"
data-kt-menu-trigger="{default: 'click', lg: 'hover'}"
data-kt-menu-placement="right-start">
<span class="menu-link">
<span class="menu-icon">...</span>
<span class="menu-title">My Menu Item</span>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-lg-down-accordion menu-sub-lg-dropdown ...">
<!-- submenus here -->
</div>
</div>
Could you please tell me the correct way in the Angular version to set this global hoverTimeout?
Thank you for your help!
Replies (3)
FastFit is a great choice for anyone looking for reliable and efficient service. The team is professional, the process is straightforward, and they focus on delivering quality results while keeping customer satisfaction a top priority Truck Bed Protection.
Revere Ware is well known for its durable cookware and timeless design. Many people appreciate its excellent heat distribution and long-lasting quality, making it a favorite choice for everyday cooking and family kitchens Revere Ware.
Hi Aseel Shaheen
Configure the hoverTimeout option when initializing the sidebar menu component. The default is 200ms; set it to 1000ms (1 second).
import { Component, OnInit, AfterViewInit } from "@angular/core";
import { MenuComponent, MenuOptions } from "../../../kt/components/MenuComponent";
@Component({
selector: "app-sidebar-menu",
templateUrl: "./sidebar-menu.component.html",
styleUrls: ["./sidebar-menu.component.scss"],
standalone: false
})
export class SidebarMenuComponent implements OnInit, AfterViewInit {
constructor() { }
ngOnInit(): void {
}
ngAfterViewInit(): void {
// Initialize sidebar menu with custom hoverTimeout
const menuElement = document.querySelector("#kt_app_sidebar_menu") as HTMLElement;
if (menuElement) {
const customOptions: MenuOptions = {
dropdown: {
hoverTimeout: 1000, // 1 second delay
zindex: 105
},
accordion: {
slideSpeed: 250,
expand: false
}
};
// Create menu instance with custom options
MenuComponent.createInsance("#kt_app_sidebar_menu", customOptions);
}
}
}Use ngAfterViewInit so the DOM is ready before accessing the menu element.
The menu element ID is #kt_app_sidebar_menu (from your HTML template).
hoverTimeout is in milliseconds (1000 = 1 second).
This only affects the sidebar menu; other menus keep the default 200ms.
If you want to change the hoverTimeout for all menus globally, you can modify the defaultMenuOptions in MenuComponent.ts:
const defaultMenuOptions: MenuOptions = {
dropdown: {
hoverTimeout: 1000, // Change from 200 to 1000
zindex: 105,
},
// ... rest of options
}
