"side nav"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/srph/pen/pJpmxR?depth=everything&order=popularity&page=8&q=dashboard&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'><link rel='stylesheet prefetch' href='//fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400'><link rel='stylesheet prefetch' href='//fonts.googleapis.com/css?family=Montserrat:400,700'> <style class="cp-pen-styles">* { -webkit-box-sizing: border-box; box-sizing: border-box; } html, body { font-size: 14px; font-family: 'Source Sans Pro', sans-serif; font-weight: 300; } .top-bar { position: relative; height: 50px; padding: 15px 20px; } .container { position: relative; height: 100vh; width: 100%; overflow-x: hidden; background: #ddd; } .container.-expanded > .sidebar { margin-left: 0; } .container.-expanded > .content { width: calc(100% - 250px); } .container.-collapsed > .sidebar { margin-left: -250px; } .container.-collapsed > .content { width: 100%; } .container > .sidebar, .container > .content { float: left; -webkit-transition: all 0.24s cubic-bezier(1, 0.335, 0.89, 0.825); transition: all 0.24s cubic-bezier(1, 0.335, 0.89, 0.825); } .container > .sidebar { width: 250px; height: 100vh; background: #0094ff; } .container > .content { width: 100%; min-height: 100vh; padding: 10px; } .container > .content .heading { margin: 0; line-height: 1; font-weight: 300; } .btn { display: inline-block; height: 32px; line-height: 32px; font-family: 'Montserrat', 'Source Sans Pro', sans-serif; padding: 0 20px; color: #505057; background: #eee; border: 0; border-radius: 3px; } .btn:hover { background: #e1e1e1; } .btn.-top { margin-top: -6px; } .btn.-info { color: #fff; background: #0094ff; } .btn.-info:hover { background: #0085e6; } .clearfix:after { clear: both; } .clearfix .p-left { float: left; } .clearfix .p-right { float: right; } </style></head><body> <nav class="top-bar"> <button class="btn -top -info js-sidebar-expand"> <i class="fa fa-bars"></i> </button> </nav> <div class="container -expanded js-container"> <div class="sidebar"></div> <div class="content"> <div class="clearfix"> <h1 class="heading p-left">Home</h1> <button class="btn p-right">Create</button> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >var $container = document.querySelector('.js-container'); var $expand = document.querySelector('.js-sidebar-expand'); $expand.addEventListener('click', function(evt) { toggleClass($container, ['-collapsed', '-expanded']); }); function toggleClass(el, className) { if ( Array.isArray(className) ) { className.map(function(c) { toggleClass(el, c); }); } else { var classNames = el.className.split(' '); var index; el.className = (index = classNames.indexOf(className)) === -1 ? classNames.join(' ') + ' ' + className : splice(classNames, index, 1).join(' '); } } function splice(arr, index, count) { arr.splice(index, count); return arr; } //# sourceURL=pen.js </script> </body></html>

Related: See More

Rubik Presentation Page
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)
Side menu on hover
Fading Side Menu - Lets Focus on Content

Questions / Comments: