Comment faire pour fermer le menu hamburger en cliquant en dehors de celui-ci

Question

J'essaie de fermer mon menu hamburger en cliquant en dehors du menu. À l'heure actuelle, la seule façon de fermer le menu hamburger est de cliquer sur l'icône X. Je voudrais toujours que le menu soit en mesure de fermer en cliquant sur l'icône, mais aussi avoir la possibilité de le fermer en cliquant en dehors du menu. Est-ce que quelqu'un a des solutions?

jsFiddle - https://jsfiddle.net/1h3eoewa/

jQuery(document).ready(function() { 
 
    jQuery(".submenu").slideUp("fast"); 
 
    jQuery(".menutoggle").click(function() { 
 
    var id = jQuery(this).attr("id").replace("toggle", "submenu"); 
 
    jQuery("#" + id).slideToggle("fast"); 
 
    }); 
 

 
    jQuery("#hamburger-nav-icon").click(function() { 
 
    jQuery(this).toggleClass("open"); 
 
    jQuery("body").css("overflow", "hidden"); 
 
    if (jQuery("#hamburger-menu-cover").css("opacity") == "0") { 
 
     jQuery("#hamburger-menu-cover").css("opacity", "1"); 
 
     jQuery("#hamburger-menu-cover").fadeIn(300).css("display", "table"); 
 
     jQuery("body").css("overflow", "hidden"); 
 
    } else { 
 
     jQuery("#hamburger-menu-cover").css("opacity", "0"); 
 
     jQuery("#hamburger-menu-cover").fadeOut(300).css("display", "none"); 
 
     jQuery("body").css("overflow", "visible"); 
 
    } 
 
    }); 
 
});

/*-------------------------------------------------------------- 
 
## Hamburger Menu 
 
--------------------------------------------------------------*/ 
 
#hamburger-menu-cover { 
 
    z-index: 5; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(255, 255, 255, 0.9); 
 
    position: fixed; 
 
    font-size: 1.5em; 
 
    text-align: center; 
 
    right: 0px; 
 
    top: 0px; 
 
    opacity: 0; 
 
    display: none; 
 
    overflow-y: scroll; 
 
    -webkit-overflow-scrolling: touch; 
 
    overflow: hidden; 
 
} 
 
.hamburger-menu { 
 
    background: #fff; 
 
    width: 432px; 
 
    height: 100%; 
 
    border-right: 1px solid #808080; 
 
    position: fixed; 
 
    top: 0px; 
 
    overflow-y: scroll; 
 
    -webkit-overflow-scrolling: touch; // mobile safari 
 
} 
 
.hamburger-menu-container { 
 
    margin-left: 33px; 
 
    margin-top: 100px; 
 
    padding-right: 32px; 
 
    padding-bottom: 40px; 
 
    overflow-y: scroll; 
 
    -webkit-overflow-scrolling: touch; // mobile safari 
 
} 
 
.hamburger-menu-links li { 
 
    list-style: none; 
 
    font-family: 'freightlight'; 
 
    font-size: 36px; 
 
    display: block; 
 
    line-height: 57px; 
 
    font-style: italic; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    text-align: justify; 
 
} 
 
.hamburger-menu-links li a { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
.hamburger-menu-links li a:hover { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
.hamburger-menu-links li a:active { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
.hamburger-menu-links li a:visited { 
 
    text-decoration: none; 
 
    color: #000; 
 
} 
 
.hamburger-menu-links ul { 
 
    border-bottom: 1px solid #808080; 
 
    padding-bottom: 30px; 
 
} 
 
.submenu li { 
 
    font-size: 16px; 
 
    font-family: 'Raleway', sans-serif; 
 
    line-height: 36px; 
 
    font-weight: 600; 
 
    letter-spacing: 2px; 
 
    font-style: normal; 
 
} 
 
.hamburger-menu-social-links h3 { 
 
    margin-left: 40px; 
 
    padding-right: 32px; 
 
    margin-top: 47px; 
 
    padding-bottom: 0px; 
 
    list-style: none; 
 
    font-family: 'freightlight'; 
 
    font-size: 18px; 
 
    display: block; 
 
    font-style: italic; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
    text-align: justify; 
 
    letter-spacing: 0px; 
 
} 
 
.hamburger-menu-social-links { 
 
    padding-right: 0px; 
 
    letter-spacing: 12px; 
 
} 
 

 
#hamburger-nav-icon { 
 
    z-index: 20; 
 
    width: 50px; 
 
    height: 35px; 
 
    position: relative; 
 
    margin: 35px 30px; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .5s ease-in-out; 
 
    -moz-transition: .5s ease-in-out; 
 
    -o-transition: .5s ease-in-out; 
 
    transition: .5s ease-in-out; 
 
    cursor: pointer; 
 
} 
 

 
#hamburger-nav-icon span { 
 
    display: block; 
 
    position: absolute; 
 
    height: 5px; 
 
    width: 40px; 
 
    background: #000; 
 
    opacity: 1; 
 
    left: 0; 
 
} 
 

 
/* Icon 3 */ 
 

 
#hamburger-nav-icon span:nth-child(1) { 
 
    top: 0px; 
 
} 
 

 
#hamburger-nav-icon span:nth-child(2), #hamburger-nav-icon span:nth-child(3) { 
 
    top: 12px; 
 
} 
 

 
#hamburger-nav-icon span:nth-child(4) { 
 
    top: 24px; 
 
} 
 

 
#hamburger-nav-icon.open span:nth-child(1) { 
 
    top: 8px; 
 
    width: 0%; 
 
    left: 50%; 
 
} 
 

 
#hamburger-nav-icon.open span:nth-child(2) { 
 
    -webkit-transform: rotate(45deg); 
 
    -moz-transform: rotate(45deg); 
 
    -o-transform: rotate(45deg); 
 
    transform: rotate(45deg); 
 
} 
 

 
#hamburger-nav-icon.open span:nth-child(3) { 
 
    -webkit-transform: rotate(-45deg); 
 
    -moz-transform: rotate(-45deg); 
 
    -o-transform: rotate(-45deg); 
 
    transform: rotate(-45deg); 
 
} 
 

 
#hamburger-nav-icon.open span:nth-child(4) { 
 
    top: 8px; 
 
    width: 0%; 
 
    left: 50%; 
 
} 
 
#toggle1, #toggle2, #toggle4, #toggle7, #toggle8 { 
 
    font-size: 12px; 
 
    padding-left: 40px; 
 
    padding-top: 25px; 
 
    display: inline; 
 
    position: absolute; 
 
    color: #B2B2B2; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="hamburger-nav-icon"> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
    <span></span> 
 
</div> 
 
<div id="hamburger-menu-cover"> 
 
    <div class="hamburger-menu"> 
 
    <div class="hamburger-menu-container"> 
 
     <div class="hamburger-menu-links"> 
 
     <ul> 
 
      <li><a href="#">Item 1<i class="fa fa-ellipsis-h menutoggle" id="toggle1" aria-hidden="true"></i></a></li> 
 
      <div class="submenu" id="submenu1"> 
 
      <li><a href="#">Sub Item 1</a></li> 
 
      <li><a href="#">Sub Item 2</a></li> 
 
      <li><a href="#">Sub Item 3</a></li> 
 
      <li><a href="#">Sub Item 4</a></li> 
 
      </div> 
 
      <li><a href="#">Item 2<i class="fa fa-ellipsis-h menutoggle" id="toggle2" aria-hidden="true"></i></a></li> 
 
      <div class="submenu" id="submenu2"> 
 
      <li><a href="#">Sub Item 1</a></li> 
 
      <li><a href="#">Sub Item 2</a></li> 
 
      <li><a href="#">Sub Item 3</a></li> 
 
      <li><a href="#">Sub Item 4</a></li> 
 
      </div> 
 
      <li><a href="#">Item 3</a></li> 
 
      <li><a href="#">Item 4<i class="fa fa-ellipsis-h menutoggle" id="toggle4" aria-hidden="true"></i></a></li> 
 
      <div class="submenu" id="submenu4"> 
 
      <li><a href="#">Sub Item 2</a></li> 
 
      <li><a href="#">Sub Item 3</a></li> 
 
      <li><a href="#">Sub Item 4</a></li> 
 
      </div> 
 
      <li><a href="#">Item 5</a></li> 
 
      <li><a href="#">Item 6</a></li> 
 
      <li><a href="#">Item 7<i class="fa fa-ellipsis-h menutoggle" id="toggle7" aria-hidden="true"></i></a></li> 
 
      <div class="submenu" id="submenu7"> 
 
      <li><a href="#">Sub Item 1</a></li> 
 
      <li><a href="#">Sub Item 2</a></li> 
 
      <li><a href="#">Sub Item 3</a></li> 
 
      <li><a href="#">Sub Item 4</a></li> 
 
      </div> 
 
      <li><a href="#">Item 8<i class="fa fa-ellipsis-h menutoggle" id="toggle8" aria-hidden="true"></i></a></li> 
 
      <div class="submenu" id="submenu8"> 
 
      <li><a href="#">Sub Item 1</a></li> 
 
      <li><a href="#">Sub Item 2</a></li> 
 
      <li><a href="#">Sub Item 3</a></li> 
 
      </div> 
 
     </ul> 
 
     </div> 
 
     <div class="hamburger-menu-social-links"> 
 
     <h3>Social</h3> 
 
     <a href="#" target="blank" title="twitter"> 
 
<img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-twitter.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-twitter.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-twitter.png'" /></a> 
 
     <a href="#" target="blank" title="Facebook"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-facebook.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-facebook.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-facebook.png'" /></a> 
 
     <a href="#" target="blank" title="Pinterest"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-pinterest.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-pinterest.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-pinterest.png'" /></a> 
 
     <a href="#" target="blank" title="Instagram"> 
 
<img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-instagram.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-instagram.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-instagram.png'" /> 
 
</a> 
 
     <a href="#" target="blank" title="Snapchat"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-snapchat.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-snapchat.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-snapchat.png'" /></a> 
 
     <a href="#" target="blank" title="Youtube"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-youtube.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-youtube.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-youtube.png'" /></a> 
 
     <a href="#" target="blank" title="Bloglovin"><img src="<?php echo get_template_directory_uri(); ?>/images/hamburger-bloglovin.png" border="0" onmouseover="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-hover-bloglovin.png'" onmouseout="this.src='<?php echo get_template_directory_uri(); ?>/images/hamburger-bloglovin.png'" /> 
 
</a> 
 
     </div> 
 

 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

Fondamentalement, ajoutez un événement de clic sur lui-même body, et assurez-vous juste ce que vous ne voulez pas déclencher les blocs proches cliquez sur les événements avec e.stopPropagation(). Appliquez-les simplement lorsque vous les ouvrez et supprimez-les lorsque vous les fermez.

Vous pouvez l'ajouter quelque chose comme ceci:

jQuery(document).ready(function() { 
    jQuery(".submenu").slideUp("fast"); 
    jQuery(".menutoggle").click(function(){ 
    var id = jQuery(this).attr("id").replace("toggle","submenu"); 
    jQuery("#" + id).slideToggle("fast");  
    }) 


const bodyClick = function() { jQuery('#hamburger-nav-icon').click() }; 

jQuery('#hamburger-nav-icon').click(function() { 
    jQuery(this).toggleClass('open'); 
     jQuery('body').css('overflow','hidden'); 
    jQuery('.#hamburger-menu').click(function (e) { e.stopPropagation(); }); 
    if (jQuery('#hamburger-menu-cover').css('opacity') == '0') { 
     jQuery('#hamburger-menu-cover').css('opacity', '1'); 
     jQuery('#hamburger-menu-cover').fadeIn(300).css('display', 'table'); 
     jQuery('body').css('overflow','hidden').on('click', bodyClick); 
    } else { 
     jQuery('#hamburger-menu-cover').css('opacity', '0'); 
     jQuery('#hamburger-menu-cover').fadeOut(300).css('display', 'none'); 
     jQuery('body').css('overflow','visible').off('click', bodyClick); 
    } 
    }); 
}); 

ne peut pas être parfait, mais devrait vous donner une idée de ce qu'il faut faire.

Answer 2

Basé sur @samanime réponse, vous pouvez aussi faire quelque chose comme ça, qui vérifie pour chaque clic sur le document en cours et permet de basculer votre menu burger lorsque la destination du clic est pas le menu hamburger:

jQuery('document').click(function(e) { 
    var elem = jQuery('.hamburger-menu'); 

    if(!elem.is(e.target)) { 
     elem.toggle(); // this has to be the code to collapse the burger menu 
    } 
}); 

Answer 3

Vous devez le fermer sur un clic n'importe où dans le document, mais le menu.

$(document).click(function(e) { 
    if ($(this).parents('#hamburger-menu-cover')) { 
    return; 
    } 
    // code to close the menu 
});