Slide & Push Menu

HTML

              
                <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">
        &copy; 2015, Jesus Tapial
      </div>
    </div>
  </footer>
  <!-- /footer -->

</div>
<!-- /#wrapper -->

CSS

              
                /* 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 {
  -webkit-box-sizing: border-box;
  -moz-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;
  -webkit-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;
  -webkit-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;
  -webkit-transition: all 0.6s ease;
}

.site-logo .logo:hover {
  fill: rgba(255, 255, 255, 1);
}

.site-title h1 {
  color: #fff;
  opacity: 0.6;
  -webkit-opacity: 0.6;
  font-size: 1.5em;
  margin-left: 70px;
  transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  cursor: default;
  display: inline-block;
}

.site-title h1:hover {
  opacity: 1;
  -webkit-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;
  -webkit-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;
  -webkit-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);
  -webkit-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;
  }
}

JS

              
                /*!
 * 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);

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions