"bootstrap left slide menu"
Bootstrap 3.3.0 Snippet by edsoltani

<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="wrapper" class=""> <div class="overlay" style="display: none;"></div> <nav class="navbar navbar-inverse navbar-fixed-top" id="sidebar-wrapper" role="navigation"> <ul class="nav sidebar-nav"> <li class="sidebar-brand"> <a href="https://github.com/FragCoder/bootstrap-left-slide-menu"> BLESM </a> </li> <li> <a href="https://github.com/FragCoder/bootstrap-left-slide-menu"><i class="glyphicon glyphicon-camera"></i> Photo</a> </li> <li> <a href="https://github.com/FragCoder/bootstrap-left-slide-menu"><i class="glyphicon glyphicon-facetime-video"></i> Video</a> </li> <li> <a href="https://github.com/FragCoder/bootstrap-left-slide-menu"><i class="glyphicon glyphicon-headphones"></i> Music</a> </li> <li> <a href="https://github.com/FragCoder/bootstrap-left-slide-menu"><i class="glyphicon glyphicon-cloud"></i> Cloud</a> </li> <li> <a href="https://github.com/FragCoder/bootstrap-left-slide-menu"><i class="glyphicon glyphicon-th"></i> Apps</a> </li> <li> <a href="https://github.com/FragCoder/bootstrap-left-slide-menu"><i class="glyphicon glyphicon-cog"></i> Settings</a> </li> </ul> </nav> <div id="page-content-wrapper"> <button type="button" class="hamburger animated fadeInLeft is-closed" data-toggle="offcanvas"> <span class="hamb-top"></span> <span class="hamb-middle"></span> <span class="hamb-bottom"></span> </button> <div class="container"> ...YOUR CONTENT... </div> </div> </div>
body { position: relative; overflow-x: hidden; } body, html { height: 100%; } .nav .open > a { background-color: transparent; } .nav .open > a:hover { background-color: transparent; } .nav .open > a:focus { background-color: transparent; } #wrapper { padding-left: 0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } #wrapper.toggled { padding-left: 220px; } #wrapper.toggled #sidebar-wrapper { width: 220px; } #wrapper.toggled #page-content-wrapper { margin-right: -220px; position: absolute; } #sidebar-wrapper { background: #1a1a1a; height: 100%; left: 220px; margin-left: -220px; overflow-x: hidden; overflow-y: auto; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -webkit-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; width: 0; z-index: 1000; } #sidebar-wrapper::-webkit-scrollbar { display: none; } #page-content-wrapper { padding-top: 70px; width: 100%; } .sidebar-nav { list-style: none; margin: 0; padding: 0; position: absolute; top: 0; width: 220px; } .sidebar-nav li { display: inline-block; line-height: 20px; position: relative; width: 100%; } .sidebar-nav li:before { background-color: #1c1c1c; content: ''; height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: width 0.2s ease-in; -moz-transition: width 0.2s ease-in; -ms-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in; transition: width 0.2s ease-in; width: 3px; z-index: -1; } .sidebar-nav li:before { background-color: #6bb4e7; } .sidebar-nav li:hover:before { -webkit-transition: width 0.2s ease-in; -moz-transition: width 0.2s ease-in; -ms-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in; transition: width 0.2s ease-in; width: 100%; } .sidebar-nav li a { color: #dddddd; display: block; padding: 10px 15px 10px 30px; text-decoration: none; } .sidebar-nav li.open:hover before { -webkit-transition: width 0.2s ease-in; -moz-transition: width 0.2s ease-in; -ms-transition: width 0.2s ease-in; -o-transition: width 0.2s ease-in; transition: width 0.2s ease-in; width: 100%; } .sidebar-nav .dropdown-menu { background-color: #222222; -ms-border-radius: 0; border-radius: 0; border: none; -webkit-box-shadow: none; -ms-box-shadow: none; box-shadow: none; margin: 0; padding: 0; position: relative; width: 100%; } .sidebar-nav li a:hover, .sidebar-nav li a:active, .sidebar-nav li a:focus, .sidebar-nav li.open a:hover, .sidebar-nav li.open a:active, .sidebar-nav li.open a:focus { background-color: transparent; color: #ffffff; text-decoration: none; } .sidebar-nav > .sidebar-brand { font-size: 20px; height: 65px; line-height: 44px; } .hamburger { background: transparent; border: none; display: block; height: 32px; margin-left: 15px; position: fixed; top: 20px; width: 32px; z-index: 999; } .hamburger:hover { outline: none; } .hamburger:focus { outline: none; } .hamburger:active { outline: none; } .hamburger.is-closed:before { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; content: ''; display: block; font-size: 14px; line-height: 32px; -ms-opacity: 0; opacity: 0; text-align: center; width: 100px; } .hamburger.is-closed:hover before { -webkit-transform: translate3d(-100px, 0, 0); -moz-transform: translate3d(-100px, 0, 0); -ms-transform: translate3d(-100px, 0, 0); -o-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; display: block; -ms-opacity: 1; opacity: 1; } .hamburger.is-closed:hover .hamb-top { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; top: 0; } .hamburger.is-closed:hover .hamb-bottom { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; bottom: 0; } .hamburger.is-closed .hamb-top { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; top: 5px; } .hamburger.is-closed .hamb-middle { margin-top: -2px; top: 50%; } .hamburger.is-closed .hamb-bottom { -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; bottom: 5px; } .hamburger.is-closed .hamb-top, .hamburger.is-closed .hamb-middle, .hamburger.is-closed .hamb-bottom, .hamburger.is-open .hamb-top, .hamburger.is-open .hamb-middle, .hamburger.is-open .hamb-bottom { height: 4px; left: 0; position: absolute; width: 100%; } .hamburger.is-open .hamb-top { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); -moz-transition: -moz-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); -ms-transition: -ms-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); -o-transition: -o-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); transition: transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); margin-top: -2px; top: 50%; } .hamburger.is-open .hamb-middle { display: none; } .hamburger.is-open .hamb-bottom { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: -webkit-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); -moz-transition: -moz-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); -ms-transition: -ms-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); -o-transition: -o-transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); transition: transform 0.2s cubic-bezier(0.73, 1, 0.28, 0.08); margin-top: -2px; top: 50%; } .hamburger.is-open:before { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; content: ''; display: block; font-size: 14px; line-height: 32px; -ms-opacity: 0; opacity: 0; text-align: center; width: 100px; } .hamburger.is-open:hover before { -webkit-transform: translate3d(-100px, 0, 0); -moz-transform: translate3d(-100px, 0, 0); -ms-transform: translate3d(-100px, 0, 0); -o-transform: translate3d(-100px, 0, 0); transform: translate3d(-100px, 0, 0); -webkit-transition: all 0.35s ease-in-out; -moz-transition: all 0.35s ease-in-out; -ms-transition: all 0.35s ease-in-out; -o-transition: all 0.35s ease-in-out; transition: all 0.35s ease-in-out; display: block; -ms-opacity: 1; opacity: 1; } .overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: #000000; background-color: rgba(0, 0, 0, 0.3); z-index: 1; } .hamb-bottom, .hamb-middle, .hamb-top { background-color: black; }
$(document).ready(function () { var trigger = $('.hamburger'), overlay = $('.overlay'), isClosed = false; function buttonSwitch() { if (isClosed === true) { overlay.hide(); trigger.removeClass('is-open'); trigger.addClass('is-closed'); isClosed = false; } else { overlay.show(); trigger.removeClass('is-closed'); trigger.addClass('is-open'); isClosed = true; } } trigger.click(function () { buttonSwitch(); }); $('[data-toggle="offcanvas"]').click(function () { $('#wrapper').toggleClass('toggled'); }); });

Related: See More


Questions / Comments: