CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mehnet ali
mehnet ali

Reputation: 133

how to create an auto hide sidebar

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

Upvotes: 1

Views: 7440

Answers (4)

Amanjot
Amanjot

Reputation: 2058

$(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>

Upvotes: 0

Vishal modi
Vishal modi

Reputation: 1720

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>

Upvotes: 5

Albert Allagulov
Albert Allagulov

Reputation: 155

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>

Upvotes: 0

Tess
Tess

Reputation: 150

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'

Upvotes: 0

Related Questions