Mobile "Push" Menu Prototype

by Travis

HTML

<div id="body" class="body">
    <ul id="menu" class="menu">
        <li>Ghostbusters</li>
        <li>Ghostbusters 2</li>
        <li>Scrooged</li>
        <li>Groundhog Day</li>
        <li>Lost In Translation</li>
    </ul>
    <div id="core">
        <button id="reveal">Reveal</button>
        <h1>Testing Menus</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita eos veniam quidem facilis reprehenderit dolorum laudantium labore architecto suscipit minus cupiditate aliquam tempora atque delectus impedit fuga odit eius aperiam!</p>
        <p>Eligendi sint repellat temporibus incidunt omnis reiciendis blanditiis ratione maxime quam modi voluptates assumenda veniam officia nesciunt ab tenetur perspiciatis similique! Fugiat suscipit odit ratione consectetur iusto ipsum alias beatae!</p>
        <p>Nisi odit quisquam quasi harum reprehenderit ut nam. Laudantium porro sit veniam consequatur labore obcaecati ut tempora nemo explicabo unde quae tenetur veritatis possimus eum expedita rem odio magnam ex!</p>
        <p>Distinctio error nihil similique delectus consectetur quam aperiam laborum ipsa repellendus iste quis quidem atque iure perspiciatis et. Numquam dicta iusto debitis corporis ratione! Consectetur commodi iusto corrupti natus maiores!</p>
        <p>Quo molestiae culpa ipsa impedit aliquid doloremque minima! Dolores eveniet repudiandae commodi fugit aspernatur! Consequatur tempore dolores deleniti dolorum nisi saepe id autem minus molestias officia natus nobis nesciunt iure.</p>
    </div>
</div>

CSS

.body {position:relative; left:0; transition:all ease 0.5s;}
.body-push {left:240px;}

.menu {
    color:#fff;
    width:240px;
    margin:0;
    padding:0;
    background:blue;
    position:fixed; 
    left:-240px;
    transition:all ease 0.5s;
}
.menu-open {left:0;}

JavaScript

var reveal = document.getElementById('reveal');
var body = document.getElementById('body');
var menu = document.getElementById('menu');

reveal.onclick = function() {
    
    // Toggle Menu Open Class
    if (menu.classList) {
        menu.classList.toggle('menu-open');       
    } else {
        var classes = menu.className.split(' ');
        var existingIndex = -1;
        for (var i = classes.length; i--;) {
            if (classes[i] === 'menu-open') {
                existingIndex = i;
            }
        }
        
        if (existingIndex >= 0) {
            classes.splice(existingIndex, 1);
        } else {
            classes.push('menu-open');
        }
        menu.className = classes.join(' ');
    }
    
    // Toggle Menu Open Class
    if (body.classList) {
        body.classList.toggle('body-push');       
    } else {
        var classes = body.className.split(' ');
        var existingIndex = -1;
        for (var i = classes.length; i--;) {
            if (classes[i] === 'body-push') {
                existingIndex = i;
            }
        }
        
        if (existingIndex >= 0) {
            classes.splice(existingIndex, 1);
        } else {
            classes.push('body-push');
        }
        body.className = classes.join(' ');
    }
    
    console.log("click!");
};