Pure CSS Sliding Nav in TWBS Grid w/ Nested Nav

Uses 2D transformations and :target pseudo-class to achieve pure CSS sliding navigation. Could be applied to any type of element.

by kpowz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class='container'>
    <div class='row'>
        <section id='outterContainer' class='col-md-2 gus-nav'>
           <ul> <li>tra</li> <li>lalala</li> <li>la</li> <li>haha</li> <li>hga</li></ul>
        </section>
        <main class='col-md-10'>
            <p>ba</p>
            <p>ba2</p>
            <p>ba3</p>
        </main>
    </div>
</div>

CSS

.slider-container {
    border:1px solid lime;
    overflow:hidden;
    position:relative;
    /* the container's height will determine the height of its slider  */
    /* set height here if desired */
}
.gus-nav {
    padding: 0;
    height: 6em;
}
.gus-nav:hover ul{
    visibility: visible;
}
.gus-nav ul{
    position: absolute;
    left: 99%;
    visibility: hidden;
}
section{
    z-index: 1;
    background-color: yellow;
}
main{
    background-color: lime;
}
.slider {
    /* complete liquid height based on the parent's height!! */
    height:100%;
    /* only transition on transform properties which are hardware accelerated = way better performances */
    -webkit-transition:-webkit-transform .3s ease;
    -moz-transition: -moz-transform .3s ease;
    -ms-transition: -ms-transform .3s ease;
    transition: transform .3s ease;
    -webkit-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    transform: translate(0, 100%);
}
div:target .slider {
    /* visible */
    -webkit-transform: translate(0, 0%);
    -moz-transform: translate(0, 0%);
    -ms-transform: translate(0, 0%);
    transform: translate(0, 0%);
}
section:target .slider {
    /* completely offscreen */
    -webkit-transform: translate(0, 100%);
    -moz-transform: translate(0, 100%);
    -ms-transform: translate(0, 100%);
    transform: translate(0, 100%);
}
/* toggle link buttons */
 a.toggle2, a:hover.toggle2 {
    text-decoration: none;
}
a.collapse2 {
    display: none;
}
div:target a.expand2 {
    display: none;
}
div:target a.collapse2 {
    display: inline;
}
section:target a.expand2 {
    display: inline;
}
section:target a.collapse2 {
    display: none;
}
/* vert nav styles */
 .navbar-nav, .navbar-nav > li, .navbar-left, .navbar-right, .navbar-header {
    float:none !important;
}
nav li {
    border-bottom: 1px solid #ccc;
}
nav li:first-child {
    border-top: 1px solid #ccc;
}
/* -------- not interesting styles -----------...