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">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class='container'>
    <div class='row'>
        <section id='' class='col-md-2 gus-nav'>
                <nav 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" 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> 
                <button data-target=".show-footer" data-toggle="collapse" class="btn btn-navbar" type="button" id="footer_btn">
                    Hey, You! 
                    <span class='glyphicon glyphicon-cog'></span>
                </button>
                

        </section>
        <section...

CSS

.gus-nav {
    padding: 0;
}

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

.row {
    border:1px solid red;
}