Curso de técnicas de maquetación web #3. Sticky menu

En esta tercera clase del curso de técnicas de maquetación web, aprenderemos a crear un sticky menú para nuestros sitios web.

Uno de los componentes más importantes de cualquier página web son los menús. Estos elementos, contienen accesos directos a partes fundamentales de nuestro website.

Existen varias formas de maquetar los menús. Por ejemplo, podemos mostrarlos en una posición fija, siempre arriba. También en una posición relativa, de tal forma que cuando hagamos scroll, siempre nos acompañen. Sin embargo, existe otra forma de maquetar nuestros menús: en base a una posición sticky.

Un menú sticky es aquél que, cuándo hacemos scroll down, se esconde detrás de un elemento de la web para volver a aparecer cuándo este termina. ¡Vamos a ver como!

¡Ya lo tenemos! ¿Has visto qué fácil? En poco rato, hemos creado un sticky menú, de forma muy fácil. Es una forma muy interesante de mostrar los menús, sobretodo si queremos dar todo el protagonismo a aquella sección que “esconde” el menú.

Este tipo de efectos, también pueden crearse con Javascript. Sin embargo, vemos que con CSS también podemos lograrlo de forma simple.

En la siguiente clase, la cuarta de este curso, seguiremos viendo más técnicas para maquetar nuestros sitios web. En este caso, aprenderemos a hacer un menú hamburguesa, apta incluso para veganos.

Recuerda que si tienes alguna duda acerca de lo explicado en esta lección, tienes a tu disposición la pestaña de soporte de la intranet. ¡Nos vemos!

• Curso de técnicas de maquetación web #1. Hero Image
• Curso de técnicas de maquetación web #2. Sombras
• Curso de técnicas de maquetación web #3. Sticky menu
• Curso de técnicas de maquetación web #4. Menú hamburguesa
• Curso de técnicas de maquetación web #5. Transiciones
• Curso de técnicas de maquetación web #6. Acordeón
• Curso de técnicas de maquetación web #7. Pestañas o tabs
• Curso de técnicas de maquetación web #8. Animacioness
• Curso de técnicas de maquetación web #9. Formularios
• Curso de técnicas de maquetación web #10. Líneas con CSS