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:

Fíjate en el código actual

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.

Observa el actual código

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.

Observa el código actual

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 $ith 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");

  });
})

Observa el actual código

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.

Resultado final

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.