<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <aside id="secundary" role="complementary"> <button id="btn-menu-secundary-open" class="btn btn-default"><span class="glyphicon glyphicon-menu-hamburger"></span> MENU</button> <button id="btn-menu-secundary-close" class="btn btn-default menu-secundary-active"><span class="glyphicon glyphicon-remove"></span> CLOSE</button> <nav class="hidden-print hidden-xs hidden-sm"> <ul class="nav"> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">Link 4</a></li> <li><a href="#">Link 5</a></li> </ul> </nav> </aside> <main id="primary" role="main"> <div class="container"> <div class="row"> <h1 class="page-header">Hello World</h1> </div> </div> </main> <!-- TIP: Use with EMMET aside#secundary[role="complementary"]>button#btn-menu-secundary-open.btn.btn-default{<span class="glyphicon glyphicon-menu-hamburger"></span> MENU}+button#btn-menu-secundary-close.btn.btn-default.menu-secundary-active{<span class="glyphicon glyphicon-remove"></span> CLOSE}+nav.hidden-print.hidden-xs.hidden-sm>ul.nav>li*5>a[href="#"]{Link $} main#primary[role="main"]>div.container>div.row>h1.page-header{Hello World} -->

#primary { width: auto; } #primary.menu-secundary-active { margin-left: 200px; } #secundary { background: black; width: 200px; height: 100%; position: fixed; overflow-y: auto; margin-left: -200px; padding-top: 50px; } #secundary.menu-secundary-active { margin-left: 0; } #btn-menu-secundary-open, #btn-menu-secundary-close { position: fixed; left: 10px; top: 10px; z-index: 1; } #btn-menu-secundary-open.menu-secundary-active, #btn-menu-secundary-close.menu-secundary-active { display: none; } /* TIP: Use with SCSS or SASS #primary, #secundary { @include transition(margin-left ease-in-out .15s); } */

jQuery(document).ready(function($) { $('#btn-menu-secundary-open, #btn-menu-secundary-close').click(function() { $('#primary, #secundary, #btn-menu-secundary-open, #btn-menu-secundary-close').toggleClass( 'menu-secundary-active' ); }); });