Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
Este tutorial te enseñará cómo crear y animar un icono de menú de hamburguesa y, a continuación, adjuntar un detector de eventos a través de jQuery para desencadenar un menú desplegable.
Usaré Jade (Pug) y Sass en lugar de vanilla HTML y CSS. Así que al menos deberías tener un conocimiento básico de estos motores de plantillas.
Creación del área de juegos
Comenzaremos con la implementación de un simple patio de recreo. Solo voy a proporcionar la plantilla de Jade junto con el estilo Sass, ya que este no es el ámbito del tutorial. Puedes tomarlo y usarlo o puedes crear tu propio diseño.
Archivo Jade:
body #container #header #body .content .left .right - for (i=1; i <= 5 ; i++ ) div( id="text" + i ) .content .left .right - for (j=6; j <= 10 ; j++ ) div( id="text" + j ) .content .left .right - for (k=11; k <= 15 ; k++ ) div( id="text" + k )
Archivo Sass:
=flex() display: -webkit-box display: -moz-box display: -ms-flexbox display: -webkit-flex display: flex =transition($time) -webkit-transition: all $time ease -moz-transition: all $time ease -ms-transition: all $time ease -o-transition: all $time ease transition: all $time ease html, body margin: 0 padding: 20px 0 +flex() justify-content: center //----------------------------------// #container width: 320px height: 550px background-color: #ebebeb overflow: hidden #header height: 45px background-color: #9b9b9b position: relative #body padding: 0 20px padding-top: 40px +flex() flex-direction: column justify-content: flex-start .content +flex() flex-direction: row justify-content: flex-start margin-bottom: 25px .left width: 100px height: 100px margin-right: 15px background-color: #e1e1e1 .right @for $i from 1 through 15 #text#{$i} margin-top: 10px width: 50 + random(100) + px height: 10px background-color: #e1e1e1
Nota: Aquí he creado dos combinaciones llamados flex
y transition
. Las combinaciones facilitan la reutilización de algunas reglas CSS al agruparlas. Siempre que necesite añadir display:flex
con todos los prefijos de proveedor, puedo usar +flex()
en su lugar, gracias a la combinación.
Usaremos esta estructura y construiremos sobre ella en el resto del tutorial.
El resultado final debería tener este aspecto:

Icono del menú de hamburguesa
Ahora es el momento de crear un menú de hamburguesa sencillo pero atractivo y después lo animaremos a través de CSS.
Añade un nuevo div dentro de #header
y denomínalo #hamburger
. A continuación, crea dos divs secundarios dentro de #hamburger
. Deben tener una clase común y un ID distinto cada uno.
#hamburger .strip#top .strip#bottom
Ahora tenemos que aplicar estilo al div padre #hamburger
y a los divs secundarios con la clase común .strip
.
#hamburger height: 100% width: 45 +flex() flex-direction: column justify-content: space-between padding-left: 20px
Establecemos la altura del div de forma que iguale a la de su div padre, que es #header
, definiendo height: 100%
. Además, establecemos un valor de anchura para este div primario, que definirá su región "clicable".
A continuación, añadimos flexbox con todos los prefijos de proveedor mediante las combinaciones, la cuales hemos creado antes.
Dado que queremos que nuestros divs .strip
se posicionen verticalmente, establecemos flex-direction: column
y luego usamos justify-content: space-between
para poner espacio entre los divs .strip
.
Después tenemos que empujar esos divs uno junto al otro añadiendo un margen inferior y superior a los respectivos divs.
#top margin-top: 17px #bottom margin-bottom: 17px
También añadimos padding-left: 20px
para mover los divs .strip
más hacia la derecha.
Lo siguiente es estilizar las tiras. Esto es relativamente fácil, basta definir el tamaño y el color de los divs.
.strip width: 25px height: 2px background-color: #ffffff
El resultado final con el icono del menú de hamburguesa debería tener este aspecto:

Lo siguiente es animar el icono del menú para que cuando se haga clic sobre él, se anime formando un signo cruzado.
Animando el icono del menú de hamburguesa
En este punto, vamos a usar jQuery básico para alternar algunas clases CSS.
Primero vamos a crear las clases CSS que vamos a alternar.
Vamos a utilizar la configuración de transformación y rotación de la propiedad transform
de CSS junto con la propiedad transition
.
En primer lugar, añade transiciones a los divs #top
y #bottom
mediante combinaciones con un parámetro de sincronización específico.
#top margin-top: 17px +transition(.25s) #bottom margin-bottom: 17px +transition(.25s)
Ahora tenemos que definir el estilo de las clases que se van a alternar.
Vamos a rotar y transformar cada div .strip
individualmente, por lo que necesitamos alternar diferentes clases tanto para los divs #top
como para los divs #bottom
.
#top margin-top: 17px +transition(.25s) &.topRotate transform-origin: center transform: translateY(4px) rotateZ(45deg) #bottom margin-bottom: 17px +transition(.25s) &.bottomRotate transform-origin: center transform: translateY(-5px) rotateZ(-45deg)
Aquí definimos el estilo para dos clases diferentes denominadas .bottomRotate
y .topRotate
, que se añadirán y eliminarán de sus respectivos divs de referencia, #top
y #bottom
.
Ten en cuenta que el tamaño diferente de la clase .strip
daría lugar a la necesidad de diferentes valores translateY
y rotateZ
para crear una animación adecuada del signo cruzado.
Alternar clases con jQuery
Definimos cómo se animará cada div .strip
cuando las clases topRotate
y bottomRotate
estén presentes. Sin embargo, todavía no hemos adjuntado un detector de eventos para alternar esas clases.
Crea un nuevo archivo JavaScript y utiliza el siguiente código para alternar las clases topRotate
y bottomRotate
a divs con los IDs #top
y #bottom
respectivamente.
$(document).ready(function(){ $("#hamburger").click(function(){ $("#top").toggleClass("topRotate"); $("#bottom").toggleClass("bottomRotate"); }); })
Ponemos todo nuestro código dentro de $(document).ready(function(){})
para esperar a que toda la página se cargue antes de realizar cualquier acción.
Al hacer clic en el el div #hamburger
, alternará las clases de los divs con IDs específicos.
Nota: No olvides añadir el archivo jQuery fuente al proyecto.
Creación de la lista del menú
El siguiente paso consiste en crear un menú con elementos de lista.
Utiliza la siguiente estructura bajo #header
:
#dropDown #background ul li Home li Blog li Projects li Authors li Jobs li Contact
Así que aquí usamos la etiqueta ul
como el padre con el fin de agrupar los elementos con etiquetas li
como descendientes. Además, con el fin de crear una animación de expansión en el fondo, también hemos añadido un div con el ID #background
.
Vamos a aplicar estilo a los elementos ul
y li
primero.
ul list-style: none padding: 0 margin: 0
Establece list-style
a none
para quitar las viñetas de los elementos dentro de ul
y fija también el padding
y el margin
a 0 para quitar todos los valores predefinidos.
Ahora aplica estilo los elementos li
:
li //display: none background-color: #9b9b9b color: #ffffff font-family: 'Quicksand', sans-serif font-weight: lighter font-size: 15px padding: 20px padding-left: 60px &:after position: absolute content: '' left: 60px width: 60% height: 1px bottom: 4px background: rgba(255, 255, 255, 0.25) &:last-child:after width: 0
Aquí he comentado display:none
con el fin de poder comprobar el resultado. Sin embargo, durante la animación, lo usaremos para ocultar inicialmente los elementos de la lista.
También añadí el pseudo-elemento after
y le apliqué un estilo con el fin de separar cada elemento li
con una línea recta. :last-child:after
quita esta línea para el último elemento li
.
Animación de la lista de menús
Ahora vamos a utilizar algunas directivas de control de Sass para añadir keyframes (fotogramas clave) de animación CSS con diferentes atributos a cada elemento li
.
@keyframes drop 0% opacity: 0 transform: scale(1.3) 100% opacity: 1 transform: scale(1) @keyframes fold 0% opacity: 1 transform: scale(1) 100% opacity: 0 transform: scale(0.7)
Aquí definimos nuestras animaciones de fotogramas clave drop
y fold
.
drop
sirve para animar la apertura de la lista del menú. El escalado inicial es un 30% más y se reduce al tamaño original a medida que la transparencia va de 0 a 1. La acción opuesta tiene lugar en fold
.
Ahora tenemos que adjuntar esos keyframes a los elementos li
. Esta es la parte en la que Sass nos resulta útil.
@for $i from 1 through 6 li:nth-child(#{$i}) animation: name: fold duration: 80ms*(6-$i) + 1ms timing-function: ease-in-out fill-mode: forwards li.anim:nth-child(#{$i}) animation: name: drop duration: 100ms*$i timing-function: ease-in-out fill-mode: forwards
Aquí utilicé un bucle for que va de 1 a 6 con el índice de $i
.
Ahora necesitamos usar este índice para adjuntar cada animación a elementos li
con diferentes duraciones.
En primer lugar, considera la línea li.anim:nth-child(#{$i})
.
Aquí estamos cogiendo el $i
th hijo del elemento li
con la clase anim
.
Vamos a alternar esta clase anim
. De manera que cuando sea añadida a los elementos li
, la animación del keyframe con el nombre de drop
será ejecutada. Cuando sea eliminada, la animación fold
entrará en acción.
Lo siguiente en importancia es el atributo duration
.
duration: 100 ms*$i
para la animación drop
está extendiendo la duración de la animación para cada incremento del número de un hijo. Por lo tanto, cuando este código es compilado, el primer hijo li
tendrá duration: 100 ms
, y el último hijo tendrá duration: 600ms
.
Esto proporcionará una sensación como si cada elemento se animase consecutivamente uno tras otro.
Hacemos lo mismo para la animación de fold
. Esta vez, el último elemento debe ser animado más rápido, por lo tanto establecemos duration: 80ms*(6-$i) + 1ms
. Los 1ms añadidos a la duración se deben al hecho de que cuando se establece la duración en 0, es probable que se produzcan algunos problemas y que la animación no funcione correctamente.
Cuando estábamos aplicando estilo al elemento li
, mencioné que necesitábamos usar display:none
para evitar la reproducción no deseada de la animación. Si no lo estableces en none
, verás que la animación de fold
se reproduce una vez que la página se ha cargado.
Si establecemos la propiedad display
en none
, no veremos eso, y después necesitamos mostrar el elemento li
antes de alternar la clase anim
.
Queremos que nuestras animaciones se reproduzcan cuando hagamos clic en el icono de la hamburguesa. Así que vamos a usar un poco de jQuery para establecer la propiedad display
de cada elemento li
a block
y también alternar la clase anim
.
$(document).ready(function(){ $("#hamburger").click(function(){ $("#top").toggleClass("topRotate"); $("#bottom").toggleClass("bottomRotate"); $("li").show(); $("li").toggleClass("anim"); }); })
Te habrás fijado que podemos ver la animación de cada elemento li
de forma individual. Sin embargo, preferimos tener una sensación de menú en expansión.
Para solucionarlo, simplemente debemos ampliar la altura de un div. Ese div es #background
, que inicialmente añadimos al crear los elementos ul
y li
.
#background width: 100% height: 0 background-color: #9b9b9b position: absolute +transition(.45s) &.expand height: 550px
Vamos a alternar la clase expand
para establecer el atributo height
en 550px
dentro de .45s
. Ten en cuenta que utilicé la combinación de transition
para definirla con un parámetro temporal específico.
Conclusión
A lo largo de este tutorial, hemos practicado cómo usar bucles dentro de HTML y CSS a través de los motores de plantillas Jade y Sass. Además de eso, creamos animaciones de keyframes CSS y las adjuntamos con diferentes atributos de duración a elementos HTML específicos. Luego alternamos las clases con jQuery para controlar esas animaciones.
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Update me weeklyEnvato Tuts+ tutorials are translated into other languages by our community members—you can be involved too!
Translate this post