Push Nav Experiment

Just playing around with building a nav that pushes in from the left, mostly for mobile screens.

by Travis Almand

HTML

<div id='header'>
    <span class='navBtn'>&equiv;</span>
    <span class='title'>Title</span>
    <span class='link'>Link</span>
</div>
<div id='nav'>
    <a href='#'>Item 1</a>
    <a href='#'>Item 2</a>
    <a href='#'>Item 3</a>
    <a href='#'>Item 4</a>
    <a href='#'>Item 5</a>
    <a href='#'>Item 6</a>
    <a href='#'>Item 7</a>
    <!--a href='#'>Item 8</a>
    <a href='#'>Item 9</a>
    <a href='#'>Item 10</a>
    <a href='#'>Item 11</a>
    <a href='#'>Item 12</a>
    <a href='#'>Item 13</a>
    <a href='#'>Item 14</a-->
</div>
<div id='content'>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis enim eget risus condimentum bibendum. In porta nibh ligula, sed elementum elit commodo non. Ut id lacinia turpis. Phasellus eget leo dui. Praesent non pulvinar quam, a egestas massa. Suspendisse imperdiet porta ante vel dictum. Nunc tristique volutpat lacinia. Fusce semper, mauris sit amet fringilla imperdiet, diam tellus accumsan nunc, et commodo mauris diam at sem. Ut tempus eget nisi sed viverra. Mauris eu leo sed tortor euismod tempor. Vestibulum vitae diam at lacus imperdiet dapibus id ac arcu. Quisque justo tortor, dapibus a diam vitae, faucibus facilisis sem. Etiam eget bibendum elit. Nullam a magna congue orci eleifend pretium et quis nisl. Quisque hendrerit velit nec diam faucibus porta. In hendrerit massa non semper sollicitudin.</p>
    <p>Integer eget ligula arcu. Donec placerat commodo aliquam. Morbi pretium elit sed dui tincidunt, ac dapibus nibh interdum. Nulla luctus porttitor nibh. Nam porta ornare justo, at malesuada neque pharetra id. Etiam consectetur velit semper tincidunt lacinia. Nulla gravida, sapien quis adipiscing posuere, justo dui bibendum nulla, at porta lorem nisl id purus. Pellentesque et urna gravida nulla elementum posuere. Nunc id nunc vel diam vulputate pharetra sit amet in lectus. Integer rutrum mi et enim ullamcorper semper. Sed orci nibh, interdum ut odio pellentesque, commodo eleifend enim....

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

html, body {
    overflow-x: hidden;
}

#header {
    background: black;
    color: white;
    font-weight: bold;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 20;
}
#header span {
    display: inline-block;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
}
#header span.navBtn {
    cursor: pointer;
    font-size: 30px;
    vertical-align: middle;
    width: 10%;
}
#header span.title {
    margin: auto;
    width: 78%;
}
#header span.link {
    font-size: 14px;
    width: 10%;
}

#nav {
    background: white;
    border-right: 2px solid black;
    font-size: 20px;
    height: 100%;
    left: -2000px;
    overflow: auto;
    position: fixed;
    transition: left .25s;
    top: 30px;
    width: 200px;
    z-index: 10;
}
#nav a {
    color: black;
    display: block;
    padding: 5px 10px;
}

#content {
    left: 0;
    position: absolute;
    top: 30px;
    transition: left .25s;
    width: 100%;
}
#content * {
    margin: 10px;
    padding-left: 10px;
}
}

JavaScript

var $navBtn = $('#header span.navBtn');
var $nav = $('#nav');
var $navLinks = $('#nav a');
var $content = $('#content');

$navBtn.on('click', function () {
    if (parseInt($nav.css('left'), 10) < 0) {
        $nav.css('left', 0);
        $content.css('left', 200);
    } else {
        $nav.css('left', -200);
        $content.css('left', 0);
    }
});

$nav.on('click', function () {
    $nav.css('left', -200);
    $content.css('left', 0);
});

$navLinks.on('click', function (e) {
    e.preventDefault();
    $nav.css('left', -200);
    $content.css('left', 0);
});