JSFiddle - React, Tailwind, and code Playground

Material Design Menu

by Jennifer Perrin

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<div class="material-menu-wrapper">
  <div class="material-menu">
    <div class="material-btn">
      <div class="material-hamburger">
        <div class="material-patty"></div>
        <div class="material-patty"></div>
        <div class="material-patty"></div>
      </div>
    </div>
    <div class="material-content">
      <nav>
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Work</a></li>
          <li><a href="">Contact</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

<main>
    <p></p>
</main>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:200,300,400,700);

* { box-sizing: border-box; }

body {
  font-family: 'Open sans', sans-serif;
  height: 100vh;
  line-height: 1.3;
  background: tomato;
  overflow: hidden;
  text-rendering: geometricPrecision;
}

.material-menu-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100vh;
  width: 40vw;
  overflow: hidden;
}

.material-menu {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  background: transparent;
}

.material-btn {
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  position: absolute;
  z-index: 1;
  bottom: 20px;
  right: 20px;
  width: 75px;
  height: 75px;
  background: transparent;
  cursor: pointer;
}
.material-btn.active:before {
  transform: scale(18);
}
@media (min-height: 800px) {
  .material-btn.active:before {
    transform: scale(25);
  }
}
.material-btn:active:before {
  opacity: 0.75;
}
.material-btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 75px;
  height: 75px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transform-origin: center 70%;
  transform: scale(1);
  transition: all 0.35s ease-out;
}

.material-content {
  padding: 10% 15%;
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
}

nav ul {
  list-style-type: none;
  padding: 0;
  text-align: right;
}
nav li {
  will-change: transform, opacity;
  margin: 20px 0;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.4s ease-out;
}
nav li.active {
  transform: translateY(0);
  opacity: 1;
}
nav li:nth-child(1) {
  transition-delay: 0.1s;
}
nav li:nth-child(2) {
  transition-delay: 0.2s;
}
nav li:nth-child(3) {
  transition-delay: 0.3s;
}
nav li:nth-child(4) {
  transition-delay: 0.4s;
}
nav a {
  text-decoration: none;
  font-size: 5vw;
  color: tomato;
  font-weight:...

JavaScript

// http://codepen.io/arjancodes/details/jErbyM/

var circle = $('.material-btn');
var link = $('.material-content').find('li');
var ham = $('.material-hamburger');
var main = $('main');
var win = $(window);

function openMenu() {
  circle.toggleClass('active');
  link.toggleClass('active');
  ham.toggleClass('material-close');
  main.toggleClass('active');
  
  return false;
}

function closeMenu() {
    circle.removeClass('active');
    link.removeClass('active');
    ham.removeClass('material-close');
    main.removeClass('active');
}

circle.on('click', openMenu);
win.on('click', closeMenu)