Bootstrap Mobile Menu Icon Change To X Close


Answer :

Your JavaScript replaces the inner html of the #ChangeToggle element to show either the X or the hamburger icon. Precisely clicking on the X or the hamburger menu instead of the #ChangeToggle will remove the element being clicked on which I think prevents it from bubbling up. As Bootstrap's collapse plugin uses an event handler on the document to determine if an element has been clicked, the collapse plugin will never get notified.

I've created a small example where a click handler on the pink .outer area replaces the green .inner area. Note that clicking on the pink area (your #ChangeToggle) will lead to two events, where clicking on the green area (your X icon) will lead to a single event.

$(function() {   $('.outer')     .click(function() {       $('.outer').html('<div class="inner"></div>');       fired('.js-outer');     });    $(document).on('click', '.outer', function() {     fired('.js-document');   }); });  function fired(el) {   $(el).addClass('event--fire');   window.setTimeout(function() {     $(el).removeClass('event--fire')   }, 100); }
body {   font-family: Helvetica Neue, Helvetica, Arial; } .outer, .inner {   display: inline-block;   padding: 20px; } .outer {   border: 1px solid #c66;   background-color: #f99; } .inner {   border: 1px solid #6c6;   background-color: #9f9; } .event {   margin: 10px 0; } .event::before {   display: inline-block;   content: '';   border: 1px solid #ccc;   padding: 10px;   vertical-align: middle;   margin-right: 10px; } .event--fire:before {   background-color: #ff9; }
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>   <div class="outer">   <div class="inner">   </div> </div>  <div class="event js-outer">Event fires on .outer</div> <div class="event js-document">Event fires on document</div>

The easiest way to solve this issue for your navigation bar is to hide/show the X or hamburger icon instead of replacing. In the example below both the X and the hamburger icon are in the html, and toggling the class .hidden is used to show the correct icon.

$(function() {   $('#ChangeToggle').click(function() {     $('#navbar-hamburger').toggleClass('hidden');     $('#navbar-close').toggleClass('hidden');     }); });
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>  <nav class="navbar navbar-default">   <div class="container-fluid">     <!-- Brand and toggle get grouped for better mobile display -->     <div class="navbar-header">       <button id="ChangeToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">         <div id="navbar-hamburger">           <span class="sr-only">Toggle navigation</span>           <span class="icon-bar"></span>           <span class="icon-bar"></span>           <span class="icon-bar"></span>         </div>         <div id="navbar-close" class="hidden">           <span class="glyphicon glyphicon-remove"></span>         </div>       </button>       <a class="navbar-brand" href="#">Brand</a>     </div>      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">       <ul class="nav navbar-nav">         <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>         </li>       </ul>     </div>   </div> </nav>

Instead of adding a jQuery click handler next to Bootstrap's collapse plugin, you could also use the events fired by the collapse plugin to hide or show the correct icon. Use the shown.bs.collapse event to show the X icon, and the hidden.bs.collapse event to show the hamburger icon.

$(function() {      $('#bs-example-navbar-collapse-1')     .on('shown.bs.collapse', function() {       $('#navbar-hamburger').addClass('hidden');       $('#navbar-close').removeClass('hidden');         })     .on('hidden.bs.collapse', function() {       $('#navbar-hamburger').removeClass('hidden');       $('#navbar-close').addClass('hidden');             });    });
#navbar-close {   color: #888;   width: 22px;   height: 14px; }
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>  <nav class="navbar navbar-default">   <div class="container-fluid">     <!-- Brand and toggle get grouped for better mobile display -->     <div class="navbar-header">       <button id="ChangeToggle" type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">         <div id="navbar-hamburger">           <span class="sr-only">Toggle navigation</span>           <span class="icon-bar"></span>           <span class="icon-bar"></span>           <span class="icon-bar"></span>         </div>         <div id="navbar-close" class="hidden">           <span class="glyphicon glyphicon-remove"></span>         </div>       </button>       <a class="navbar-brand" href="#">Brand</a>     </div>      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">       <ul class="nav navbar-nav">         <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a>         </li>       </ul>     </div>   </div> </nav>


You don't need Javascript, CSS will do the Job

.navbar-toggle {     .icon-bar {         transition: 300ms ease-in-out;         background-color: #fff;         position: relative;         width: 24px;         height: 3px;     }     .icon-bar:last-child {         -webkit-transform: rotate(-45deg);         -ms-transform: rotate(-45deg);         -o-transform: rotate(-45deg);         transform: rotate(-45deg);         top: -7px;     }     .icon-bar:nth-child(2) {         -webkit-transform: rotate(45deg);         -ms-transform: rotate(45deg);         -o-transform: rotate(45deg);         transform: rotate(45deg);         top: 0px;     }     .icon-bar:nth-child(3) {         opacity: 0;     }     &.collapsed {         .icon-bar {             -webkit-transform: rotate(0deg);             -ms-transform: rotate(0deg);             -o-transform: rotate(0deg);             transform: rotate(0deg);                     top: 0;             opacity: 1;         }     } }

As of Bootstrap 4.1, the "hamburger" toggler is no longer <span> tags, and is now a single SVG icon background image.

Therefore it's simplest to swap it out with a little CSS. Then you can use another font icon (like FontAwesome) or a simple '✖' character...

   <button class="navbar-toggler collapsed border-0" type="button" data-toggle="collapse" data-target="#collapsingNavbar">         <span class="navbar-toggler-icon"></span>         <div class="close-icon py-1">✖</div>    </button>     /* hide close when burger shown */    .navbar-toggler.collapsed .close-icon {       display: none;    }     .navbar-toggler:not(.collapsed) .navbar-toggler-icon {       display: inline;    }

Demo

Another option is this animated hamburger:
https://codeply.com/p/L9HT5GaUtt


Comments

Post a Comment

Popular posts from this blog

Converting A String To Int In Groovy

Answer : Use the toInteger() method to convert a String to an Integer , e.g. int value = "99".toInteger() An alternative, which avoids using a deprecated method (see below) is int value = "66" as Integer If you need to check whether the String can be converted before performing the conversion, use String number = "66" if (number.isInteger()) { int value = number as Integer } Deprecation Update In recent versions of Groovy one of the toInteger() methods has been deprecated. The following is taken from org.codehaus.groovy.runtime.StringGroovyMethods in Groovy 2.4.4 /** * Parse a CharSequence into an Integer * * @param self a CharSequence * @return an Integer * @since 1.8.2 */ public static Integer toInteger(CharSequence self) { return Integer.valueOf(self.toString().trim()); } /** * @deprecated Use the CharSequence version * @see #toInteger(CharSequence) */ @Deprecated public static Integer toInteger(String self) { return toInteg
Read more

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Answer : if anyone pass through here, this is shorter solution: sudo chown -R $USER $HOME/.composer it seems to me the group information is missing in your command sudo chown -R <user> /home/<user>/.composer/cache/repo/https---packagist.org Shoud be sudo chown -R <user>:<group> /home/<user>/.composer/cache/repo/https---packagist.org But to avoid other permission issues, I would rather advise: sudo chown -R <user>:<group> /home/<user>/.composer/cache (you'll need access to other folders in there) and sudo chown <user>:<group> /home/<user>/.composer To make sure your user has permissions enough on the global composer folder. Mind the missing recursion so the user don't own keys created by root. If you need to find out the group: groups <user>
Read more

Android How Can I Convert A String To A Editable

Answer : As you probably found out, Editable is an interface so you cannot call new Editable() . However an Editable is nothing more than a String with Spannables, so use SpannableStringBuilder: Editable editable = new SpannableStringBuilder("Pass a string here"); If you only want to change the Spannables, never the text itself, you can use a basic SpannableString. Use Editable.Factory.getInstance().newEditable(str) From the android documentation: Returns a new SpannedStringBuilder from the specified CharSequence. You can override this to provide a different kind of Spanned.
Read more