Off-Screen Navigation

index.html

<div id="main-nav" class="nav"><ul><li>OFF SCREEN NAV</li><li>Home</li><li>Contact</li><li>Find Us</li></ul></div>
<div class="content">
    <h1>Off Screen Navigation Example</h1>
    <h2>This is a dummy example of offcreen navigation</h2>
    <p><a href="#main-nav">Click To Open</a></p>
    <p><a href="#">Click to Close</a></p></div>

Off-Screen Navigation.markdown

Off-Screen Navigation

Barebones example of a css-only off-screen navigation

A Pen by C-Rodg on CodePen.

License.

style.css

* {
    margin: 0;
    padding: 0;
}
.nav {
    width: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    background: #000;
    color: #ccc;
    transition: width .5s ease-in-out;
}
.content {
    text-align: center;
    width: 100%;
    float: right;
    background: #ccc;
    transition: width .5s ease-in-out;
}

#main-nav:target {
    width: 20%;
}

#main-nav:target + .content {
    width: 80%;
}