"Improved Boostrap Navbar Toggle"
Bootstrap 3.3.0 Snippet by skywalkapps

<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 ----------> <nav class="navbar navbar-inverse"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" data-label-expanded="Close" aria-expanded="false"> <span class="navbar-toggle-label">Menu</span> <span class="sr-only">(toggle)</span> <span class="navbar-toggle-icon"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </span> </button> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"></div> </nav> <nav class="navbar navbar-inverse"> <button type="button" class="navbar-toggle navbar-toggle-left collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2" data-label-expanded="Close" aria-expanded="false"> <span class="navbar-toggle-label">Menu</span> <span class="sr-only">(toggle)</span> <span class="navbar-toggle-icon"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </span> </button> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2"></div> </nav>
/*! * bootstrap-navbar-toggle v0.9.0 (https://skywalkapps.github.io/bootstrap-navbar-toggle) * Copyright 2017 Martin Staněk * Licensed under MIT */ /* Force show for the demo */ .navbar-toggle { display: block; } /* Navbar Toggle Extension */ .navbar-toggle { line-height: 1; } .navbar-toggle.navbar-toggle-left { float: left; margin-left: 15px; } .navbar-toggle-label { display: inline-block; vertical-align: top; color: #888; font-size: 14px; font-weight: bold; text-transform: uppercase; } .navbar-toggle-label + .navbar-toggle-icon { margin-left: 4px; } .navbar-inverse .navbar-toggle-label { color: #fff; } .navbar-toggle-icon { display: inline-block; } .navbar-toggle-icon > .icon-bar + .icon-bar { margin-top: 0; } /* Icon 1 */ .navbar-toggle-icon { position: relative; width: 22px; height: 14px; transform: rotate(0deg); transition: 0.5s ease-in-out; cursor: pointer; } .navbar-toggle-icon span { display: block; position: absolute; opacity: 1; left: 0; transition: 0.25s ease-in-out; } .navbar-toggle.collapsed .icon-bar:nth-child(1) { top: 0; } .navbar-toggle.collapsed .icon-bar:nth-child(2) { top: 6px; } .navbar-toggle.collapsed .icon-bar:nth-child(3) { top: 12px; } .navbar-toggle:not(.collapsed) .icon-bar:nth-child(1) { top: 6px; transform: rotate(45deg); } .navbar-toggle:not(.collapsed) .icon-bar:nth-child(2) { opacity: 0; } .navbar-toggle:not(.collapsed) .icon-bar:nth-child(3) { top: 6px; transform: rotate(-45deg); }
$(function(){ $('.navbar-toggle').on('click.bs.collapse', function(e){ if ($(this).data('label-expanded')) { var $toggleLabel = $(this).find('.navbar-toggle-label') if ($(this).hasClass('collapsed')) { // Save current label $(this).data('label-collapsed', $toggleLabel.text()) // Set new text $toggleLabel.text($(this).data('label-expanded')) } else { $toggleLabel.text($(this).data('label-collapsed')) } } }) });

Related: See More


Questions / Comments: