Author: | callmenick |
---|---|
Views Total: | 1,337 views |
Official Page: | Go to website |
Last Update: | September 11, 2019 |
License: | MIT |
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; }