"Collapsable Sidebar Navigation"
Bootstrap 3.3.0 Snippet by cquick

<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 ----------> <div id="page-wrapper"> <div id="nav"> <div class="sidebar-toggle" id="menuToggle"> <i class="fa fa-bars"></i> </div> </div> <div id="sidebar-drawer-wrapper"> <ul> <li><i class="fa fa-dashboard fa-fw"></i><span>Dashboard</span></li> <li><i class="fa fa-address-book fa-fw"></i><span>Contacts</span></li> <li><i class="fa fa-cubes fa-fw"></i><span>Analysis</span></li> </ul> </div> <div id="main-content-wrapper" class="container-fluid"> <div class="jumbotron"> <h1>ASP.NET</h1> <p class="lead">ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.</p> <p><a href="http://asp.net" class="btn btn-primary btn-lg">Learn more »</a></p> </div> <div class="row"> <div class="col-md-4"> <h2>Getting started</h2> <p> ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that enables a clean separation of concerns and gives you full control over markup for enjoyable, agile development. </p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301865">Learn more »</a></p> </div> <div class="col-md-4"> <h2>Get more libraries</h2> <p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301866">Learn more »</a></p> </div> <div class="col-md-4"> <h2>Web Hosting</h2> <p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p> <p><a class="btn btn-default" href="http://go.microsoft.com/fwlink/?LinkId=301867">Learn more »</a></p> </div> </div> </div> </div>
body, html { height: 100%; margin: 0; padding: 0; } #page-wrapper { height: 100%; } #page-wrapper #nav { height: 45px; border-bottom: 1px solid #8d8d8d; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 2px; padding: 3px; } #page-wrapper .sidebar-toggle { width: 32px; height: 32px; font-size: 22px; padding: 4px; background: white; cursor: pointer; } #page-wrapper #sidebar-drawer-wrapper { position: absolute; top: 45px; width: 52px; background: #444; z-index: 10000; overflow-x: hidden; height: 100%; transition: width 0.5s ease-in-out; } #page-wrapper #sidebar-drawer-wrapper ul { padding: 0; margin: 0; list-style: none; } #page-wrapper #sidebar-drawer-wrapper ul li { font-size: 28px; padding: 2px; color: white; height: 48px; width: 230px; } #page-wrapper #sidebar-drawer-wrapper ul li span { font-size: 16px; margin-left: 4px; opacity: 0; visibility: collapse; transition: visibility 0.5s, opacity 0.3s; } #page-wrapper #main-content-wrapper { padding-left: 72px; padding-top: 12px; width: 100%; transition: padding 0.3s ease-in; transition-delay: 0.2s; } #page-wrapper.menuActive .sidebar-toggle { background: #1a7ca7; } #page-wrapper.menuActive #sidebar-drawer-wrapper { width: 230px; transition: width 0.4s ease-in-out; transition-delay: 0s; } #page-wrapper.menuActive #sidebar-drawer-wrapper ul li span { visibility: visible; opacity: 1; transition: visibility 0.5s, opacity 0.8s; } #page-wrapper.menuActive #main-content-wrapper { padding-left: 250px; transition: padding 0.4s ease-out; transition-delay: 0.1s; }
(function ($) { $("#menuToggle").click(function() { var pageWrapper = $("#page-wrapper"); if (pageWrapper.hasClass("menuActive")) { $(pageWrapper).removeClass("menuActive"); } else { $(pageWrapper).addClass("menuActive"); } }); })($);

Related: See More


Questions / Comments: