title: Creating Collapsible Side Menu
body: <p>The <strong>effect</strong> I'm trying to achieve is:
  <a href="https://gesso-theme.myshopify.com/" rel="nofollow">https://gesso-theme.myshopify.com/</a>
  <br>When you click on the collapsible menu on the top left.</p>
  
  <p>The things I'm stuck with and am trying to achieve are:<br><br>
  <b>1.)</b> How do I make the menu seem to shift the body content to the right when the menu shifts in? (This isn't as important, but would be nice to know)<br>
  <b>2.)</b> Why won't my shadow div that hides my body content go full width and height of browser?<br>
  <b>3.)</b> I want to be able to achieve this no matter what content I have in the body.<br>
  <b>4.)</b> I want to achieve this without a plugin or bootstrap, just javascript, jquery, css and html so I can really understand what's going on.
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(".show-side-menu").click(function(){
  $(".container").toggle();
  $(".darkness").toggle();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{
    margin:0;
    padding:0;
  }
  html, body{
    height: 100%;
        margin: 0;
  }
  .container{
  height:100%;
  width:200px;
  background:white;
  position:absolute;
  top:0;
  bottom:0;
  display:none;
  }
  a.show-side-menu{
    background:blue;
    color:white;
    font-size:20px;
    z-index:10;
    position:absolute;
  }
  .random-content{
  height:500px;
  width:500px;
  margin:10px;
  background:purple;
  }
  .darkness{
  
    background:rgba(136, 114, 114, 0.65);
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    display:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;a href="#" class="show-side-menu"&gt;Show&lt;/a&gt;
  &lt;div class="darkness"&gt;&lt;/div&gt;
  &lt;div class="container"&gt;
  
  &lt;/div&gt;
  
  &lt;div class="random-content"&gt;
    
  &lt;/div&gt;
  
  &lt;div class="random-content"&gt;
    
  &lt;/div&gt;
  &lt;div class="random-content"&gt;
    
  &lt;/div&gt;
  &lt;div class="random-content"&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>