El hamburger menu es uno de los recursos más empleados en diseño para dispositivos móviles. Este icono indica que el menú se encuentra escondido o minimizado y sólo aparecerá por completo cuando el usuario lo requiera. Probablemente, ya habías visto estos iconos en alguna de las aplicaciones que empleas en tu móvil.
El hamburger menu puede ser un recurso que se considere necesario en el diseño de aplicaciones móviles y al igual que muchos otros elementos y botones, posee diversos estados, por lo tanto, requiere de animaciones y transiciones para informar al usuario. En este artículo hemos recopilado algunos creativos ejemplos de animaciones de hamburger menu hechas por los talentosos desarrolladores que conforman la comunidad de Codepen. Esperamos que te sirvan de inspiración para tu próximo proyecto.
Hamburger Menu (with cheese)
See the Pen Hamburger Menu (with cheese) by Michael Smart (@mikedevelops) on CodePen.0
Para esta animación no sólo se emplea el icono típico del hamburger menu, sino que se hace uso de una ilustración de una hamburguesa. Al pinchar sobre la ilustración puedes ver como los ingredientes se separan uno del otro y al posar el cursor sobre alguno de ellos, podemos ver el título de dicha sección del menú. Es una forma bastante original y creativa de usar el hamburger menu, sin mencionar que llama la atención de los usuarios.
CSS Animated Hamburger Icon
See the Pen CSS Animated Hamburger Icon by Bryan (@Brydave) on CodePen.0
Para el icono de este hamburger menu, se ha hecho uso de una síntesis de una hamburguesa y todos sus ingredientes bien diferenciados mediante color y grosor de trazo; el pan, el queso, la lechuga y la carne poseen diferentes colores, de manera que aunque la síntesis emplea formas comunes, se entienden que el icono es una hamburguesa.
Para la animación, podemos ver como cada ingrediente va cayendo uno por uno, hasta el momento que se completa la hamburguesa, que sólo vemos brevemente porque el icono desaparece poco a poco, del mismo modo en que apareció.
Star Wars Toggle Icon
See the Pen Star Wars Toggle Icon Animation by Rıza Selçuk Saydam (@rss) on CodePen.0
Como su nombre indica, se ha utilizado como inspiración la saga Star Wars y los populares sables de luz como iconos. Si lo notas, las barras que forman el hamburger menu parecen estar cortadas, esto es así debido a que la parte de menos tamaño representan el mango de estos sables.
Al pinchar sobre el icono, podemos ver que el icono se transforma en una “x” y claramente podemos ver los sables de luz, incluso se ha usado un efecto para darles una especie de brillo, característicos de estas armas en la saga Star Wars.
Drawn Hamburger Transition
See the Pen Drawn Hamburger Transition by Jesse Couch (@designcouch) on CodePen.0
Para esta animación se emplea el icono común de hamburger menu, lo realmente interesante es la transición entre ambos estados del hamburger menu que parece como si se dibujara lentamente. Es una animación sencilla, pero que puedes ser suficiente para añadir interactividad a tu sitio.
Frosty Nav Toggle Effect
See the Pen Frosty Nav Toggle Effect by Graham Wilsdon (@GrahamWilsdon) on CodePen.0
Para esta animación se hace uso de un icono de hamburger menu de dos líneas. Al pinchar sobre el hamburger menu, no sólo puedes ver como este se transforman en una “X”, sino que ves como el fondo se desenfoca y se tiene acceso a un menú vertical.
Hamburger Icon with Morphin Menu
See the Pen Hamburger icon with Morphing Menu by Sergio (@Sergioandrade) on CodePen.0
En esta animación se hace uso de iconos comunes de hamburger menu, el detalle está en que al pinchar sobre el menú se coloca un círculo al lado derecho de la pantalla donde se han colocado los elementos de menú. Podría ser ideal para la página de una marca que use formas circulares como parte de su identidad visual.
Hamburger Menu animation with velocity.js
See the Pen Hamburger menu animation with velocity.js by Filippo (@filippo) on CodePen.0
Lo que realmente llama la atención de esta animación, aparte de su transición fluida cuando el hamburger menu cambia de estado, es los segundos tras el cambio, en donde las líneas que conforman el icono se mueve ligeramente, como si hubieran sido afectadas por el cambio rápido de formas.
Expanding Hamburger Navigation Icon
See the Pen Expanding Hamburger Navigation Icon by Ryan Canfield (@canfie1d) on CodePen.0
Este hamburger menu, a diferencia de las otras animaciones mencionadas, cambia de estado al colocar el cursor sobre el icono. Podemos ver que el icono se expande y se cambia la línea del centro por la palabra “Menu”. Al pinchar sobre esta palabra, cambia a la palabra “Close”, de manera que este icono posee tres estados y el menú no se visualiza hasta que se pincha sobre la palabra respectiva.
Full Screen Hamburger Menu
See the Pen Fullscreen Hamburger menu by Gerhard Bliedung (@bldng) on CodePen.0
Como su nombre indica, esta animación permite que el menú ocupe toda la pantalla. En su estado de reposo, se puede ver el icono usual en la parte superior de la pantalla, una vez que se pincha sobre el icono, tenemos acceso a un menú vertical. Se ha empleado también un color como fondo, de modo que no se puede ver la página de inicio hasta cerrar el menú.
Gooey Menu
See the Pen CSS Gooey Menu (Version 4) by Lucas Bebber (@lbebber) on CodePen.0
Este hamburger menu es un tanto distinto a los ejemplos mencionado anteriormente pues podemos notar que los elementos del menú se van alineado de forma horizontal en una sola línea. Asimismo, los vemos unidos por formas circulares.
Una vez que el cursor se posa sobre el icono del hamburger menu, éste se agranda ligeramente. Cuando se pincha sobre el icono, los elementos del menú aparecen y podemos ver que el icono del hamburger menu se ha transformado en una “x”.
jQuery/CSS Navigation Menu
See the Pen jQuery / CSS navigation menu by alan dunning (@alandunning) on CodePen.0
Este menú es lago distinto, pues al pinchar sobre el icono respectivo, vemos un rectángulo en donde se han colocado los elementos del menú en forma vertical. Es un estilo de diseño flat que luce bastante moderno y, al igual que el ejemplo, podría ser empleado con colores vibrantes.
Simple slide out menu
See the Pen Simple slide out menu by Noel Killebrew (@noelietrex) on CodePen.0
Al igual que Gooey Menu, este menú alinea las secciones que lo conforman en una línea horizontal. Al pinchar sobre el icono del hamburger menu, podemos ver como los elementos aparece y se alinean a la derecha del icono. Al pinchar nuevamente, el menú se minimiza y regresa a su estado original.
Animated triangle hamburger navigation
See the Pen Animated triangle hamburger navigation by Floris Smitskamp (@helloflow) on CodePen.0
En esta animación, se destaca el icono del hamburger menú al colocarlo sobre un fondo de diferente color en la esquina superior izquierda. Al pinchar sobre este icono, vemos como la figura triangular en la que se ha colocado el icono se transforma en un rectángulo y se van alineando los elementos del menú de forma vertical.
Hamburger Menu to Book Menu
See the Pen Hamburger Menu to Book Menu by Halil İbrahim Nuroğlu (@haibnu) on CodePen.0
Esta animación es bastante sencilla y lo que realmente llama la atención es que en uno de los estados no se emplea el icono común para indicar que el menú ya no se encuentra minimizado, sino que parecen ser libros uno al lado de otro. La transición entre el icono del hamburger menu y los libros es bastante fluida.
En conclusión…
Las animaciones y transiciones del hamburger menu son necesarias para la interactividad del sitio. No sólo pueden hacer lucir tu sitio más dinámico, sino que son necesarias para informar cuál de los estados del icono se encuentra activo. En este artículo hemos visto tanto animaciones experimentales como aquellas que pueden ser implementadas en cualquier sitio web, por lo que esperamos que te haya servido para darte una idea de cómo debes realizar animaciones para este tipo de menú.
