"Side Menu Toggle"
Bootstrap 3.3.0 Snippet by code-bash

<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 class="navbar navbar-default navbar-truffle" role="navigation"> <div class="container"> <div class="navbar-header"> <a class="btn-menu navbar-truffle-toggle" href="#"> <span class="small-nav"><font face="Comic sans MS" size="2" color="white">Closed</font></span> <span class="full-nav"><font face="Comic sans MS" size="6" color="white">Opened</font></span> </a> </div> <div class=""> <ul class="nav navbar-nav"> <li class="active"> <a href="#"> <span class="small-nav" data-toggle="tooltip" data-placement="right" title="Home"> <span class="glyphicon glyphicon-home"></span> </span> <span class="full-nav"> Home </span> </a> </li> <li> <a href="#about-us"> <span class="small-nav" data-toggle="tooltip" data-placement="right" title="About Us"> <span class="fa fa-users"></span> </span> <span class="full-nav"> About Us </span> </a> </li> <li> <a href="#contact-us"> <span class="small-nav" data-toggle="tooltip" data-placement="right" title="Contact Us"> <span class="glyphicon glyphicon-comment"></span> </span> <span class="full-nav"> Contact Us </span> </a> </li> </ul> </div><!--/.nav-collapse --> </div> </div> <div> <h1>Side Menu Toggle</h1> <p>Click to open. </p> </div>
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css); body { padding-top: 15px; padding-left: 65px; } .navbar-default { background-color: #6600cc; border-color: #6600cc; } .navbar-truffle { position: fixed; top: 0px; left: 0px; width: 50px; height: 100%; border-radius: 0px; border: 0px; z-index: 1030; } .navbar-truffle.open { width: 140px; } .navbar-truffle > .container { padding: 0px; width: 100%; } .navbar-truffle .navbar-header, .navbar-truffle .navbar-brand { float: none; display: block; width: 100%; margin: 0px; } .navbar-truffle .navbar-brand { height: 50px; } .navbar-truffle > .container .navbar-brand { padding: 0px; margin: 0px; } .navbar-truffle > .container .navbar-brand > .small-nav { display: block; } .navbar-truffle > .container .navbar-brand > .small-nav > span.logo, .navbar-truffle.open > .container .navbar-brand > .full-nav { display: block; font-weight: bold; padding: 15px 2px 15px 3px; font-size: 18pt; } .navbar-truffle.open > .container .navbar-brand { width: 100%; padding: 15px 15px 60px; text-align: center; } .navbar-truffle.navbar-inverse > .container .navbar-brand > .small-nav > span.logo { /*color: rgb(255, 255, 255);*/ } .navbar-truffle .navbar-nav > li { float: none; } .navbar-truffle > .container .full-nav { display: none; } .navbar-truffle.open > .container .full-nav { display: block; } .navbar-truffle.open > .container .small-nav { display: none; } .navbar-truffle .navbar-collapse { padding: 0px; } .navbar-truffle .navbar-nav { float: none; margin: 0px; } .navbar-truffle .navbar-nav > li > a { padding: 0px; } .navbar-truffle .navbar-nav > li > a > span { display: block; font-size: 16pt; padding: 13px 15px 13px 12px; } .navbar-truffle .tooltip, .navbar-truffle .tooltip .tooltip-inner { max-width: auto; white-space:nowrap; } .navbar-truffle ~ .navbar-truffle-toggle > .nav-open { display: inline-block; } .navbar-truffle ~ .navbar-truffle-toggle > .nav-close { display: none; } .navbar-truffle.open ~ .navbar-truffle-toggle { left: 245px; } .navbar-truffle.open ~ .navbar-truffle-toggle > .nav-open { display: none; } .navbar-truffle.open ~ .navbar-truffle-toggle > .nav-close { display: inline-block; } .btn-purple, .btn-purple:hover, .btn-purple:focus, .btn-purple:Active { color: #6600cc; background-color: red; border-color: #6600cc; } .btn-purple:hover, .btn-purple:focus, .btn-purple:Active { background-color: red; border-color: #6600cc; } .navbar { background-image: none !important; } .navbar-purple { background:red; border-color: #6600cc; } .navbar-purple .navbar-brand, .navbar-purple .navbar-nav > li > a, .navbar-purple .navbar-brand:hover, .navbar-purple .navbar-nav > li > a:hover, .navbar-purple .navbar-brand:focus, .navbar-purple .navbar-nav > li > a:focus { color: rgb#6600cc;; } .navbar-purple .navbar-brand:hover, .navbar-purple .navbar-nav > li > a:hover, .navbar-purple .navbar-brand:focus, .navbar-purple .navbar-nav > li > a:focus, .navbar-purple .navbar-nav > .active > a, .navbar-purple .navbar-nav > .active > a:hover, .navbar-purple .navbar-nav > .active > a:focus { background-color: rgb(111, 84, 153); color: rgb(255, 255, 255); } .btn-menu { display: inline-block; /* padding: 6px 12px; */ margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; }
$(document).ready(function() { $('.navbar-nav [data-toggle="tooltip"]').tooltip(); $('.navbar-truffle-toggle').on('click', function(event) { event.preventDefault(); $('.navbar-truffle').toggleClass('open'); }); $('.nav-style-toggle').on('click', function(event) { event.preventDefault(); var $current = $('.nav-style-toggle.disabled'); $(this).addClass('disabled'); $current.removeClass('disabled'); $('.navbar-truffle').removeClass('navbar-'+$current.data('type')); $('.navbar-truffle').addClass('navbar-'+$(this).data('type')); }); });

Related: See More


Questions / Comments: