cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              
    <nav id="menu" role="navigation">
        <div class="brand">&Aopf;</div>            
        <ul>
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </nav>
    <div class="page-wrap">
        <button id="menu-toggle"></button>
        <div class="container" role="main">
            <article>
                <h2>Vanilla Javascript push menu</h2>
                    <p>Sometimes you just need a really simple push menu, without any Javascript Libraries. I made this in a rush for a client with the instructions to not use any jQuery.</p>
                    <p>I like the thought of adding a class to the body and climb the DOM instead of adding classes to the affected elements.</p>
                    <p>Less is more.</p>
            </article>
      </div>
   </div>
            
          
!
            
              body {
    width: 100%;
    height: 100%;
    margin: 0;

    font-family: "Roboto", sans-serif;

    color: #fff;
    background-color: #232629;
}

p {
    line-height: 1.7;
}
h2 {
    margin-top: 30px;

    font-size: 1.7em;
    line-height: 1;

    letter-spacing: 2px;
    text-transform: uppercase;
}
/* PUSH MENU */
#menu {
    position: fixed;
    top: 0;
    left: -300px;

    width: 300px;
    height: 100%;
    padding: 50px 30px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
            transition: all .3s ease-in;
    text-align: center;

    background-color: #fff;
}
#menu .brand {
    height: 51px;

    font-size: 70px;
    font-weight: 900;
    line-height: .6;

    color: #ddd;
}
#menu ul {
    padding: 0;
    margin-top: 30px;
}

#menu ul li a {
    display: block;

    font-weight: 900;
    line-height: 50px;

    -webkit-transition: all .3s ease;
       -moz-transition: all .3s ease;
         -o-transition: all .3s ease;
            transition: all .3s ease;
    text-decoration: none;
    text-transform: uppercase;

    color: #232629;
    border-top: 1px solid #eee;
}
#menu ul li:last-child a {
    border-bottom: 1px solid #eee;
}
#menu ul li a:hover {
    letter-spacing: 1px;
}
body.open #menu {
    left: 0;
}
/* MAIN PAGE */
.page-wrap {
   
    padding: 50px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;

    -webkit-transition: all .3s ease-in;
       -moz-transition: all .3s ease-in;
         -o-transition: all .3s ease-in;
            transition: all .3s ease-in;
}
body.open .page-wrap {
    margin-left: 300px;
}

/* MENU TOGGLE ICON */

button:focus {
    outline: none;
}
#menu-toggle {
    position: relative;

    width: 51px;
    height: 51px;

    cursor: pointer;

    border: none;
    -webkit-border-radius: 50px;
       -moz-border-radius: 50px;
            border-radius: 50px;
    background: #fff;
}
#menu-toggle:before,
#menu-toggle:after {
    position: absolute;

    content: "";
    content: "";
    -webkit-transition: all .5s ease;
       -moz-transition: all .5s ease;
         -o-transition: all .5s ease;
            transition: all .5s ease;

    background-color: #232629;
}

#menu-toggle:before {
    top: 12px;
    left: 25px;

    width: 1px;
    height: 27px;
}
#menu-toggle:after {
    top: 25px;
    left: 12px;

    width: 27px;
    height: 1px;
}

body.open button#menu-toggle:before,
body.open button#menu-toggle:after {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
/* CONTENT CONTAINER */
.container {
    max-width: 600px;
    min-width: 200px;
    margin: 0 auto;
}

            
          
!
            
              
//Exelent little functions to use any time when class modification is needed
function hasClass(ele, cls) {
    return !!ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}

function addClass(ele, cls) {
    if (!hasClass(ele, cls)) ele.className += " " + cls;
}

function removeClass(ele, cls) {
    if (hasClass(ele, cls)) {
        var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
        ele.className = ele.className.replace(reg, ' ');
    }
}

//Add event from js the keep the marup clean
function init() {
    document.getElementById("menu-toggle").addEventListener("click", toggleMenu);
}

//The actual fuction
function toggleMenu() {
    var ele = document.getElementsByTagName('body')[0];
    if (!hasClass(ele, "open")) {
        addClass(ele, "open");
    } else {
        removeClass(ele, "open");
    }
}

//Prevent the function to run before the document is loaded
document.addEventListener('readystatechange', function() {
    if (document.readyState === "complete") {
        init();
    }
});
            
          
!
999px
Loading ..................

Console