Hidden Nav Concept

Simple concept of hiding the nav behind the page's content to allow more screen space for that content.

by Travis Almand

HTML

<div id='back'>
    <div id='title'>Website Title</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>
    </div>
</div>

<div id='content'>
    <div id='tab'>&equiv;</div>
    <h1>Content</h1>
    <p>This is a simple experiment in a hidden nav system behind the page's content.</p>
    <p>You can change the transition parameters for #content to play with how it animates:</p>
    <p>transition: left .5s .5s, top .5s; is the default and will animate the top property first and then the left.</p>
    <p>transition: left .5s, top .5s .5s; does the opposite.</p>
    <p>transition: left .5s, top .5s; slides diagonally.</p>    
    <h2>Sub Title</h2>
    <p>Integer varius id nisi id sagittis. In hac habitasse platea dictumst. Aenean et dignissim nulla, vitae ultrices dui. Suspendisse vitae nisi eleifend, consequat quam at, bibendum ipsum. Praesent tempus sapien volutpat, aliquet diam ac, faucibus lorem. Curabitur dictum, nisl at lacinia mollis, lacus tortor ornare urna, vel suscipit ipsum metus non tortor. Nam purus turpis, accumsan ac velit non, pretium dictum erat. Pellentesque posuere felis orci, eget blandit nisi feugiat tempor. Maecenas nec egestas elit. Aenean at dui diam. Mauris eu velit non turpis bibendum cursus. Donec massa ante, venenatis et urna volutpat, consectetur eleifend ligula. Phasellus consectetur vel arcu vel imperdiet. Vestibulum metus elit, mattis sit amet consectetur vel, pellentesque in metus. Vestibulum a accumsan est, vitae varius augue.</p>
    <p>Nam vehicula ullamcorper augue in faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam eu dignissim quam. In hac habitasse platea dictumst. Curabitur in nisi erat. Vivamus ac hendrerit risus. Phasellus pellentesque tincidunt massa a ullamcorper. In hendrerit feugiat...

CSS

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


html, body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
    width: 100%;
}

#back {
    background: black;
    color: white;
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
}
#title {
    font-size: 20px;
    font-weight: bold;
    left: 10px;
    position: absolute;
    top: 10px;
}
#nav {
    left: 10px;
    position: absolute;
    top: 50px;
}
#nav a {
    color: white;
    display: block;
}

#tab {
    background: gainsboro;
    cursor: pointer;
    font-size: 30px;
    font-weight: bold;
    height: 30px;
    left: 0;
    line-height: 30px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 50px;
    z-index: 10;
}

#content {
    background: white;
    height: 100%;
    left: 0;
    min-height: 100%;
    overflow-y: scroll;
    padding: 20px;
    position: fixed;
    top: 0;
    transition: left .5s .5s, top .5s;
    width: 100%;
}

JavaScript

var back = document.getElementById('back');
var tab = document.getElementById('tab');
var content = document.getElementById('content');

back.addEventListener('click', function () {
    content.style.left = 0;
    content.style.top = 0;
});

tab.addEventListener('click', function () {
    if (parseInt(getComputedStyle(content).left, 10) > 0) {
        content.style.left = 0;
        content.style.top = 0;
    } else {
        content.style.left = '100px';
        content.style.top = '50px';
    }
});