title: Slide out menu using only Javascript
body: <p>I want to create a slide out menu on click of a button by using only Javascript. I know many solutions exist, but all of them use jQuery. I want to code it exclusively using Javascript. Can someone please help me with it?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;li class="menu"&gt;&lt;a href="#about" id="mainmenu"&gt;Menu&lt;span class="box-shadow-menu"&gt;&lt;/span&gt;&lt;/a&gt;
      &lt;ul class="sub" id="sub"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Dashboard&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;My Profile&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Settings&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Help&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Logout&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#sub
  {
      color: #FFF;
      background-color: #662D91;
      display: none;
      position: fixed;
      top: 0;
      right: 0;
      border-left: 1px solid #000;
      height: 100%;
      width: 238px;
      padding: 15px 25px;
      margin: 0;
      z-index: 20;
  }
  #sub a
  {
      display: block;
      font-size: 1.1em;
      color: #fff;
      padding: 15px 0;
      border-bottom: 1px solid rgba( 255, 255, 255, 0.05 );
  }
  </code></pre>
  
  <p>It should slide from right end towards left. And also the Menu element should also be present when slide out occurs.</p>