Pure CSS Sliding Nav in 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'>
    <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'>slider toggle expand</a>
        <a class="collapse2 toggle2" href='#outterContainer'>slider toggle collapse</a>
    </div>
</section>
<section class='col-md-10'>
    <p></p>
     <p></p>
     <p></p>
</section>
</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 */ 
}


.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;
}


/* -------- 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;
}