DEV Community

Discussion on: Let's build a responsive navbar and hamburger menu using HTML, CSS, and Javascript.

Collapse
 
guin profile image
Angelika Jarosz

This is a cool solution i just tried out in my own code! Thanks for sharing! The only downside is once the menu is open, you have to click outside the hamburger to close it which from a user experience perspective could confuse a user for a second/ make them think your site has a bug. Unless you also have a work around to this that i am missing.

Collapse
 
theodor_sirmanoff_090deae profile image
Theodor Sirmanoff • Edited

why not this about leaving it go home :) :
=== CSS ===
.show {

display: block; /* Show navbar when class 'show' is added */

}

=== JS ===
you toggle it first with showNavbar(), then :

function hideNavbar() {

const navbar = document.getElementById('navbar');

navbar.classList.remove('show');

}
const navbar = document.getElementById('navbar');

navbar.addEventListener('mouseleave', hideNavbar);