Animado hamburguesa alternar iconos en puro CSS-Hamburgers. CSS

Vista prévia

Descripción

Hamburgers. CSS le ayuda a crear varios tipos de iconos de alternancia animados CSS3 para alternar la navegación de hamburguesas.

¿Cómo funciona?

Sólo tiene que incluir las hamburguesas. CSS en la sección Head de la página web y listo.

<link href="dist/hamburgers.css" rel="stylesheet">

La estructura básica de HTML para el icono de palanca de hamburguesas.

<div class="hamburger">

<div class="hamburger-box">


<div class="hamburger-inner"></div>

</div>
</div>

Agregue la clase CSS de su elección a los iconos de alternancia de hamburguesa. Clases disponibles:

• Hamburger – 3DX
• Hamburger – 3DX-r
• Hamburger – 3dy
• Hamburger – 3dy-r
• Hamburger – 3DXy
• Hamburger – 3DXy-r
• hamburguesa – flecha
• hamburguesa – flecha-r
• hamburguesa – flechaalt
• hamburguesa – flechaalt-r
• hamburguesa – flechaturn
• hamburguesa – flechaturn-r
• Hamburguesa – aburrido
• Hamburguesa – Collapse
• Hamburguesa – Collapse-r
• Hamburguesa – elástico
• Hamburguesa – elástico-r
• hamburguesa – enfático
• hamburguesa – enfático-r
• Hamburguesa – menos
• Hamburguesa – deslizador
• Hamburguesa – deslizador-r
• Hamburguesa – spin
• Hamburguesa – spin-r
• El Hamburger – Spring
• El Hamburger – Spring-r
• Hamburguesa – stand
• Hamburguesa – stand-r
• Hamburguesa – Squeeze
• Hamburguesa – Vortex
• Hamburguesa – Vortex-r

<div class="hamburger hamburger--collapse">

<div class="hamburger-box">


<div class="hamburger-inner"></div>

</div>
</div>

Agregue la clase CSS ' is-Active ' al icono de alternancia para activarla.

<div class="hamburger hamburger--collapse is-active">

<div class="hamburger-box">


<div class="hamburger-inner"></div>

</div>
</div>

Registro de cambios

v1.1.2 (12/04/2018)

• Corregido:! importante para los tipos que se basan en el color de fondo: transparente.
• Corregido: cambiar el valor predeterminado de $hamburger-Active-Hover-opacidad a $hamburger-Hover-opacidad.
• Corregido: cambiar el valor predeterminado de $hamburger-Active-Hover-Filter a $hamburger-Hover-Filter.
• Corregido: eliminados $hamburger-Hover-transición-duración y $hamburger-Hover-transición-temporización-función â & #128; tipos de & #148; se basan en la temporización personalizada, que los hacen inútiles.
• Añadido: cambiar el color de la hamburguesa en el estado activo

v0.9.3 (08/13/2018)

• Se agregaron nuevos tipos