2

Como podria hacer para mostrar una animacion del menu hamburguesa en boostrap que me muestre una x al desplegar el menu y no el tipico menu hamburguesa:

Cuando se abra el menu, se cambie el icono a una X y cuando doy click en la x se cierre el menu, tal como se muestra en la imagen: De antemano gracias por su respuesta.

por ejemplo esto es lo que se muestra por defecto, el tipico menu hamburguesa

introducir la descripción de la imagen aquí

y esto es lo que quiero lograr aparece una X en vez del icono del menu hamburguesa introducir la descripción de la imagen aquí

asi poor ejemplo esto cuando lo llevan a un tamaño para celular y le dan click muestra un cambio en el boton ,mostrando una x, hay otros en donde aparecen ese cambio animado

1 respuesta 1

4

La clase que usa bootstrap para el icono de ese menu es navbar-toggle. introducir la descripción de la imagen aquí

Este es el botón del menú con la clase:

<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>

Entonces lo que tienes que hacer es cambiar esa clase por una que definas tu y luego en el CSS le agregas a esta clase la dirección de la imagen con la X. Como sigue en el siguiente ejemplo:

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

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

Prueba así a ver si te resulta

1
  • Bien gracias, voy a probarlo.
    – user11261
    Commented el 5 ago. 2016 a las 20:28

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.