Creating Collapsible Side Menu
<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>