JSFiddle - React, Tailwind, and code Playground
HTML
<nav class="pushy pushy-left">
<ul>
<li class="pushy-submenu">
<a href="#">MENU</a>
<ul>
<li class="pushy-link"><a href="#">Home</a></li>
<li class="pushy-link"><a href="#">Quem somos</a></li>
</ul>
</li>
</ul>
</nav>
<!-- VisĂŁo escura enquanto o Menu accordeon estiver aberto -->
<div class="site-overlay"></div>
CSS
/*! Pushy - v1.0.0 - 2016-3-1
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */
/* Menu Appearance */
ul{
list-style: none;
}
.pushy {
position: fixed;
width: 200px;
height: 100%;
top: 0;
z-index: 9999;
background: #191918;
overflow: auto;
visibility: hidden;
-webkit-overflow-scrolling: touch;
/* enables momentum scrolling in iOS overflow elements */
}
.pushy a {
display: block;
color: #b3b3b1;
padding: 15px;
text-decoration: none;
outline: 0;
}
.pushy a:hover {
color: #FFF;
}
.pushy ul:first-child {
margin-top: 10px;
}
.pushy.pushy-left {
left: 0;
}
.pushy.pushy-right {
right: 0;
}
/* Menu Movement */
.pushy-left {
-webkit-transform: translate3d(-200px, 0, 0);
-ms-transform: translate3d(-200px, 0, 0);
transform: translate3d(-200px, 0, 0);
}
.pushy-open-left #container,
.pushy-open-left .push {
-webkit-transform: translate3d(200px, 0, 0);
-ms-transform: translate3d(200px, 0, 0);
transform: translate3d(200px, 0, 0);
}
.pushy-right {
-webkit-transform: translate3d(200px, 0, 0);
-ms-transform: translate3d(200px, 0, 0);
transform: translate3d(200px, 0, 0);
}
.pushy-open-right #container,
.pushy-open-right .push {
-webkit-transform: translate3d(-200px, 0, 0);
-ms-transform: translate3d(-200px, 0, 0);
transform: translate3d(-200px, 0, 0);
}
.pushy-open-left .pushy,
.pushy-open-right .pushy {
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Menu Transitions */
#container,
.pushy,
.push {
transition: transform 0.2s cubic-bezier(0.16, 0.68, 0.43, 0.99);
}
/* Site Overlay */
.site-overlay {
display: none;
}
.pushy-open-left .site-overlay,
.pushy-open-right .site-overlay {
display: block;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 9998;
background-color: rgba(0, 0, 0, 0.5);
...
JavaScript
/*! Pushy - v1.0.0 - 2016-3-1
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */
(function ($) {
var pushy = $('.pushy'), //menu css class
body = $('body'),
container = $('#container'), //container css class
push = $('.push'), //css class to add pushy capability
pushyLeft = 'pushy-left', //css class for left menu position
pushyOpenLeft = 'pushy-open-left', //css class when menu is open (left position)
pushyOpenRight = 'pushy-open-right', //css class when menu is open (right position)
siteOverlay = $('.site-overlay'), //site overlay
menuBtn = $('.menu-btn, .pushy-link'), //css classes to toggle the menu
menuSpeed = 200, //jQuery fallback menu speed
menuWidth = pushy.width() + 'px', //jQuery fallback menu width
submenuClass = '.pushy-submenu',
submenuOpenClass = 'pushy-submenu-open',
submenuClosedClass = 'pushy-submenu-closed',
submenu = $(submenuClass);
function togglePushy(){
//add class to body based on menu position
if( pushy.hasClass(pushyLeft) ){
body.toggleClass(pushyOpenLeft);
}else{
body.toggleClass(pushyOpenRight);
}
}
function openPushyFallback(){
//animate menu position based on CSS class
if( pushy.hasClass(pushyLeft) ){
body.addClass(pushyOpenLeft);
pushy.animate({left: "0px"}, menuSpeed);
container.animate({left: menuWidth}, menuSpeed);
//css class to add pushy capability
push.animate({left: menuWidth}, menuSpeed);
}else{
body.addClass(pushyOpenRight);
pushy.animate({right: '0px'}, menuSpeed);
container.animate({right: menuWidth}, menuSpeed);
push.animate({right: menuWidth}, menuSpeed);
}
}
function closePushyFallback(){
//animate menu position based on CSS class
if( pushy.hasClass(pushyLeft) ){
body.removeClass(pushyOpenLeft);
pushy.animate({left: "-" + menuWidth}, menuSpeed);
container.animate({left: "0px"}, menuSpeed);
//css class to add pushy...