<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-logo" viewBox="0 0 600 600">
<title>Logo</title>
<g transform="translate(-187.14286,-110.93358)">
<path d="M487.14284,110.93358C321.54286,110.93358 187.14286,245.33362 187.14286,410.93362C187.14286,576.53362 321.54284,710.93366 487.14284,710.93362C652.74284,710.93362 787.14286,576.53366 787.14286,410.93362C787.14286,245.3336 652.74284,110.93358 487.14284,110.93358zM472.98468,135.80606C473.15348,135.7975 473.32602,135.8143 473.49488,135.80606L474.7704,156.15044C457.46708,156.9754 440.62572,159.49878 424.38774,163.61218L429.42602,183.44638C386.80408,194.2423 348.84062,216.68778 319.09438,247.22188L304.48978,232.93618C292.61156,245.12214 281.99204,258.50792 272.7296,272.85964L255.63776,261.57136C302.31874,189.39406 381.83314,140.43148 472.98468,135.80606zM500.7908,135.80606C592.15428,140.27534 671.88054,189.26038 718.64796,261.57136L701.55612,272.85964C692.3145,258.54406 681.70474,245.1604 669.85968,232.99994L655.2551,247.22188C625.50422,216.67148 587.4965,194.24604 544.8597,183.44638L549.89796,163.61218C533.65998,159.49878 516.81864,156.9754 499.5153,156.15044L500.7908,135.80606zM487.14284,225.72952C495.81632,225.70964 504.48982,226.23972 511.63266,227.26016L500.47194,320.1173C523.9314,323.53822 544.4998,335.8161 558.69898,353.47188L633.18876,297.60452C642.23686,308.87632 652.49448,326.55928 657.8699,339.95148L572.28316,376.5586C576.58506,387.18706 578.9796,398.7686 578.9796,410.93362C578.9796,422.65322 576.80084,433.85232 572.79336,444.16066L657.67856,480.44894C652.44098,493.92068 642.29036,511.57208 633.3801,522.92342L559.4005,467.56628C545.2202,485.62538 524.41626,498.23626 500.66324,501.74994L511.63266,593.07648C497.34694,595.27646 476.93878,595.24488 462.65306,593.20404L473.62244,501.74994C449.85228,498.23372 429.06618,485.58252 414.8852,467.5025L341.09694,522.85964C332.04886,511.58784 321.79124,493.90488 316.4158,480.5127L401.49234,444.09688C397.4985,433.80382 395.30612,422.63222 395.30612,410.93362C395.30612,398.7476 397.6865,387.13824 402.00254,376.49484L316.60714,340.01524C321.84474,326.5435 331.99534,308.8921 340.90562,297.54074L415.58672,353.47188C429.7859,335.8161 450.3543,323.53822 473.81378,320.1173L462.65306,227.38768C469.79592,226.2877 478.46938,225.74942 487.14284,225.72952zM241.9898,285.16832L260.35714,294.22444C252.6104,309.24278 246.2766,325.09906 241.60714,341.6734L261.25,347.22188C255.53952,367.48714 252.44898,388.85 252.44898,410.93362C252.44898,433.03866 255.5288,454.4264 261.25,474.70912L241.60714,480.2576C246.27338,496.80526 252.61992,512.64756 260.35714,527.6428L241.9898,536.69892C222.59162,498.98758 211.63266,456.23444 211.63266,410.93362C211.63266,365.63278 222.59162,322.87966 241.9898,285.16832zM732.29592,285.16832C751.6941,322.87966 762.65302,365.63278 762.65302,410.93362C762.65302,456.23444 751.6941,498.98758 732.29592,536.69892L713.92856,527.6428C721.66906,512.6431 728.0108,496.81066 732.67858,480.2576L713.03572,474.70912C718.7569,454.4264 721.83674,433.03866 721.83674,410.93362C721.83674,388.85 718.74622,367.48714 713.03572,347.22188L732.67858,341.6734C728.01042,325.1037 721.67212,309.23918 713.92856,294.22444L732.29592,285.16832zM272.7296,549.00762C281.99558,563.35906 292.61104,576.74454 304.48978,588.93108L319.09438,574.64536C348.84062,605.17944 386.80408,627.62496 429.42602,638.42088L424.38774,658.25504C440.62572,662.36842 457.46708,664.89184 474.7704,665.7168L473.49488,686.06118C382.13144,681.59186 302.40516,632.60682 255.63776,560.29588L272.7296,549.00762zM701.6199,549.00762L718.64796,560.29588C671.88054,632.60682 592.15428,681.59186 500.7908,686.06118L499.5153,665.7168C516.81864,664.89184 533.65998,662.36842 549.89796,658.25504L544.8597,638.42088C587.4965,627.62118 625.50422,605.19574 655.2551,574.64536L669.85968,588.8673C681.71956,576.69162 692.36698,563.34254 701.6199,549.00762z"
/>
</g>
</symbol>
</defs>
</svg>
<nav class="menu slide-menu-left">
<ul>
<li><a href="#">Getting started</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- /slide menu left -->
<nav class="menu slide-menu-right">
<ul>
<li><a href="#">Getting started</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- /slide menu right -->
<nav class="menu push-menu-left">
<ul>
<li><a href="#">Getting started</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- /push menu left -->
<nav class="menu push-menu-right">
<ul>
<li><a href="#">Getting started</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- /push menu right -->
<nav class="menu slide-menu-top">
<ul>
<li><a href="#">Getting started</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- /slide menu top -->
<nav class="menu slide-menu-bottom">
<ul>
<li><a href="#">Getting started</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- /slide menu bottom -->
<nav class="menu push-menu-top">
<ul>
<li><a href="#">Getting started</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- /push menu top -->
<nav class="menu push-menu-bottom">
<ul>
<li><a href="#">Getting started</a></li>
<li><a href="#">Documentation</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- /push menu bottom -->
<header>
<div class="site-logo">
<svg class="logo">
<use xlink:href="#icon-logo"></use>
</svg>
</div>
<div class="site-title">
<h1>Slide & Push Menu</h1>
</div>
</header>
<div id="wrapper">
<div class="buttons">
<div class="container">
<button class="nav-toggler toggle-slide-left active"><span>Slide Menu Left</span></button>
<button class="nav-toggler toggle-slide-right"><span>Slide Menu Right</span></button>
<button class="nav-toggler toggle-push-left"><span>Push Menu Left</span></button>
<button class="nav-toggler toggle-push-right"><span>Push Menu Right</span></button>
<button class="nav-toggler toggle-slide-top"><span>Slide Menu Top</span></button>
<button class="nav-toggler toggle-slide-bottom"><span>Slide Menu Bottom</span></button>
<button class="nav-toggler toggle-push-top"><span>Push Menu Top</span></button>
<button class="nav-toggler toggle-push-bottom"><span>Push Menu bottom</span></button>
</div>
</div>
<!-- /buttons -->
<div id="main">
<div class="container">
<section class="content">
<h1>Hello!</h1>
<h1>The Battle for Endor</h1>
<p>What!? You're all clear, kid. Let's blow this thing and go home! Still, she's got a lot of spirit. I don't know, what do you think? Oh God, my uncle. How am I ever gonna explain this? I can't get involved! I've got work to do! It's not that I
like the Empire, I hate it, but there's nothing I can do about it right now. It's such a long way from here. The more you tighten your grip, Tarkin, the more star systems will slip through your fingers.</p>
<h2>Return of the Jedi</h2>
<p>I call it luck. I find your lack of faith disturbing. Oh God, my uncle. How am I ever gonna explain this? Look, I can take you as far as Anchorhead. You can get a transport there to Mos Eisley or wherever you're going. Alderaan? I'm not going
to Alderaan. I've got to go home. It's late, I'm in for it as it is.</p>
<ul>
<li>Your eyes can deceive you. Don't trust them.</li>
<li>Leave that to me. Send a distress signal, and inform the Senate that all on board were killed.</li>
</ul>
<h3>Return of the Jedi</h3>
<p>Don't underestimate the Force. I call it luck. But with the blast shield down, I can't even see! How am I supposed to fight? Oh God, my uncle. How am I ever gonna explain this?</p>
<h4>Attack of the Clones</h4>
<p>I don't know what you're talking about. I am a member of the Imperial Senate on a diplomatic mission to Alderaan-- The plans you refer to will soon be back in our hands. Don't underestimate the Force. Ye-ha! Don't be too proud of this technological
terror you've constructed. The ability to destroy a planet is insignificant next to the power of the Force.</p>
<ol>
<li>Oh God, my uncle. How am I ever gonna explain this?</li>
<li>But with the blast shield down, I can't even see! How am I supposed to fight?</li>
<li>You are a part of the Rebel Alliance and a traitor! Take her away!</li>
</ol>
<h5>The Republic</h5>
<p>You are a part of the Rebel Alliance and a traitor! Take her away! Hokey religions and ancient weapons are no match for a good blaster at your side, kid. He is here.</p>
</section>
<!-- /.content -->
</div>
</div>
<!-- #main -->
<footer>
<div class="container">
<div class="copyright">
© 2015, Jesus Tapial
</div>
</div>
</footer>
<!-- /footer -->
</div>
<!-- /#wrapper -->/* CSS Reset */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
background: transparent;
border: 0;
margin: 0;
padding: 0;
vertical-align: baseline;
}
body {
line-height: 1
}
h1,
h2,
h3,
h4,
h5,
h6 {
clear: both;
font-weight: normal;
}
ol,
ul {
list-style: none
}
blockquote {
quotes: none
}
blockquote:before,
blockquote:after {
content: '';
content: none;
}
del {
text-decoration: line-through
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
a img {
border: none
}
/* Globals */
*,
*:before,
*:after {
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #fff;
color: #505050;
font-family: "Open Sans", sans-serif;
font-weight: 400;
font-size: 14px;
line-height: 1.8;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: 1;
font-weight: 400;
}
a {
text-decoration: none;
color: #67b5d1;
}
a:hover {
color: #3184a1
}
/* clear floated divs */
.clearfix:after {
content: "";
display: table;
clear: both;
}
/* Template */
body {
overflow-x: hidden;
}
#wrapper {
position: relative;
z-index: 10;
top: 0;
left: 0;
transition: all 0.3s;
transition: all 0.3s;
width: 100%;
margin: 0 auto;
}
section {
margin-bottom: 30px
}
section h1 {
margin-bottom: 10px;
}
section p {
margin-bottom: 30px
}
section p:last-child {
margin-bottom: 0
}
section:last-child {
margin-bottom: 0
}
section.toggle {
text-align: center
}
.mask {
position: fixed;
top: 0;
left: 0;
z-index: 15;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
#main {
background: #f0f0f0;
padding: 30px 0;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
}
/* Header */
header {
background: rgba(47, 47, 47, 0.98);
padding: 22px 0;
transition: all 0.3s;
transition: all 0.3s;
}
.site-logo {
position: absolute;
top: 8px;
left: 10px;
z-index: 100;
}
.site-logo .logo {
width: 50px;
height: 50px;
fill: rgba(255, 255, 255, 0.6);
transition: all 0.6s ease;
transition: all 0.6s ease;
}
.site-logo .logo:hover {
fill: rgba(255, 255, 255, 1);
}
.site-title h1 {
color: #fff;
opacity: 0.6;
opacity: 0.6;
font-size: 1.5em;
margin-left: 70px;
transition: all 0.6s ease;
transition: all 0.6s ease;
cursor: default;
display: inline-block;
}
.site-title h1:hover {
opacity: 1;
opacity: 1;
}
/* Footer */
footer {
padding: 15px 0 30px;
text-align: center;
border-top: 1px solid #e5e5e5;
}
/* Menus */
/* general style for all menus */
nav.menu {
position: fixed;
z-index: 20;
background-color: rgba(47, 47, 47, 0.98);
overflow: hidden;
transition: all 0.3s;
transition: all 0.3s;
}
nav.menu ul {
list-style-type: none;
margin: 0;
padding: 65px 0 0;
}
nav.menu a {
font-weight: 300;
color: #fff;
}
nav.slide-menu-left,
nav.slide-menu-right,
nav.push-menu-left,
nav.push-menu-right {
top: 0;
width: 300px;
height: 100%;
}
nav.slide-menu-left li,
nav.slide-menu-right li,
nav.push-menu-left li,
nav.push-menu-right li {
display: block;
text-align: center;
border-bottom: solid 1px #6B6A6A;
border-top: solid 1px #f0f0f0;
}
nav.slide-menu-left li:last-child,
nav.slide-menu-right li:last-child,
nav.push-menu-left li:last-child,
nav.push-menu-right li:last-child {
border-bottom: none
}
nav.slide-menu-left a,
nav.slide-menu-right a,
nav.push-menu-left a,
nav.push-menu-right a {
display: block;
padding: 10px;
font-size: 18px;
}
nav.slide-menu-top,
nav.push-menu-top,
nav.slide-menu-bottom,
nav.push-menu-bottom {
left: 0;
width: 100%;
height: 110px;
}
nav.slide-menu-top ul,
nav.push-menu-top ul,
nav.slide-menu-bottom ul,
nav.push-menu-bottom ul {
text-align: center;
}
nav.slide-menu-top li,
nav.push-menu-top li {
display: inline-block;
margin: 0;
vertical-align: middle;
}
nav.slide-menu-bottom li,
nav.push-menu-bottom li {
display: inline-block;
margin: -110px 0 0 0;
vertical-align: middle;
}
nav.slide-menu-top a,
nav.push-menu-top a,
nav.slide-menu-bottom a,
nav.push-menu-bottom a {
display: block;
line-height: 50px;
padding: 0 10px;
font-size: 18px;
}
/* slide-menu-left */
nav.slide-menu-left {
left: -300px
}
body.sml-open nav.slide-menu-left {
left: 0
}
body.sml-open .site-logo {
position: fixed;
}
.buttons button.toggle-slide-left {
z-index: 99;
}
/* slide-menu-right */
nav.slide-menu-right {
right: -300px
}
body.smr-open nav.slide-menu-right {
right: 0
}
body.smr-open .site-logo {
position: fixed;
left: inherit;
right: 10px;
}
.buttons button.toggle-slide-right {
z-index: 98;
margin-left: 9%;
}
/* push-menu-left */
nav.push-menu-left {
left: -300px
}
body.pml-open nav.push-menu-left {
left: 0
}
body.pml-open #wrapper {
left: 300px
}
body.pml-open .site-logo {
position: fixed;
}
.buttons button.toggle-push-left {
z-index: 97;
margin-left: 18.7%;
}
/* push-menu-right */
nav.push-menu-right {
right: -300px
}
body.pmr-open nav.push-menu-right {
right: 0
}
body.pmr-open #wrapper {
left: -300px
}
body.pmr-open .site-logo {
position: fixed;
left: inherit;
right: 10px;
}
.buttons button.toggle-push-right {
z-index: 96;
margin-left: 27.6%;
}
/* slide-menu-top */
nav.slide-menu-top {
top: -110px
}
body.smt-open nav.slide-menu-top {
top: 0
}
body.smt-open .site-logo {
position: fixed;
}
.buttons button.toggle-slide-top {
z-index: 95;
margin-left: 37.25%;
}
/* slide-menu-bottom */
nav.slide-menu-bottom {
bottom: -110px
}
body.smb-open nav.slide-menu-bottom {
bottom: 0
}
body.smb-open .site-logo {
position: fixed;
top: inherit;
bottom: 5px;
}
.buttons button.toggle-slide-bottom {
z-index: 94;
margin-left: 46.5%;
}
/* push-menu-top */
nav.push-menu-top {
top: -110px
}
body.pmt-open nav.push-menu-top {
top: 0
}
body.pmt-open header {
/* 110 + 22 */
padding: 132px 0 0 0;
}
body.pmt-open .site-logo {
position: fixed;
}
.buttons button.toggle-push-top {
z-index: 93;
margin-left: 57.05%;
}
/* push-menu-bottom */
nav.push-menu-bottom {
bottom: -110px
}
body.pmb-open nav.push-menu-bottom {
bottom: 0
}
body.pmb-open #wrapper {
top: -100px
}
body.pmb-open .site-logo {
position: fixed;
top: inherit;
bottom: 5px;
}
.buttons button.toggle-push-bottom {
z-index: 92;
margin-left: 66.2%;
}
/* Buttons */
.buttons {
background: rgba(47, 47, 47, 0.98);
padding-top: 10px;
border: 1px solid rgba(47, 47, 47, 0.98);
border-bottom: 1px solid #e5e5e5;
min-height: 41px;
padding-left: 10px;
}
.buttons .container {
padding: 0;
}
.buttons button {
display: inline-block;
line-height: 28px;
padding: 0 10px;
background: #fbfbfb;
transition: all 0.2s ease;
transition: all 0.2s ease;
position: absolute;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 1px solid #e5e5e5;
border-bottom: none;
color: #D1D1D1;
}
.buttons button:hover {
transform: translateY(-5px);
transform: translateY(-5px);
padding-bottom: 5px;
color: #505050;
z-index: 101;
}
.buttons button.active {
background: #f0f0f0;
z-index: 100;
color: #505050;
}
.buttons button:focus {
outline: none
}
/* Media Queries */
@media all and (max-width: 660px) {
nav.slide-menu-top a, nav.slide-menu-bottom a, nav.push-menu-top a, nav.push-menu-bottom a {
padding: 0 2px;
font-size: 14px;
}
}
@media all and (max-width: 475px) {
.toggle-slide-left::before {
content: "SML";
}
.toggle-slide-right::before {
content: "SMR";
}
.toggle-slide-top::before {
content: "SMT";
}
.toggle-slide-bottom::before {
content: "SMB";
}
.toggle-push-left::before {
content: "PML";
}
.toggle-push-right::before {
content: "PMR";
}
.toggle-push-top::before {
content: "PMT";
}
.toggle-push-bottom::before {
content: "PMB";
}
.nav-toggler span {
display: none;
}
}
@media all and (max-width: 350px) {
nav.slide-menu-top a, nav.slide-menu-bottom a, nav.push-menu-top a, nav.push-menu-bottom a {
font-size: 11px;
}
}/*!
* classie v1.0.0
* class helper functions
* from bonzo https://github.com/ded/bonzo
* MIT license
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true, unused: true */
/*global define: false */
(function(window) {
'use strict';
// class helper functions from bonzo https://github.com/ded/bonzo
function classReg(className) {
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
}
// classList support for class management
// altho to be fair, the api sucks because it won't accept multiple classes at once
var hasClass, addClass, removeClass;
if ('classList' in document.documentElement) {
hasClass = function(elem, c) {
return elem.classList.contains(c);
};
addClass = function(elem, c) {
elem.classList.add(c);
};
removeClass = function(elem, c) {
elem.classList.remove(c);
};
} else {
hasClass = function(elem, c) {
return classReg(c).test(elem.className);
};
addClass = function(elem, c) {
if (!hasClass(elem, c)) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function(elem, c) {
elem.className = elem.className.replace(classReg(c), ' ');
};
}
function toggleClass(elem, c) {
var fn = hasClass(elem, c) ? removeClass : addClass;
fn(elem, c);
}
var classie = {
// full names
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
// short names
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
// transport
if (typeof define === 'function' && define.amd) {
// AMD
define(classie);
} else {
// browser global
window.classie = classie;
}
})(window);
/* The nav stuff */
(function(window) {
'use strict';
var body = document.body,
mask = document.createElement("div"),
toggleSlideLeft = document.querySelector(".toggle-slide-left"),
toggleSlideRight = document.querySelector(".toggle-slide-right"),
toggleSlideTop = document.querySelector(".toggle-slide-top"),
toggleSlideBottom = document.querySelector(".toggle-slide-bottom"),
togglePushLeft = document.querySelector(".toggle-push-left"),
togglePushRight = document.querySelector(".toggle-push-right"),
togglePushTop = document.querySelector(".toggle-push-top"),
togglePushBottom = document.querySelector(".toggle-push-bottom"),
logoBottom = document.querySelector(".logo"),
activeNav,
openActive;
mask.className = "mask";
function openMenu(menu) {
classie.add(body, menu);
document.body.appendChild(mask);
activeNav = menu;
}
function closeMenu() {
classie.remove(body, activeNav);
activeNav = "";
document.body.removeChild(mask);
}
function addActive(element) {
[].slice.call(document.querySelectorAll(".nav-toggler")).forEach(function(el, i) {
classie.remove(el, "active");
});
classie.add(element, "active");
}
/* slide menu left */
toggleSlideLeft.addEventListener("click", function() {
addActive(this);
openMenu("sml-open");
});
/* slide menu right */
toggleSlideRight.addEventListener("click", function() {
addActive(this);
openMenu("smr-open");
});
/* slide menu top */
toggleSlideTop.addEventListener("click", function() {
addActive(this);
openMenu("smt-open");
});
/* slide menu bottom */
toggleSlideBottom.addEventListener("click", function() {
addActive(this);
openMenu("smb-open");
});
/* push menu left */
togglePushLeft.addEventListener("click", function() {
addActive(this);
openMenu("pml-open");
});
/* push menu right */
togglePushRight.addEventListener("click", function() {
addActive(this);
openMenu("pmr-open");
});
/* push menu top */
togglePushTop.addEventListener("click", function() {
addActive(this);
openMenu("pmt-open");
});
/* push menu bottom */
togglePushBottom.addEventListener("click", function() {
addActive(this);
openMenu("pmb-open");
});
/* push logo bottom */
logoBottom.addEventListener("click", function() {
/* If not open */
if (!activeNav) {
openActive = document.querySelector(".active");
if (openActive == toggleSlideLeft) {
openMenu("sml-open");
}
if (openActive == toggleSlideRight) {
openMenu("smr-open");
}
if (openActive == toggleSlideTop) {
openMenu("smt-open");
}
if (openActive == toggleSlideBottom) {
openMenu("smb-open");
}
if (openActive == togglePushLeft) {
openMenu("pml-open");
}
if (openActive == togglePushRight) {
openMenu("pmr-open");
}
if (openActive == togglePushTop) {
openMenu("pmt-open");
}
if (openActive == togglePushBottom) {
openMenu("pmb-open");
}
}
/* Open menu */
else {
closeMenu();
}
});
/* hide active menu if mask is clicked */
mask.addEventListener("click", function() {
closeMenu();
});
})(window);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.