How would you animate the hamburger menu that comes by default in boostrap?

Question

How would you animate the hamburger menu that comes by default in boostrap?

Navigation

#1 by (4 votes)

2

How could I do to show an animation of the hamburger menu in boostrap that shows me an x when displaying the menu and not the typical hamburger menu:

When the menu is opened, the icon is changed to an X and when I click on the x the menu is closed, as shown in the image: Thank you in advance for your response.

for example this is what is shown by default, the typical burger menu

and this is what I want to achieve an X appears instead of the icon of the hamburger menu

so this example when they take it to a cell size and click it shows a change in the button, showing an x, there are others where that animated change appears

javascript html css

asked by Kpeski2814 05.08.2016 в 19:27

source

1 answer

hook pulls me out of the loop while it helps PHP - echo with content that has double quote and single quote

score 4 · Accepted Answer

The class that uses bootstrap for the icon of that menu is navbar-toggle.

This is the menu button with the class:

<button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

Then what you have to do is change that class for one that you define and then in CSS you add to this class the direction of the image with the X. As follows in the following example:

//El botón
<button class="imgX" (...)> </button>

//Y en el CSS:
.imgX {
background-image: url(images/imagenX.png);
}

Try this way to see if you find it