Pure CSS Sliding Nav in TWBS Grid

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'>
            <div id='innerContainer'>
                <nav class="slider-container" class="navbar navbar-default">
                    <div class="navbar-header"> <a class="navbar-brand" href="#">GUM</a>

                    </div>
                    <nav id='nav-main' class="navbar navbar-default" role="navigation">
                        <ul class='nav navbar-nav'>
                            <li class="active"><a href='#'>my jobs</a>

                            </li>
                            <li><a href='#'>all jobs</a>

                            </li>
                            <li><a href='#'>create jobs</a>

                            </li>
                            <li><a href='#'>calendar</a>

                            </li>
                        </ul>
                    </nav>
                    <nav id='nav-admin' class="navbar navbar-default slider" role="navigation">
                        <ul class='nav navbar-nav'>
                            <li><a href='#'>manage customers</a>

                            </li>
                            <li><a href='#'>manage users</a>

                            </li>
                            <li><a href='#'>manage product</a>

                            </li>
                            <li><a href='#'>reporting tools</a>

                            </li>
                        </ul>
                    </nav>
                </nav> 
                <a class="expand2 toggle2" href='#innerContainer' title='admin menu'>Hey, You! <span class='glyphicon glyphicon-cog'></span></a>
                <a class="collapse2 toggle2" href='#outterContainer'title='admin menu'>Hey, You! <span class='glyphicon glyphicon-cog'></span></a>        

            </div>
        </section>
       ...

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;
}
.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 ----------- */
 body {
    background:#eee;
    margin:50px;
}
.slider {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing:border-box;
}
.row {
    border:1px solid red;
}