mirror of
https://github.com/imfing/hextra.git
synced 2025-06-19 09:44:16 -04:00
feat: child menu support in navbar (#695)
* feat: implement child menu support in main navbar - Added a new JavaScript file for handling dropdown functionality in the navbar. - Implemented event listeners for toggling dropdowns, closing them on outside clicks, and dismissing with the Escape key. - Updated navbar HTML to support dropdown items with children, enhancing the navigation experience. - Adjusted core script imports to include the new dropdown functionality. * chore: update menu identifiers and add missing translations for development versions * chore: update hugo stats * chore: update script name * chore: update menu item names to include arrows for external links
This commit is contained in:
61
assets/js/nav-menu.js
Normal file
61
assets/js/nav-menu.js
Normal file
@ -0,0 +1,61 @@
|
||||
(function () {
|
||||
const dropdownToggles = document.querySelectorAll(".hextra-nav-menu-toggle");
|
||||
|
||||
dropdownToggles.forEach((toggle) => {
|
||||
toggle.addEventListener("click", (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
// Close all other dropdowns first
|
||||
dropdownToggles.forEach((otherToggle) => {
|
||||
if (otherToggle !== toggle) {
|
||||
otherToggle.dataset.state = "closed";
|
||||
const otherMenuItems = otherToggle.nextElementSibling;
|
||||
otherMenuItems.classList.add("hx:hidden");
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle current dropdown
|
||||
const isOpen = toggle.dataset.state === "open";
|
||||
toggle.dataset.state = isOpen ? "closed" : "open";
|
||||
const menuItemsElement = toggle.nextElementSibling;
|
||||
|
||||
if (!isOpen) {
|
||||
// Position dropdown centered with toggle
|
||||
menuItemsElement.style.position = "absolute";
|
||||
menuItemsElement.style.top = "100%";
|
||||
menuItemsElement.style.left = "50%";
|
||||
menuItemsElement.style.transform = "translateX(-50%)";
|
||||
menuItemsElement.style.zIndex = "1000";
|
||||
|
||||
// Show dropdown
|
||||
menuItemsElement.classList.remove("hx:hidden");
|
||||
} else {
|
||||
// Hide dropdown
|
||||
menuItemsElement.classList.add("hx:hidden");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Dismiss dropdown when clicking outside
|
||||
document.addEventListener("click", (e) => {
|
||||
if (e.target.closest(".hextra-nav-menu-toggle") === null) {
|
||||
dropdownToggles.forEach((toggle) => {
|
||||
toggle.dataset.state = "closed";
|
||||
const menuItemsElement = toggle.nextElementSibling;
|
||||
menuItemsElement.classList.add("hx:hidden");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Close dropdowns on escape key
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") {
|
||||
dropdownToggles.forEach((toggle) => {
|
||||
toggle.dataset.state = "closed";
|
||||
const menuItemsElement = toggle.nextElementSibling;
|
||||
menuItemsElement.classList.add("hx:hidden");
|
||||
});
|
||||
}
|
||||
});
|
||||
})();
|
Reference in New Issue
Block a user