Material Menu Animation

by Tymoteusz Czech

HTML

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<nav id="nav"></nav>
<div id="wrap">
  <main>
    <div class="container">
      <h1>Content</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam necessitatibus vitae nesciunt nisi inventore voluptatem fugiat aut velit animi praesentium.</p>
    </div>
  </main>
</div>

SCSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  font-family: sans-serif;
  font-weight: normal;
  cursor: pointer;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

html,
body {
  height: 100%;
}

$nav-size: 10rem;
$in: ease-out;
$out: ease-in;
$speed: 333ms;
.nav {
  #nav {
    width: $nav-size;
    transition-timing-function: $in;
  }
  #wrap {
    padding-left: $nav-size;
    transition-timing-function: $in;
  }
}

#nav {
  transition: width $speed $out;
  height: 100%;
  background: #34495e;
  position: fixed;
  width: 0;
}

#wrap {
  transition: padding $speed $out;
  display: table;
  background: #bdc3c7;
  padding-left: 0;
  width: 100%;
  height: 100%;
}

main {
  display: table-cell;
  background: #ecf0f1;
  width: 100%;
  vertical-align: top;
  height: 100%;
  .container {
    height: 100%;
    padding: 1rem;
  }
}

JavaScript

$(document).ready(function() {
  $("body").on("click", function() {
    $(this).toggleClass("nav");
  }).addClass("nav");
});