Dropdown menus with click and hover triggers, positioned automatically
Overview
The Hovermenu component creates dynamically-positioned dropdown menus attached to a trigger element.
It supports click (default) and mouseenter triggers,
optional titles, optional backdrop (backdrop), and open/close lifecycle callbacks.
Access it via the global: Sadrazam.Hovermenu
// Configuration options (from Hovermenu.help())selector// Target element (Element or CSS selector). Required.trigger// Event type: 'click' (default) or 'mouseenter'backdrop// Show backdrop overlay. Default: falsetitle// Menu title HTML. Default: nullcontent// Function returning HTML string or Element. Required.openFunc// Callback before opening. Optional.closeFunc// Callback before closing. Optional.
1. Basic Click Dropdown
Default trigger is click. Click the button to open, click again to close.
The content function returns an HTML string for the menu body.
With trigger: 'mouseenter', the menu opens on hover and stays open while
the cursor remains over the trigger or menu (hover protection). Clicking the trigger also closes it.
The selector option accepts both a CSS selector string and a direct
Element reference. This is useful when you already have a DOM reference.
DOM Element
selector: document.querySelector(...)
const el = document.querySelector('#element-ref');
new Sadrazam.Hovermenu({
selector: el,
content: () => `
<ul class="menu-list">
<li><i class="ph-light ph-check"></i> Passed as Element</li>
<li><i class="ph-light ph-check"></i> Not a string selector</li>
</ul>`
});
7. Content From DOM Element
The content function can return a DOM Element
instead of a string. Child nodes are moved into the menu while open and restored when closed.
The callback receives the trigger element and the Hovermenu instance as arguments.
Documents
Images
Music
Videos
DOM Content
content: () => element
// Hidden source element in the HTML// <div id="dom-content-source" style="display:none">...</div>const source = document.querySelector('#dom-content-source');
new Sadrazam.Hovermenu({
selector: '#dom-content',
content: (triggerEl, instance) => source
});
8. Different Trigger Elements
Any element can be a trigger. Below are examples with an avatar button, a badge, and an icon-only button.
The menu auto-positions below the trigger (or above if there is not enough space below).
Use Hovermenu.remove(element) to programmatically close a hovermenu.
Use Hovermenu.destroy(element) or instance.destroy()
for full teardown: closes the menu, removes the trigger listener, and clears the instance reference.
Pass any element inside the trigger or the trigger itself. It finds the nearest
[data-hovermenu-id] ancestor.
Use Hovermenu.getInstance(element) to retrieve the instance from any child element.
Auto-Close
Hovermenu.remove(el)
new Sadrazam.Hovermenu({
selector: '#auto-close',
openFunc: () => {
setTimeout(() => {
const el = document.querySelector('#auto-close');
Sadrazam.Hovermenu.remove(el);
}, 2000);
},
content: () => `<p style="padding:4px">This will close in 2 seconds...</p>`
});
10. Combined: Title + Backdrop + Hover + Callbacks
All configuration options used together. Hover to open, with a title bar,
backdrop overlay, and lifecycle callbacks logging to the console.
The component generates the following DOM structure. Styles are defined in
hovermenu.scss under the .hovermenu namespace.
<!-- Generated DOM structure -->
<div class="hovermenu" id="hovermenu-{timestamp}">
<div class="hovermenu-arrow-up"></div> <!-- or hovermenu-arrow-down -->
<div>...title HTML...</div> <!-- only if title option is set -->
<div class="hovermenu-content">
...content... <!-- from content() function -->
</div>
</div>
/* Key CSS classes */.hovermenu/* Main container: absolute, min-width 200px, bordered */.hovermenu-arrow-up/* Arrow pointing up (menu below trigger) */.hovermenu-arrow-down/* Arrow pointing down (menu above trigger) */.hovermenu-title/* Title bar with background */.hovermenu-content/* Content area with padding */