Material Design Inspired Off-canvas Push Nav – Material-Menu

Preview:

Description:

Material-Menu is a pure JavaScript navigation library to create an off-canvas push menu inspired by Material Design apps.

How to use it:

Insert the main content into a container element with a unique ID ‘wrapper’.

<div id="wrapper" class="wrapper">
  ... Main Content Here ...
</div>

Create a hamburger button to reveal the off-canvas menu.

<button id="mm-menu-toggle" class="mm-menu-toggle">Toggle Menu</button>

Create the off-canvas menu from a nav list.

<nav id="mm-menu" class="mm-menu">
  <div class="mm-menu__header">
    <h2 class="mm-menu__title">CSSSCRIPT</h2>
  </div>
  <ul class="mm-menu__items">
    <li class="mm-menu__item">
      <a class="mm-menu__link" href="#">
        <span class="mm-menu__link-text">Home</span>
      </a>
    </li>
    <li class="mm-menu__item">
      <a class="mm-menu__link" href="#">
        <span class="mm-menu__link-text">Profile</span>
      </a>
    </li>
    <li class="mm-menu__item">
      <a class="mm-menu__link" href="#">
        <span class="mm-menu__link-text">Inbox</span>
      </a>
    </li>
    <li class="mm-menu__item">
      <a class="mm-menu__link" href="#">
        <span class="mm-menu__link-text">Favourites</span>
      </a>
    </li>
    <li class="mm-menu__item">
      <a class="mm-menu__link" href="#">
        <span class="mm-menu__link-text">Settings</span>
      </a>
    </li>
  </ul>
</nav>

Load the core JavaScript materialMenu.min.js in the document.

<script src="js/production/materialMenu.min.js"></script>

Initialize the Material Menu library and done.

var menu = new Menu;

The CSS for the hamburger toggle button.

.mm-menu-toggle {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
  width: 24px;
  height: 18px;
  background: -webkit-linear-gradient(90deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #212121 7px, #212121 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px);
  background: linear-gradient(0deg, rgba(33, 33, 33, 0), rgba(33, 33, 33, 0) 7px, #212121 7px, #212121 11px, rgba(33, 33, 33, 0) 11px, rgba(33, 33, 33, 0) 18px);
  font-size: 0;
  text-indent: -9999px;
}
.mm-menu-toggle::before,
.mm-menu-toggle::after {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #212121;
  content: "";
}
.mm-menu-toggle::before {
  top: 0;
  -webkit-transform-origin: bottom left;
      -ms-transform-origin: bottom left;
          transform-origin: bottom left;
}
.mm-menu-toggle::after {
  bottom: 0;
  -webkit-transform-origin: top left;
      -ms-transform-origin: top left;
          transform-origin: top left;
}
.mm-menu-toggle,
.mm-menu-toggle::before,
.mm-menu-toggle::after {
  -webkit-transition: all 0.5s;
          transition: all 0.5s;
}
/* active states */
.mm-menu-toggle.active {
  -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}
.mm-menu-toggle.active::before {
  width: 75%;
  -webkit-transform: translateY(7px) rotate(-45deg);
      -ms-transform: translateY(7px) rotate(-45deg);
          transform: translateY(7px) rotate(-45deg);
}
.mm-menu-toggle.active::after {
  width: 75%;
  -webkit-transform: translateY(-7px) rotate(45deg);
      -ms-transform: translateY(-7px) rotate(45deg);
          transform: translateY(-7px) rotate(45deg);
}

The primary CSS/CSS3 styles for the off-canvas menu.

.mm-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: #fff;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  box-shadow: 0;
  -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
          transform: translateX(-100%);
  -webkit-transition: -webkit-transform 0.5s, box-shadow 0.5s;
          transition: transform 0.5s, box-shadow 0.5s;
}
.mm-menu.active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
@media all and (min-width: 300px) {
  .mm-menu {
    width: 300px;
    -webkit-transform: translateX(-300px);
        -ms-transform: translateX(-300px);
            transform: translateX(-300px);
  }
}
/* header */
.mm-menu__header {
  position: relative;
  width: 100%;
  height: 188px;
  background-color: #CDDC39;
}
.mm-menu__title {
  position: absolute;
  bottom: 12px;
  left: 12px;
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 22px;
}
/* list */
.mm-menu__items {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mm-menu__item {
  display: block;
  width: 100%;
  opacity: 0;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.mm-menu__item.in-view {
  opacity: 1;
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}
.mm-menu__item.item-1 {
  -webkit-transition: opacity 0.5s 0.1s, -webkit-transform 0.5s 0.1s;
          transition: opacity 0.5s 0.1s, transform 0.5s 0.1s;
}
.mm-menu__item.item-2 {
  -webkit-transition: opacity 0.5s 0.2s, -webkit-transform 0.5s 0.2s;
          transition: opacity 0.5s 0.2s, transform 0.5s 0.2s;
}
.mm-menu__item.item-3 {
  -webkit-transition: opacity 0.5s 0.3s, -webkit-transform 0.5s 0.3s;
          transition: opacity 0.5s 0.3s, transform 0.5s 0.3s;
}
.mm-menu__item.item-4 {
  -webkit-transition: opacity 0.5s 0.4s, -webkit-transform 0.5s 0.4s;
          transition: opacity 0.5s 0.4s, transform 0.5s 0.4s;
}
.mm-menu__item.item-5 {
  -webkit-transition: opacity 0.5s 0.5s, -webkit-transform 0.5s 0.5s;
          transition: opacity 0.5s 0.5s, transform 0.5s 0.5s;
}
.mm-menu__item.item-6 {
  -webkit-transition: opacity 0.5s 0.6s, -webkit-transform 0.5s 0.6s;
          transition: opacity 0.5s 0.6s, transform 0.5s 0.6s;
}
.mm-menu__item.item-7 {
  -webkit-transition: opacity 0.5s 0.7s, -webkit-transform 0.5s 0.7s;
          transition: opacity 0.5s 0.7s, transform 0.5s 0.7s;
}
.mm-menu__item.item-8 {
  -webkit-transition: opacity 0.5s 0.8s, -webkit-transform 0.5s 0.8s;
          transition: opacity 0.5s 0.8s, transform 0.5s 0.8s;
}
.mm-menu__item.item-9 {
  -webkit-transition: opacity 0.5s 0.9s, -webkit-transform 0.5s 0.9s;
          transition: opacity 0.5s 0.9s, transform 0.5s 0.9s;
}
.mm-menu__item.item-10 {
  -webkit-transition: opacity 0.5s 1.0s, -webkit-transform 0.5s 1.0s;
          transition: opacity 0.5s 1.0s, transform 0.5s 1.0s;
}
.mm-menu__item.item-11 {
  -webkit-transition: opacity 0.5s 1.1s, -webkit-transform 0.5s 1.1s;
          transition: opacity 0.5s 1.1s, transform 0.5s 1.1s;
}
.mm-menu__item.item-12 {
  -webkit-transition: opacity 0.5s 1.2s, -webkit-transform 0.5s 1.2s;
          transition: opacity 0.5s 1.2s, transform 0.5s 1.2s;
}
.mm-menu__item.item-13 {
  -webkit-transition: opacity 0.5s 1.3s, -webkit-transform 0.5s 1.3s;
          transition: opacity 0.5s 1.3s, transform 0.5s 1.3s;
}
.mm-menu__item.item-14 {
  -webkit-transition: opacity 0.5s 1.4s, -webkit-transform 0.5s 1.4s;
          transition: opacity 0.5s 1.4s, transform 0.5s 1.4s;
}
.mm-menu__item.item-15 {
  -webkit-transition: opacity 0.5s 1.5s, -webkit-transform 0.5s 1.5s;
          transition: opacity 0.5s 1.5s, transform 0.5s 1.5s;
}
.mm-menu__item.item-16 {
  -webkit-transition: opacity 0.5s 1.6s, -webkit-transform 0.5s 1.6s;
          transition: opacity 0.5s 1.6s, transform 0.5s 1.6s;
}
.mm-menu__item.item-17 {
  -webkit-transition: opacity 0.5s 1.7s, -webkit-transform 0.5s 1.7s;
          transition: opacity 0.5s 1.7s, transform 0.5s 1.7s;
}
.mm-menu__item.item-18 {
  -webkit-transition: opacity 0.5s 1.8s, -webkit-transform 0.5s 1.8s;
          transition: opacity 0.5s 1.8s, transform 0.5s 1.8s;
}
.mm-menu__item.item-19 {
  -webkit-transition: opacity 0.5s 1.9s, -webkit-transform 0.5s 1.9s;
          transition: opacity 0.5s 1.9s, transform 0.5s 1.9s;
}
.mm-menu__item.item-20 {
  -webkit-transition: opacity 0.5s 2.0s, -webkit-transform 0.5s 2.0s;
          transition: opacity 0.5s 2.0s, transform 0.5s 2.0s;
}
.mm-menu__link {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 4px 0;
  padding: 12px;
  color: #727272;
  font-size: 16px;
  text-decoration: none;
  -webkit-transition: background 0.5s, color 0.5s;
          transition: background 0.5s, color 0.5s;
}
.mm-menu__link-text {
  position: relative;
  z-index: 2;
}
/* the touch effect, for when a link is touched */
.mm-menu__link--touch-effect {
  display: block;
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  border-radius: 100%;
  background-color: #B6B6B6;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: 50% 50%;
      -ms-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
}
.mm-menu__link--touch-effect.animating {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
  -webkit-transition: -webkit-transform 0.5s;
          transition: transform 0.5s;
}
/**
 * Menu mask
 *
 * A mask that comes in and covers the wrapper when the menu is active.
 */
.mm-menu-mask {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 8;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.5s, visibility 0.5s;
          transition: opacity 0.5s, visibility 0.5s;
}
.mm-menu-mask.active {
  visibility: visible;
  opacity: 1;
}