
Snap Dropdown, native javascript, lots of sweat so please feedback ;)
Design comparison
Solution retrospective
So. This took me crazy long and not because of any css or html challenges but because i'm really sh*t at javascript so it seems. I know im not good at js, but thought this would be easier because it's 'only' a junior challenge.
Probably i could have gone an easier route by just adding/toggle a active class on a parent list item and style everything based on that class, but because tailwind is my go to at this moment i really wantend to switch classes based on a event listener.
So i ended up doing this (after trying lots of things).
const toggles = document.querySelectorAll('.js-toggle');
// Toggle Dropdowns
toggles.forEach(toggle => {
toggle.addEventListener('click', function (e) {
// If the clicked item already is open then close it and rotate svg back
if (toggle.querySelector('ul.menu').classList.contains('grid')) {
toggle.querySelector('ul.menu').classList.remove('grid');
toggle.querySelector('ul.menu').classList.add('hidden')
toggle.querySelector('svg').classList.remove('rotate-180')
} else {
// Close all submenus forst before opening the cliked one.
toggles.forEach(element => {
element.querySelector('ul.menu').classList.remove('grid');
element.querySelector('ul.menu').classList.add('hidden');
element.querySelector('svg').classList.remove('rotate-180');
});
// Open submenu
toggle.querySelector('ul.menu').classList.remove('hidden');
toggle.querySelector('ul.menu').classList.add('grid');
toggle.querySelector('svg').classList.add('rotate-180')
}
});
});
I hope you can give me some feedback so i can improve on this area.
Something else i'm always struggle with are mobile navigations. In the old day's i often made 2 navigations. One for dekstop and one for mobile. Then i would just show and hide these based on media queries. But these day's i try to convert one nav to desktop and mobile. Is this the way to go, or are you guys (and girls) still doing two navs?
Lastly i didn't make it pixel perfect because my focus was js. Will make thing pixel perfect when i upgrade to pro ;)
Community feedback
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord