Iconos de navegación animados con jQuery y CSS3

Vista prévia

Descripción

Un conjunto de iconos de navegación con efectos de transición suaves al hacer clic en, construido con transiciones CSS3 & transforma y un pequeño script de jQuery. No se requieren imágenes. Creado por < a href = "https://codepen.io/hugo/pen/LmJsf" target = "_ blank" rel = "noopener" > Hugo .

Funcionamiento

Compile los estilos básicos para los iconos de navegación.

.menu1 {

cursor: pointer;

display: inline-block;

font-size: 10px;

height: 6em;

margin: 2%;

position: relative;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

width: 6em;

-webkit-tap-highlight-color: transparent;
}
.menu1 span {

background: #222222;

border-radius: 2em;

height: 0.8em;

position: absolute;

-webkit-transition: 0.2s ease-in-out;

transition: 0.2s ease-in-out;

width: 100%;

-webkit-tap-highlight-color: transparent;
}

Crear un menú de alternancia que se transformará en un botón de cierre cuando se hace clic en.

<div class="icon menu1"> <span></span> <span></span> <span></span> </div>
<div class="icon menu1 open"> <span></span> <span></span> <span></span> </div>

Las reglas CSS/CSS3 para el icono de alternancia animado.

.menu1 span { left: 0; }

.menu1 span:nth-child(1) { top: 1em; }

.menu1 span:nth-child(2) { top: 2.6em; }

.menu1 span:nth-child(3) { top: 4.2em; }

.open.menu1 span:nth-child(1) {

-webkit-transform: rotate(45deg) translate(1.1em, 1.1em);

-ms-transform: rotate(45deg) translate(1.1em, 1.1em);

transform: rotate(45deg) translate(1.1em, 1.1em);
}

.open.menu1 span:nth-child(2) { opacity: 0; }

.open.menu1 span:nth-child(3) {

-webkit-transform: rotate(-45deg) translate(1.1em, -1.1em);

-ms-transform: rotate(-45deg) translate(1.1em, -1.1em);

transform: rotate(-45deg) translate(1.1em, -1.1em);
}

Incluya la última versión de la biblioteca JavaScript de jQuery al final de la página.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

El JavaScript para habilitar la animación en el icono de alternancia.

$('.icon').on('click', function() {


$(this).toggleClass('open');
});