how to create an auto hide sidebar

Question

I am trying to generate a sidebar which hides automatic by clicking every other things except the sidebar (with js or css).

my code is:

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}
</script>

...

<div id="mySidenav" class="sidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

and css is :

<style>
.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
</style>

i used HTML, JavaScript, and CSS

thanks

Possible duplicate of [Use jQuery to hide a DIV when the user clicks outside of it](https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it) — Cody MacPixelface, Nov 11 '19 at 12:22

score 4 · Accepted Answer · answered Nov 11 '19 at 12:22

Try below solution.

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
}

window.addEventListener('click', function(e){   
  if (!document.getElementById('mySidenav').contains(e.target) && !document.getElementById('myMenu').contains(e.target)){
    // Clicked in box
   document.getElementById("mySidenav").style.width = "0px";  
  } else{
   
 // document.getElementById("mySidenav").style.width = "0px";
  }
});

</script>


<div id="mySidenav" class="sidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<span style="font-size:30px;cursor:pointer" id="myMenu" onclick="openNav()">&#9776; open</span>

This is perfect. Needed a simple solution to iterate on for my use case. Thank you! — Kevin Grimm, Jun 06 '22 at 02:44

score 0 · Answer 2 · answered Nov 11 '19 at 12:15

0

1) Add a click event to your body

2) Check whether the target of the click has the class '.sidenav', or if it has a parent with that class.

3) If not, hide the sidebar, for example by setting 'display' to 'none'

answered Nov 11 '19 at 12:15

Tess

140
10

I think your answer is right. but I can`t write your idea – mehnet ali Nov 11 '19 at 12:20
I think if you take a look at the other answers, for example the one from Albert Allagulov or Vishal modi, you will find implementations that do what I have described. I would advise that you try to understand what happens, though, and try to determine where in the code each step happens, so that it's easier for you to change the code as you need. – Tess Nov 11 '19 at 12:33

score 0 · Answer 3 · answered Nov 11 '19 at 12:21

you can try something like this

<style>
    #mySidenav {
        display: none;
    }
</style>

<script>
  document.body.addEventListener('click', function (e) {
    if (e.target.parentNode.id === 'mySidenav') {
      document.getElementById("mySidenav").style.display = "block";
      e.preventDefault();
      return;
    }
    document.getElementById("mySidenav").style.display = "none";
  }, true);

  function openNav() {
    document.getElementById("mySidenav").style.display = "block";
  }
</script>

<div id="mySidenav" class="sidenav">
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Clients</a>
    <a href="#">Contact</a>
</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>

score 0 · Answer 4 · answered Nov 11 '19 at 12:25

$(function() {
  $("#ham-icon").on("click", function(e) {
    $("#mySidenav").addClass("cstm-w");
    e.stopPropagation()
  });
  $(document).on("click", function(e) {
    if ($(e.target).is("#ham-icon") === false) {
      $("#mySidenav").removeClass("cstm-w");
    }
  });
});

.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.cstm-w {
  width: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<span style="font-size:30px;cursor:pointer" id="ham-icon">&#9776; open</span>

how to create an auto hide sidebar

4 Answers4