This is a solution to the challenge Intro section with dropdown navigation.
This is a challenge on the Mentor frontend website, where I was able to put into practice my knowledge with DOM manipulation, mobile menu, bubble, and dropdown menu.
In this project I focused a lot on creating the Mobile and Dropdown menu, and reviewed my knowledge with bubble which is a type of event control
MENU MOBILE:
I also created this function called clickOutside it will make the bubble effect and when the user clicks outside the dropdown menu, it will be closed, we can see in this gif:
function clickOutside(element, callback) {
const html = document.querySelector("html");
const outside = "data-outside";
if (!element.hasAttribute(outside)) {
setTimeout(() => {
html.addEventListener("click", handleOutsideClick);
});
element.setAttribute(outside, "");
}
function handleOutsideClick(event) {
if (!element.contains(event.target)) {
element.removeAttribute(outside);
setTimeout(() => {
html.removeEventListener("click", handleOutsideClick);
});
callback();
}
}
}DROPDOWN MENU:
document.querySelectorAll("[data-dropdown].active").forEach((dropdown) => {
if (dropdown === currentDropdown) return;
dropdown.classList.remove(classActive);
});Exemple:
if the click happens inside the submenu it will not be hidden, if you click outside the submenu it will be hidden, this happens if the condition below is true.
if (!dropdownButton && e.target.closest("[data-dropdown]")) return;Exemple:
