"Bootstrap 3.3.7 Navbar Toggle Animations"
Bootstrap 3.1.0 Snippet by dhisaran

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> https://codepen.io/jorenerene/pen/vxKbJb <div class="container-fluid"> <div class="page-header"> <h1>Bootstrap <small>3.3.7</small> Navbar Toggle Animations</h1> <p class="lead">Based on <a href="https://codepen.io/bennettfeely/pen/twbyA" target="_blank">Navicon Transformicons</a> by <a href="https://codepen.io/bennettfeely/" target="_blank">Bennett Feely</a>.</p> </div> <div class="row"> <div class="col-sm-4"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle x collapsed" data-toggle="collapse" data-target="#navbar-collapse-x"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#top">.navbar-toggle.x</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse-x"> <ul class="nav navbar-nav navbar-right"> <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li> <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li> </ul> </div><!-- .navbar-collapse --> </nav> </div><div class="col-sm-4"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle uarr collapsed" data-toggle="collapse" data-target="#navbar-collapse-uarr"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#top">.navbar-toggle.uarr</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse-uarr"> <ul class="nav navbar-nav navbar-right"> <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li> <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li> </ul> </div><!-- .navbar-collapse --> </nav> </div><div class="col-sm-4"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle larr collapsed" data-toggle="collapse" data-target="#navbar-collapse-larr"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#top">.navbar-toggle.larr</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse-larr"> <ul class="nav navbar-nav navbar-right"> <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li> <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li> </ul> </div><!-- .navbar-collapse --> </nav> </div></div><div class="row"> <div class="col-sm-4"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle rarr collapsed" data-toggle="collapse" data-target="#navbar-collapse-rarr"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#top">.navbar-toggle.rarr</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse-rarr"> <ul class="nav navbar-nav navbar-right"> <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li> <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li> </ul> </div><!-- .navbar-collapse --> </nav> </div><div class="col-sm-4"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle plus collapsed" data-toggle="collapse" data-target="#navbar-collapse-plus"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#top">.navbar-toggle.plus</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse-plus"> <ul class="nav navbar-nav navbar-right"> <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li> <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li> </ul> </div><!-- .navbar-collapse --> </nav> </div><div class="col-sm-4"> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle minus collapsed" data-toggle="collapse" data-target="#navbar-collapse-minus"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#top">.navbar-toggle.minus</a> </div> <div class="collapse navbar-collapse" id="navbar-collapse-minus"> <ul class="nav navbar-nav navbar-right"> <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li> <li data-toggle="collapse" data-target="#navbar-collapse.in"><a href="#top">Link</a></li> </ul> </div><!-- .navbar-collapse --> </nav> </div></div></div>
.pen .navbar-toggle { border: none; background: transparent !important; } .pen .navbar-toggle:hover { background: transparent !important; } .pen .navbar-toggle .icon-bar { width: 22px; -webkit-transition: all 0.2s; transition: all 0.2s; } /* ANIMATED X */ .navbar-toggle.x .icon-bar:nth-of-type(1) { -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transform-origin: 10% 10%; -ms-transform-origin: 10% 10%; transform-origin: 10% 10%; } .navbar-toggle.x .icon-bar:nth-of-type(2) { opacity: 0; filter: alpha(opacity=0); } .navbar-toggle.x .icon-bar:nth-of-type(3) { -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transform-origin: 10% 90%; -ms-transform-origin: 10% 90%; transform-origin: 10% 90%; } /* ANIMATED X COLLAPSED */ .navbar-toggle.x.collapsed .icon-bar:nth-of-type(1) { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } .navbar-toggle.x.collapsed .icon-bar:nth-of-type(2) { opacity: 1; filter: alpha(opacity=100); } .navbar-toggle.x.collapsed .icon-bar:nth-of-type(3) { -webkit-transform: rotate(0); -ms-transform: rotate(0); transform: rotate(0); } /* END ANIMATED X */ /* ANIMATED RIGHT ARROW */ .navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(1) { transform: translate3d(0,0,0) rotate(0deg); transform-origin: right top; width: 22px; } .navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(2) { transform: translate3d(0,0,0) rotate(0deg); } .navbar-toggle.rarr.collapsed .icon-bar:nth-of-type(3) { transform: translate3d(0,0,0) rotate(0deg); transform-origin: right bottom; width: 22px; } .navbar-toggle.rarr .icon-bar:nth-of-type(1) { transform: translate3d(11px,6px,0) rotate(45deg); transform-origin: right top; width: 11px; } .navbar-toggle.rarr .icon-bar:nth-of-type(2) { /* transform: scale(0.75); */; } .navbar-toggle.rarr .icon-bar:nth-of-type(3) { transform: translate3d(11px,-6px,0) rotate(-45deg); transform-origin: right bottom; width: 11px; } /* END ANIMATED RIGHT ARROW */ /* ANIMATED LEFT ARROW */ .navbar-toggle.larr.collapsed .icon-bar:nth-of-type(1) { transform: translate3d(0,0,0) rotate(0deg); width: 22px; } .navbar-toggle.larr.collapsed .icon-bar:nth-of-type(2) { transform: translate3d(0,0,0) rotate(0deg); } .navbar-toggle.larr.collapsed .icon-bar:nth-of-type(3) { transform: translate3d(0,0,0) rotate(0deg); width: 22px; } .navbar-toggle.larr .icon-bar:nth-of-type(1) { transform: translate3d(0px,6px,0) rotate(45deg); transform-origin: left top; width: 11px; } .navbar-toggle.larr .icon-bar:nth-of-type(3) { transform: translate3d(0px,-6px,0) rotate(-45deg); transform-origin: left bottom; width: 11px; } /* END ANIMATED LEFT ARROW */ /* ANIMATED UP ARROW */ .navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(1) { transform: translate3d(0,0,0) rotate(0deg); width: 22px; } .navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(2) { transform: translate3d(0,0,0) rotate(0deg); } .navbar-toggle.uarr.collapsed .icon-bar:nth-of-type(3) { transform: translate3d(0,0,0) rotate(0deg); width: 22px; } .navbar-toggle.uarr .icon-bar:nth-of-type(1) { transform: translate3d(1px,0,0) rotate(-45deg); transform-origin: center center; width: 11px; } .navbar-toggle.uarr .icon-bar:nth-of-type(2) { transform: rotate(-90deg); transform-origin: center center; } .navbar-toggle.uarr .icon-bar:nth-of-type(3) { transform: translate3d(0px,-14px,0) rotate(-135deg); transform-origin: right top; width: 11px; } /* END ANIMATED UP ARROW */ /* ANIMATED PLUS */ .navbar-toggle.plus.collapsed .icon-bar:nth-of-type(1) { transform: translate3d(0,0,0) rotate(0deg); } .navbar-toggle.plus.collapsed .icon-bar:nth-of-type(2) { transform: translate3d(0,0,0) rotate(0deg); } .navbar-toggle.plus.collapsed .icon-bar:nth-of-type(3) { transform: translate3d(0,0,0) rotate(0deg); } .navbar-toggle.plus .icon-bar:nth-of-type(1) { transform: translate3d(0px,6px,0) rotate(90deg); transform-origin: center center; } .navbar-toggle.plus .icon-bar:nth-of-type(3) { transform: translate3d(0px,-6px,0) rotate(-90deg); transform-origin: center center; } /* END ANIMATED PLUS */ /* ANIMATED MINUS */ .navbar-toggle.minus.collapsed .icon-bar:nth-of-type(1) { transform: translate3d(0,0,0) rotate(0deg); } .navbar-toggle.minus.collapsed .icon-bar:nth-of-type(2) { transform: translate3d(0,0,0) rotate(0deg); } .navbar-toggle.minus.collapsed .icon-bar:nth-of-type(3) { transform: translate3d(0,0,0) rotate(0deg); } .navbar-toggle.minus .icon-bar:nth-of-type(1) { transform: translate3d(0,6px,0); } .navbar-toggle.minus .icon-bar:nth-of-type(3) { transform: translate3d(0,-6px,0); } /* END ANIMATED MINUS */ /* FORCE NAVBAR-TOGGLE */ .pen .navbar-header { float: none; } .pen .navbar-toggle { display: block; } .pen .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .pen .navbar-collapse.collapse { display: none !important; } .pen .navbar-nav { float: none !important; margin: 7.5px -15px; } .pen .navbar-nav > li { float: none; } .pen .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .pen .navbar-collapse.collapse.in { display: block !important; } .pen .navbar-brand { font-size:14px; }

Related: See More


Questions / Comments: