CSS Vertical Slider

Sliding panel transitions in pure CSS3.

HTML

<div id="container">
    <div id="things" class="panel">
        <section>
            <h1>Things</h1>
            <ul>
                <li>Something</li>
                <li>Something Else</li>
                <li>Something More</li>
            </ul>
        </section>
    </div>            
    <div id="stuff" class="panel">
        <section>
            <h1>Stuff</h1>
            <p>Test</p>
        </section>
    </div>
    <div id="stuff1" class="panel">
        <section>
            <h1>Stuff1</h1>
            <p>Test</p>
        </section>
    </div>
    
</div>
<nav>
    <ul>
        <li><a href="#things">Things</a></li>
        <li><a href="#stuff">Stuff</a></li>
        <li><a href="#stuff1">Stuffasdc</a></li>
    </ul>
</nav>

CSS

body{
    width: 400px;
    margin: 0 auto;
    position: relative;
}

#container{
    position: relative;
    overflow: hidden;
}

.panel {
    position: absolute;
    top: 0;
    padding-top: 100px;
    width: 400px;
    z-index: 1;
    opacity: 0;
    
    -webkit-transition: padding-top .3s linear, opacity .3s linear;
    -moz-transition: padding-top .3s linear, opacity .3s linear;
    -o-transition: padding-top .3s linear, opacity .3s linear;
    transition: padding-top .3s linear, opacity .3s linear;
}

.panel:target {    
    position: relative;
    z-index: 100;
    padding-top: 20px;
    opacity: 1;
}

/* Misc. Styles */

#things section{
    background: lightPink;
}

#stuff section{
    background: lightBlue;
}
#stuff1 section{
    background: lightBlue;
}

nav {
    position: fixed;
    top: 0;
    left: 0;
}

JavaScript

window.location.hash = "things";