Uno de los efectos más utilizados en el diseño web es el llamados menú pegajoso (sticky menu). Gracias a esta técnica podremos dejar “pegado” nuestro menú al hacer scroll, de forma que éste no desaparece, y el resto de la información pasa por detrás.

Menú Pegajoso (Sticky Menu)

Para conseguir este éfecto vamos a trabajar únicamente con Html5 y Scss.




 

Prescindimos del uso de JavaScript con la ventaja que ello conlleva. Ahorro de código y velocidad en nuestra web.

El html

Para comenzar creamos un lista con los elementos del menú pegajoso, donde incluiremos un logotipo.

 

Ménu de Navegación Responsive con Rotación 

 

El Scss

Aquí como siempre damos estilo a nuestro menú y crearemos el efecto, de tal manera que al hacer scroll, éste se quede fijo en la parte superior y el resto de información pase por detrás.

Como de costumbre siempre os recomiendo que escribáis el código, de esta forma aprendéis el código, para luego mejorarlo.

 

 

Calificación de Lectores
[Total: 2 Media: 4.5]

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Usamos cookies para personalizar su experiencia. Si sigue navegando estará aceptando su uso. Más Información | Cerrar