JSFiddle - React, Tailwind, and code Playground

by webopixel

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dynamics.js/1.0.0/dynamics.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Fjalla+One"></script>
<div id="nav-toggle">
	<span></span>
	<span></span>
	<span></span>
</div>

<nav id="side-nav">
	<ul id="side-nav-btn">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Business</a></li>
		<li><a href="#">Result</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>

<article>
	<h1>Dynamics.js Side Navigation</h1>
	<p>
		このページは「<a href="#">Dynamics.jsでこ気味いいサイドナビのアニメーション</a>」のデモです。
	</p>
</article>

CSS

* {
  margin: 0;
  padding: 0;
}
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  font-size: 14px;
  font-family: 'Fjalla One', Helvetica, Arial,'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
    Meiryo, 'メイリオ', sans-serif;
  background: #fff;
}
article {
  padding: 60px 15px 20px;
}
article p {
  margin-bottom: 1.5em;
}
article a {
  color: #0b8793;
}
h1 {
  color: #0b8793;
  font-size: 22px;
  margin-bottom: .7em;
}

/* nav-toggle */
#nav-toggle {
  top: 14px;
  left: 14px;
  width: 30px;
  height: 27px;
  cursor: pointer;
  z-index: 1000;
  position: relative;
}
#nav-toggle span {
  background: #0b8793;
  display: block;
  position: absolute;
  height: 4px;
  width: 100%;
  left: 0;
  -webkit-transition: .35s ease-in-out;
  transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
  top: 0;
}
#nav-toggle span:nth-child(2) {
  top: 11px;
}
#nav-toggle span:nth-child(3) {
  top: 22px;
}

/* nav-toggle animation */
.nav-open #nav-toggle span:nth-child(1) {
  top: 11px;
  -webkit-transform: rotate(315deg);
  transform: rotate(315deg);
}
.nav-open #nav-toggle span:nth-child(2) {
  width: 0;
  left: 50%;
}
.nav-open #nav-toggle span:nth-child(3) {
  top: 11px;
  -webkit-transform: rotate(-315deg);
  transform: rotate(-315deg);
}


/* side-nav */
#side-nav {
  color: #fff;
  font-size: 17px;
  background: #0b8793;
  position: fixed;
  z-index: 1000;
  width: 400px;
  height: 100%;
  right: -400px;
  top: 0;
  padding: 20px;
}
#side-nav ul {
  list-style: none;
}
#side-nav ul li {
  padding: 10px;
}
#side-nav a {
  color: #fff;
  text-decoration: none;
}
#side-nav-btn {
  position: absolute;
  left: 400px;
}

JavaScript

(function($) {
  $(function() {
    var $sideNav = $('#side-nav')[0];
    var $sideNavBtns = $('#side-nav-btn li');

    $('#nav-toggle').toggle(
      function () {
        $('body').addClass('nav-open');
        dynamics.animate($sideNav, {
          translateX: -180
        }, {
          type: dynamics.spring,
          duration: 800
        });
        for(var i=0; i<$sideNavBtns.length; i++) {
          dynamics.animate($sideNavBtns[i], {
            translateX: -360
          }, {
            type: dynamics.spring,
            duration: 1000,
            friction: 400,
            delay: (i * 150) + 200
          })
        }
      }, function() {
        $('body').removeClass('nav-open');
        dynamics.animate($sideNav, {
          translateX: 0
        }, {
          duration: 200,
          delay: 150
        });
        for(var i=0; i<$sideNavBtns.length; i++) {
          dynamics.animate($sideNavBtns[i], {
            translateX: 0
          }, {
            type: dynamics.spring,
            duration: 2000,
            friction: 400,
            delay: i * 50
          })
        }
      }
    );
  });
})(jQuery);