En el post de hoy te enseñaré a crear un menú de navegación de estilo «hamburguesa» con CSS. Además, añadiremos animaciones al botón que activa este menú y al contenido principal de nuestra web.
Recuerda que puedes visualizar/descargar el ejemplo desde este enlace: ejemplo.
Se ha hablado mucho de los pros y contras de este estilo de menú, y aunque este post no está dedicado a la usabilidad, me gustaría que tuvieras en cuenta lo siguiente; este tipo de menú es más limpio en cuanto a diseño y añade interactividad a nuestra web, pero es menos intuitivo y para algunos usuarios puede resultar confuso. Tú decides cuando debes utilizarlo.
Importante! En este post es necesario utilizar Jquery a un nivel muy básico. Todos los movimientos y animaciones las crearemos con CSS3. Ya que Internet Explorer 9 no soporta animaciones.
Comenzando con nuestro menú hamburguesa con CSS
En el ejemplo que he preparado hay tres elementos principales o bloques:
- Un
header: botón que activa el menú. - Un
nav: enlaces a páginas o secciones de nuestra web. - Un
divosection: contenido de nuestra web.
Este sería el código básico de nuestra estructura en HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="wrapper"> <header id="#header"> <a href="#" id="menu_on"> <span></span> <span></span> <span></span> </a> </header> <nav> <ul> <li><a href="#">Home</a></li> .... </ul> </nav> <section id="content"> ...Contenido... </section> </div> |
Crear el botón que activa nuestro menú hamburguesa
Lo primero que vamos a hacer es crear un enlace <span> al que le daremos el id menu_on. Dentro de este enlace vamos a crear 3 etiquetas <span>, para crear las tres líneas de icono y animarlas posteriormente. Podríamos utilizar una imagen pero esta solución le da un toque extra a nuestro botón.
|
1 2 3 4 5 |
<a href="#" id="menu_on"> <span></span> <span></span> <span></span> </a> |
Código CSS
Lo primero que vamos a hacer es crear un botón que realmente será un enlace. Con las propiedades inline-block, with y height vamos a establecer las medidas de éste. También vamos a añadir la propiedad relative para poder posicionar las etiquetas <span> que hay dentro de nuestro enlace.
Para crear las tres líneas de nuestro icono definimos un alto y utilizamos position:absolute. Con transition y transform definimos la velocidad y el tipo de animación, además del origen de esta transformación.
Para la segunda línea, span #menu_on span:nth-child(2), vamos a definir un top de 50% -2px. ¿Qué hace este código? Este código le dice a este elemento que tiene que estar al 50% de #menu_on – 2px. Estos 2px son justo la mitad de la altura del span. Así quedará alineado en el centro.
En el caso de la tercera línea, span #menu_on span:nth-child(3), usamos la propiedad y el valor bottom:0px y la posicionamos debajo de nuestro botón.
Ya tendríamos nuestro botón. Más tarde lo animaremos.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
#menu_on{ display: inline-block; width:30px; height: 20px; position: relative; z-index: 2; } #menu_on span{ width: 100%; height: 4px; border-radius: 4px; display: block; position: absolute; background: #fff; transition: all 0.25s ease; /* Propiedades a animar | Tiempo | Tipo animación*/ transform-origin : 0px 100%; } #menu_on span:nth-child(2){ top: calc(50% - 2px); } #menu_on span:nth-child(3){ bottom: 0; } |
Creando nuestro menú vertical
El código HTML para nuestro menú es simple:
|
1 2 3 4 5 6 7 8 |
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> |
Para este menú utilizaremos position:fixed. Con position:fixed y las propiedades top y bottom haremos que nuestro menú ocupe toda la pantalla verticalmente y podamos moverlo sin que influya en los otros elementos de nuestra web. position:fixed hace que nuestra nav sea relativa a la ventana del navegador.
Además, vamos a añadir la propiedad y valor overflow-y:auto, para que cuando nuestro menú sea alto el usuario pueda hacer scroll y ver todos los enlaces.
Con left:-300px escondemos el menú de nuestra pantalla.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
nav{ position: fixed; top: 0; bottom: 0; left:-300px; /* Escondemos nuestro menú con un valor negativo */ width: 300px; z-index: 1; padding: 90px 30px 30px; background: #68C5DB; opacity: 0; transition: all 0.75s ease; font-size: 1.2em; overflow-y: auto; } |
Para los enlaces de nuestro menú utilizaremos este código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
nav a{ display:block; text-decoration: none; padding: 10px; color: rgba(255,255,255,0.75); border-bottom: 1px solid rgba(255,255,255,0.2); transition: all ease 0.25s; } nav a:hover{ color: rgba(255,255,255,1); border-bottom-color:rgba(255,255,255,0.4); } |
Añadir las animaciones y mostrar el menú
Cargar Jquery
Como decía al principio del artículo, hay que añadir un poco de código Jquery. Con éste código, el menú se mostrará u ocultará cuando el usuario haga click en él.
Primero debemos cargar la libreria jquery en el head de nuestro documento. Podemos descargar los archivos o simplemente cargarlos desde algún repositorio como he hecho yo en el ejemplo:
|
1 2 3 4 5 6 |
<script src="http://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"> </script> ... </head> |
toogleClass para añadir una clase a nuestro <body>
Ahora crearemos una función que añadirá una clase a nuestro <body> cuando el menú este activo. Para ello vamos a añadir el siguiente código. Es importante que lo hagas después de cargar jquery. Tendríamos algo así en nuestro <head>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- Primero cargamos Jquery --> <script src="http://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g=" crossorigin="anonymous"> </script> <!-- Creamos nuestra función --> <script type="text/javascript"> $( document ).ready(function() { $('#menu_on').click(function(){ // Al hacer click... $('body').toggleClass('visible_menu'); // Añadimos o eliminamos la clase 'visible_menu' al body }) }); </script> |
Crear las clases necesarias para mostrar nuestro menú
Ahora, cada vez que el usuario hace click en nuestro botón se añade la clase visible_menu, y a esta clase, podemos añadir estilos y propiedades de CSS para cambiar la apariencia, mostrarla u ocultarla. Para ello simplemente añadiremos .visible_menu antes del elemento a modificar, por ejemplo:
Icono del menú
El primer span vamos a rotarlo 45 grados con traslate para moverlo ligeramente y quede perfecto. En el caso del tercer span seguiremos la misma dinámica pero la rotación tendrá un valor negativo. Por último, en el caso del segundo <span> simplemente haremos que desaparezca:
|
1 2 3 4 5 6 7 8 9 10 11 |
.visible_menu span:nth-child(1){ transform: rotate(45deg) translate(-2px,1px); } .visible_menu span:nth-child(2){ opacity: 0; } .visible_menu span:nth-child(3){ transform: rotate(-45deg) translate(-3px,3px); } |
Menú
¿Recuerdas qué habíamos escondido nuestro menú hamburguesa con left:-300px? Es hora de mostrarlo. En el caso del menú simplemente reiniciando la propiedad a left:0px
|
1 2 3 4 |
.visible_menu nav{ left: 0; opacity: 1; } |
Contenido
Para el contenido también he añadido una pequeña animación, esta hace que se desplace al mismo tiempo que nuestro menú:
|
1 2 3 |
.visible_menu #content{ transform: translateX(260px); } |
Conclusión
Gracias a las transformaciones y animaciones CSS podemos crear efectos muy atractivos sin necesidad de utilizar demasiado código java scrip.
Espero que te haya gustado este tutorial. Recuerda que puedes descargar este ejemplo y utilizarlo en tus proyectos.
buenas noches anto. una pregunta como puedo hacer para que cuando el menú este desplegado no desplace el resto de elementos de la pagina.
En esta caso sólo deberías eliminar los estilos de css que aplican y desplazan el contenido.
Sería eliminar esta línea.
.visible_menu #content {
/* transform: translateX(260px); */
}
Espero que te haya servido 🙂
Hola Anto, si quisiera que el menú estuviera del lado derecho de la página en lugar del izquierdo…?