Javascript, CSS, HTML - Click screen to make dropdown menu disappear

Question

In my project, I have a button where users can click and a drop down menu appears. Now I want to implement that when I click anywhere inside the window, the drop down box disappears. Does anybody know how to implement this functionality? Thank you.

Here is my code : HTML :

<img onclick="hamburgerIconFunction()" width="43px" class="hamburger-icon" src="{% static 'hamburgericon.png' %}" alt="Image of a hamburger icon">
<div class="hamburgerBox-container">
       <img class="hamburgerBox" src="{% static 'hamburgerBox.png' %}" alt="Image of a navbar popup box">
</div>

CSS:

.hamburger-icon {
    position: absolute;
    display: none;
    right: 20px;
    bottom:16px;
}

.hamburgerBox {
    display: none;
    position: absolute;
    right: 26px;
    top: 58px;
}


@media screen and (max-width: 991px) {
    .nav-btn {
        display: none;
    }

    .hamburger-icon {
        display: inline;
    }
}

@media screen and (min-width: 992px) {
    .hamburgerBox {
        width: 0px;
        height: 0px;
    }
}

JS:

  function hamburgerIconFunction() {
    hamburgerBox = document.getElementsByClassName("hamburgerBox") [0];
    hamburgerBox.style.display = 'inline';
  }

Answer 1

I think that the blur event could give you the behavior you are looking for. When you click the icon, it will have focus. When you click anywhere else, it will lose focus, initiating the blur event. For the current way you are doing things, something like this would maybe work:

const hamburger = document.querySelector('.hamburger-icon');
hamburger.addEventListener('blur', () => {
  document.querySelector('.hamburgerBox').style.display = none;
});

Alternately, you could bind another click event to the document body or the document itself that would do the same thing.

That being said, what you really want to be doing is trying to keep a separation of concerns, which in this case means keeping your CSS out of your JS and your JS out of your HTML. Instead of using the event attributes in HTML, add event listeners for the element in your JS file. Instead of changing CSS properties in your JS, change the class that is applied to the element. In this case, that would look like adding and removing a class called ".is-visible" or something like that to the dropdown menu in your events.

Check out this thread where it talks about removing classes when the screen is clicked: click anywhere on the screen to remove class

Here are some other helpful resources for you regarding hamburger button menus:

• https://css-tricks.com/three-line-menu-navicon/
• https://css-tricks.com/line-menu-icon-menu/
• https://tubemint.com/hamburger-menu-html-css-javascript/
• https://medium.com/@heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793

Answer 2

One way to achieve the result, using pure Javascript, is to hide the menu when a user click on the document object and stop event bubbling on click for the hamburger-icon element, like this:

// Intercept click on the hamburger icon, stop the event bubbling and show the hamburger box.
document.getElementById( 'hamburger-icon' ).addEventListener( 'click', function( event ) {
    event.stopPropagation();
    document.getElementById( 'hamburgerBox' ).style.display = 'inline';
});

// Intercept the click on the document and hide the hamburger box. Having stopped the bubbling, the click on the hamburger icon will never reach this listener.
document.addEventListener( 'click', function() {
    document.getElementById('hamburgerBox').style.display = 'none';
});

Note I've added the ids to the element to make javascript reach them easily, so in your code you have to put them as well in order for the code to work.