Auto-collapse sidebar upon clicking anywhere on the page

Question

Auto-collapse sidebar upon clicking anywhere on the page

I have a dynamic sidebar that appears when the user clicks on a hamburger button. Here is the layout:

$('#nav-toggle').click(function() {
  if($('#nav-toggle').hasClass('active')){
    $('.menu').animate({
      right: "0px"
    }, 200);
  }else{
    $('.menu').animate({
      right: "-285px"
    }, 200);
  }

});

.menu{
    right:-285px;
    height:100%;
    position: fixed;
    width: 285px;
    z-index: 1;
    background-color: #111111;
}
.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}
.menu li a{
    color:white;
}

    <div class="menu">
      <!-- Menu -->
      <ul>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Help</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>

In actuality, the menu can be opened by clicking on the #nav-toggle element and closed by clicking on the same element. I would like to give the user the ability to close the menu by clicking anywhere on the page. How can I achieve this? I attempted using e.preventDefault(); in my if statement but it did not work.

Thank you!

javascript jquery html css

Answer 1

Answer №1

If you want to add a toggle effect to your menu using jQuery, I recommend using the toggleClass method along with adding transition: .2s in the CSS for your .menu. Here is a working example:

$('#nav-toggle').click(function(e) {
  e.stopPropagation();
  $(".menu").toggleClass('bar')
});
$('body').click(function(e) {
  if ($('.menu').hasClass('bar')) {
    $(".menu").toggleClass('bar')
  }
})

.menu {
  right: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
  z-index: 1;
  background-color: #111111;
  transition: .2s
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu li a {
  color: white;
}

.bar {
  right: 0px;
}

body,
html {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="nav-toggle">Click me</button>
<div class="menu">
  <!-- Menu -->
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Answer 2

If you want to add a toggle effect to your menu using jQuery, I recommend using the toggleClass method along with adding transition: .2s in the CSS for your .menu. Here is a working example:

$('#nav-toggle').click(function(e) {
  e.stopPropagation();
  $(".menu").toggleClass('bar')
});
$('body').click(function(e) {
  if ($('.menu').hasClass('bar')) {
    $(".menu").toggleClass('bar')
  }
})

.menu {
  right: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
  z-index: 1;
  background-color: #111111;
  transition: .2s
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu li a {
  color: white;
}

.bar {
  right: 0px;
}

body,
html {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="nav-toggle">Click me</button>
<div class="menu">
  <!-- Menu -->
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Answer 3

Answer №2

Give this a shot, it will consistently remain hidden when the user clicks anywhere on the body

$(document).on('click',function(){
     if($("#nav-toggle").hasClass("active")){
          $('.menu').animate({ right: "-100%" }, 200);
      }
});

Answer 4

Give this a shot, it will consistently remain hidden when the user clicks anywhere on the body

$(document).on('click',function(){
     if($("#nav-toggle").hasClass("active")){
          $('.menu').animate({ right: "-100%" }, 200);
      }
});

Answer 5

Answer №3

One way to incorporate a parent section into your webpage is by linking a click event similar to what you did with #nav-toggle. Here's an example:

$('.parent-section').click(function() {
 if($('#nav-toggle').hasClass('active')){
  $('.menu').animate({
   right: "0px"
  }, 200);
 } else {
  $('.menu').animate({
   right: "-285px"
  }, 200);
 }

});

Alternatively, you can directly add this functionality to the body tag. However, it is recommended to utilize a section instead of the body for better organization. Hopefully, this solution will be beneficial to you :)

Answer 6

One way to incorporate a parent section into your webpage is by linking a click event similar to what you did with #nav-toggle. Here's an example:

$('.parent-section').click(function() {
 if($('#nav-toggle').hasClass('active')){
  $('.menu').animate({
   right: "0px"
  }, 200);
 } else {
  $('.menu').animate({
   right: "-285px"
  }, 200);
 }

});

Alternatively, you can directly add this functionality to the body tag. However, it is recommended to utilize a section instead of the body for better organization. Hopefully, this solution will be beneficial to you :)

Answer 7

Answer №4

I made a few adjustments to your code :

Take a look :

$('#nav-toggle').click(function(e) {
    e.stopPropagation();
$('.menu').animate({right: "0px"}, 200);
});
$(document).click(function(e){
    $('.menu').animate({right: "-285px"}, 200);
});

Check it out here on JSFiddle

Answer 8

I made a few adjustments to your code :

Take a look :

$('#nav-toggle').click(function(e) {
    e.stopPropagation();
$('.menu').animate({right: "0px"}, 200);
});
$(document).click(function(e){
    $('.menu').animate({right: "-285px"}, 200);
});

Check it out here on JSFiddle

Answer 9

Answer №5

Expanding on Gintoki's response

$('#nav-toggle').on('click', function(e) {

  e.stopPropagation();

  $(".menu").toggleClass('bar');

  $('body').one('click', function(e) {

   if ($('.menu').hasClass('bar')) {
     $(".menu").toggleClass('bar')
   }

  });

});

By removing the listener from body, it ensures that the code does not execute every time.

I'm uncertain about what would be more efficient for performance, but I have reservations about having every click on the website processed through that "if(hasClass)" condition.

Answer 10

Expanding on Gintoki's response

$('#nav-toggle').on('click', function(e) {

  e.stopPropagation();

  $(".menu").toggleClass('bar');

  $('body').one('click', function(e) {

   if ($('.menu').hasClass('bar')) {
     $(".menu").toggleClass('bar')
   }

  });

});

By removing the listener from body, it ensures that the code does not execute every time.

I'm uncertain about what would be more efficient for performance, but I have reservations about having every click on the website processed through that "if(hasClass)" condition.

Answer 11

Answer №6

$('#nav-toggle').click(function(e) {
  e.stopPropagation();
  $(".menu").toggleClass('bar')
});
$('body').click(function(e) {
  if ($('.menu').hasClass('bar')) {
    $(".menu").toggleClass('bar')
  }
})

.menu {
  right: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
  z-index: 1;
  background-color: #111111;
  transition: .2s
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu li a {
  color: white;
}

.bar {
  right: 0px;
}

body,
html {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="nav-toggle">Click me</button>
<div class="menu">
  <!-- Menu -->
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Answer 12

$('#nav-toggle').click(function(e) {
  e.stopPropagation();
  $(".menu").toggleClass('bar')
});
$('body').click(function(e) {
  if ($('.menu').hasClass('bar')) {
    $(".menu").toggleClass('bar')
  }
})

.menu {
  right: -285px;
  height: 100%;
  position: fixed;
  width: 285px;
  z-index: 1;
  background-color: #111111;
  transition: .2s
}

.menu ul {
  border-top: 1px solid #636366;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu li {
  border-bottom: 1px solid #636366;
  font-family: 'Open Sans', sans-serif;
  line-height: 45px;
  padding-bottom: 3px;
  padding-left: 20px;
  padding-top: 3px;
}

.menu li a {
  color: white;
}

.bar {
  right: 0px;
}

body,
html {
  height: 100%;
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="nav-toggle">Click me</button>
<div class="menu">
  <!-- Menu -->
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</div>

Auto-collapse sidebar upon clicking anywhere on the page

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Label text facing positioning difficulties

How can I retrieve the attribute value in a JSP request using jQuery AJAX?

Applying position: absolute in HTML/CSS to lock parent and child elements in

"Pushing elements into an array does not function properly within a promise

The Ajax request fails to pass the value to the controller

Having trouble with accessing an element that contains both onclick and text attributes in Selenium Webdriver?

The process of implementing server-side rendering for React Next applications with Material-ui using CSS

Substituting Div containers with elements imported from external files

What's the solution for aligning these progress bars side by side if floating them doesn't produce the desired result?

Backstretch.js experiencing issues with element functionality, but functioning correctly with body element

Maintaining the original layout upon refreshing the page

"Need to refresh localStorage in VueJS after navigating back with this.$router.go(-1)? Here's how

Position the Bootstrap icon to float to the far right

What is the best way to enable a DOM element's height to be resized?

Incorporating Material-UI with React Searchkit for a seamless user experience, featuring

What is the best way to fetch images from a JSON object in a React application?

Encountering a surprising token error while running a node.js application with a classic example

Avoid cascading of the 'display' property in JavaScript styling to prevent inheritance

Struggling to properly align a div on top of an image

The result of Document.getElementById can show as "undefined" despite the presence of the element