title: how to create an auto hide sidebar
body: <p>I am trying to generate a sidebar which hides automatic by clicking every other things except the sidebar (with js or css).</p>
  
  <p>my code is:</p>
  
  <pre><code>&lt;script&gt;
  function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
  }
  &lt;/script&gt;
  
  ...
  
  &lt;div id="mySidenav" class="sidenav"&gt;
    &lt;a href="#"&gt;About&lt;/a&gt;
    &lt;a href="#"&gt;Services&lt;/a&gt;
    &lt;a href="#"&gt;Clients&lt;/a&gt;
    &lt;a href="#"&gt;Contact&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;span style="font-size:30px;cursor:pointer" onclick="openNav()"&gt;&amp;#9776; open&lt;/span&gt;
  </code></pre>
  
  <p>and css is :</p>
  
  <pre><code>&lt;style&gt;
  .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;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>i used HTML, JavaScript, and CSS</p>
  
  <p>thanks</p>