RrwZYP

index.html

<nav>Navbar</nav>
<div class="container">
  <section id="sidePanel" class="columna1">Sección 1</section>
  <section id="mainPanel" class="columna2">Sección 2</section>
</div>

RrwZYP.markdown

RrwZYP

A Pen by lideo on CodePen.

License.

script.js

(function(){
  var mainPanel = document.getElementById('mainPanel');
  var sidePanel = document.getElementById('sidePanel');

  var hammerPanel = new Hammer(mainPanel);

  hammerPanel
    .on('swiperight', function(e) {
      sidePanel.classList.toggle('open');
    })
    .on('swipeleft', function(e) {
      sidePanel.classList.toggle('open');
    });
}());

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js"></script>

style.css

.columna1 {
  position: absolute;
  width: 250px;
  height: 100vh;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  z-index: 1;
}

.columna1 {
  -webkit-transform: translate(-250px, 0);
  transform: translate(-250px, 0);
}

.columna1.open {
  -webkit-transform: translate(0, 0);
  transform: translate(0,0);
}

.columna2 {
  width: 100%;
  height: 100vh;
  position: absolute;
}

@media (min-width: 600px) {
  .container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }

  .columna1 {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}