title: Sidebar Transitions
body: <p>I did a sidebar menu with transition effect.</p>
  
  <p>the problem is, when I click in the  Icon the sidebar kinda squash sandwiching letters.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.fa-bars').on('click', function clickHandler(e) {
    e.preventDefault();
    $('.magic-container').toggleClass('closed');
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.sidebar-shrink {
    height: 100%;
    overflow-y: auto;
    background: #000;
  }
  .magic-container.closed .sidebar-left-nav {
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
    width: 0;
    padding: 0;
  }
  .magic-container.closed .col-md-10 {
    -webkit-transition: width 0.3s;
    transition: width 0.3s;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;body&gt;
    &lt;div class="container-fluid magic-container"&gt;
      &lt;div class="col-md-2 sidebar-left-nav"&gt;
        &lt;div class="sidebar-shrink"&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;Hello World&lt;i class="pull-right  fa fa-bullhorn" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;a href="#"&gt;Hello World&lt;i class="pull-right  fa fa-bullhorn" aria-hidden="true"&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-md-10"&gt;
        &lt;div&gt;
          &lt;h3 class="headline-primary"&gt;
           &lt;i class="fa fa-bars pull-left menu-toggle" aria-hidden="true"&gt;&lt;/i&gt;
            Sidebar
            &lt;/h3&gt;
          &lt;div class="col-md-12"&gt;
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>what I trying to archive is this effect REVEAL from here: <a href="http://tympanus.net/Development/SidebarTransitions/" rel="nofollow">http://tympanus.net/Development/SidebarTransitions/</a></p>
  
  <p>I tried translate3d but did not work, someone know how to solve this?</p>
  
  <p>EDIT: I want keep the code and use just css if possible.</p>
  
  <p>thanks.</p>