Scribd
Upload
16 views2 pages

Codigo para hacer un mega menu

Uploaded by

israel.hssk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
16 views2 pages

Codigo para hacer un mega menu

Uploaded by

israel.hssk
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

Este codigo hace un menu requiere la siguiente estructura

h-nav
h-nav-item

document.addEventListener('DOMContentLoaded', function() {

// Get all elements with class 'h-nav-item-link'


const links = document.querySelectorAll('.h-nav-item-link');

// Function to add the 'open' class to the parent element


const toggleParentClass = (event) => {
const parent = event.target.closest('.h-nav-item');
if (parent) {
// Remove the 'open' class from siblings of the parent element
const siblings = parent.parentNode.children;
for (let i = 0; i < siblings.length; i++) {
if (siblings[i] !== parent &&
siblings[i].classList.contains('open')) {
siblings[i].classList.remove('open');
}
}
// Add or remove the 'open' class from the parent element
parent.classList.toggle('open');
}
};

// Function to remove the 'open' class if clicked outside the menu


const removeParentClass = (event) => {
const parents = document.querySelectorAll('.h-nav-item.open');
for (let i = 0; i < parents.length; i++) {
// If the click was inside the menu, do nothing
if (event.target.closest('.h-nav-item') === parents[i]) {
return;
}
}
// If the click was outside the menu, remove the 'open' class from the
corresponding elements
for (let i = 0; i < parents.length; i++) {
parents[i].classList.remove('open');
}
};

// Add 'click' events to each link


for (let i = 0; i < links.length; i++) {
links[i].addEventListener('click', toggleParentClass);
}

// Add 'click' event to the document to detect clicks outside the menu
document.addEventListener('click', removeParentClass);

//Menu Mobile
const navbarToggler = document.querySelector(".h-navbar-toggler");
const nav = document.querySelector(".h-nav");
let navHeight = 0;
navbarToggler.addEventListener("click", () => {
const computedStyles = window.getComputedStyle(nav);
const isNavHidden = computedStyles.getPropertyValue('display') ===
'none' || computedStyles.getPropertyValue('height') === '0px';

if (isNavHidden) {
// Show the navigation menu and animate its opening
nav.style.display = "block";
navHeight = nav.scrollHeight;
nav.style.height = "0";
setTimeout(() => {
nav.style.height = navHeight + "px";
// Add an event listener to set the height to "auto" when
the animation is complete
nav.addEventListener("transitionend", () => {
nav.style.height = "auto";
nav.removeEventListener("transitionend");
});
}, 10);
} else {
// Animate the closing of the navigation menu and then hide it
nav.style.height = navHeight + "px";
setTimeout(() => {
nav.style.height = "0";
setTimeout(() => {
nav.style.display = "none";
}, 200);
// Add an event listener to set the height to "auto" when
the animation is complete
nav.addEventListener("transitionend", () => {
nav.style.height = "auto";
nav.removeEventListener("transitionend");
});
}, 10);
}
});

//If the size is greater than 992px, the nav styles are removed
function removeNavStyles() {
if (window.innerWidth > 992) {
nav.removeAttribute("style");
}
}
window.addEventListener("resize", removeNavStyles);

});

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy