37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
let menus = document.querySelectorAll('a[data-group]'),
|
|
subMenu = document.getElementById("subMenu"),
|
|
activeSubMenuGroup = [
|
|
document.querySelector(`div.group[data-group]`),
|
|
document.querySelector(`a[data-group]`)
|
|
];
|
|
subMenuGroups = [];
|
|
|
|
function openMenu(event){
|
|
activeSubMenuGroup[0].classList.remove("open");
|
|
activeSubMenuGroup[1].classList.remove("open");
|
|
activeSubMenuGroup[0] = subMenuGroups[this.dataset.group];
|
|
activeSubMenuGroup[1] = this;
|
|
|
|
this.classList.add("open");
|
|
subMenu.classList.add("open");
|
|
activeSubMenuGroup[0].classList.add("open");
|
|
}
|
|
|
|
function keepMenuOpen(event){
|
|
subMenu.classList.add("open");
|
|
activeSubMenuGroup[1].classList.add("open")
|
|
}
|
|
|
|
function closeMenu(event){
|
|
subMenu.classList.remove("open");
|
|
activeSubMenuGroup[1].classList.remove("open");
|
|
}
|
|
|
|
subMenu.addEventListener("mouseenter", keepMenuOpen);
|
|
subMenu.addEventListener("mouseleave", closeMenu);
|
|
|
|
for(let m of menus){
|
|
subMenuGroups[m.dataset.group] = document.querySelector(`div.group[data-group="${m.dataset.group}"]`);
|
|
m.addEventListener("mouseenter", openMenu);
|
|
m.addEventListener("mouseleave", closeMenu);
|
|
} |