Question 201295 in Html Question posted in
Some basic documentation can be found here.

Html – click outside of container to close the hamburger menu

I want to have a very simple hamburger menu. I’m using jQuery to toggle it to open and close when the hamburger is clicked.hamburger menu open

I implemented the following js code but I only get the menu to hide when I click on the hamburger menu again

this is my implementation in js

$(document).ready(function(){
  
  $('.menu .btn').on('click', function() {
    $('#nav').toggleClass('menu_show');
  });    
  
});

this is my implementation in css

/* Menu hamburguesa */

@media only screen and (max-width: 768px) {
    * {text-decoration: none;
        transition: all 0.3s;
        transform: all 0.3s;
      
      }
      body {padding: 50px;}
      li {list-style: none;}
      
      .menu {
        display: inline-block;
        position: relative;
        z-index: 100;
        
        .btn {
          display: block;
          cursor: pointer;
          padding: 5%;
          
          
          .bar {
            width: 30px;
            height: 5px;
            background: #ffffff;
            margin-bottom: 5px;
          }
          .bar:last-child {margin-bottom: 0px;}
        }
        /* .bar:hover { 
            background: #F16984;}
         */
        nav {
          position: absolute;
          left: 10px;
          background-color:#231f20;
          border: 3px solid #231f20;
          visibility: hidden;
          opacity: 0;
          
          -webkit-transform: scale(0.7);
          
          a {
            font-family: 'Exo';
            color: #dfdfdf;
            padding: 5px 15px;
            display: block;
            border-bottom: 1px solid #ddd;
            white-space: nowrap;
            font-size: 20px;
          }

          li:first-child a {color: #F16984;}
          li:last-child a {border-bottom: 0px;}
          a:hover {color: #F16984;}

          
        }
        
        .menu_show {
          visibility: visible;
          opacity: 1;
          -webkit-transform: scale(1);
          
        }
      }
  }

this is my implementation in html

<div class="menu visible-xs">
            <a href="https://imco.org.mx/" class="pull-right"><img style="height:50px; padding-left: 10px; padding-top: 0dvh;" src="images/logo_imco_blanco_transparente.png" alt=""></a>
            <div class="btn">
              <div class="bar"></div>
               <div class="bar"></div>
              <div class="bar"></div>
            </div>
            
            <nav id="nav">
              <ul>
                <li class="{{ currentMenu['home'] }}"><a ng-href="#!/">Inicio</a></li>
                    <li class="{{ currentMenu['career'] }}"><a ng-href="#!/carreras">Busca</a></li>
                    <li class="{{ currentMenu['compare'] }}"><a ng-href="#!/compara">Compara</a></li>
                    <li class="{{ currentMenu['10'] }}"><a ng-href="#!/las-10-mas">Las 10 m&aacute;s</a></li>
                    <li class="{{ currentMenu['map'] }}"><a ng-href="#!/mapa">Universidades</a></li>
                    <li class="{{ currentMenu['methodology'] }}"><a ng-href="#!/metodologia">Metodolog&iacute;a</a></li>
              </ul>
            </nav>
            
        </div>
Tags:

2

Answers


  1. 0

    You can add the functionality you are looking for by adding a listener to body and stopping event propagation

    $(document).ready(function(){
  
  $('.menu .btn').on('click', function(e) {
    $('#nav').toggleClass('menu_show');
    e.stopPropagation();
  });    
  $(document.body).on('click'), function(e) {
    $('#nav').removeClass('menu_show');
  });
});
    Login or Signup to reply.
  2. 0

    This code closes the nav given the click was done on an element out of the nav element…
    I have always used it in plain javascript but i’m sure u can change its syntax to Jquery

      var isnavopen = false;
  const navclose = function(e){
    if(isnavopen){
      let _target = e.target;
      while(_target && _target.id != "nav"){
        _target = _target.parentElement;
      }
      //if _target, then target element is in nav element
      if (!_target) {
        /*give an id to menu or element that toggles nav on click */
        let menu = document.getElementById("menu"); 
        menu.click(); /* activate the click event
      }
    }
  }
  document.body.addEventListener('click', navclose);
  document.getElementById('menu').addEventListener('click',()=>{
     isnavopen = !isnavopen;
  });
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search