Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery close on click outside

Tags:

html

jquery

click

i have made a side navigation menu which slides from left to right on the click of a button.

$(document).ready(function(){
  $("#nav-toggle").click(function(){
    $("#page").toggleClass("margin");
  });
});

when the '#nav-toggle' button is clicked the '#page' margin increases from 0px to 600px.

    .margin {
margin-left:600px;width:380px;overflow-x:hidden
}


<div id="side-menu">

<nav>
    <a class="nav-links" href="#home">home</a>
    <a class="nav-links" href="#about">about</a>
    <a class="nav-links" href="#contact">contact</a>
</nav><!-- end of nav  -->

how would i close the menu by clicking outside of it.

like image 297
sam Avatar asked Sep 12 '25 05:09

sam


1 Answers

$('body').on('click',function(event){
   if(!$(event.target).is('#nav-toggle')){
     $("#page").removeClass("margin");
   }
});
like image 146
Mohammad Adil Avatar answered Sep 13 '25 20:09

Mohammad Adil