HTML5/CSS3

Cómo crear un menú pegajoso (Sticky Menu)

Índice
  1. Menú Pegajoso (Sticky Menu)
    1. Un poco de html para nuestro menú .
  2. El Scss de nuestro menú pegajoso

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 efecto 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.

Un poco de html para nuestro menú .

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 de nuestro menú pegajoso

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.

AJ Morales

Consultor de Marketing Digital, especializado en Marketing de Contenidos y Posicionamiento SEO 🚀. Me considero un apasionado de la tecnología y de la edición profesional de fotografías con Adobe Photoshop. Málaga ciudad con alma.

Ver comentarios

Publicaciones Recientes

Gemini Deep Research en Google Drive: Analiza Múltiples Documentos en Segundos y Ahorra Horas de Trabajo

Todos hemos estado allí: tienes 20 pestañas abiertas, cinco PDFs y tres hojas de cálculo,…

2 días Hace

Quitar la Marca de Agua en las Imágenes de Google Nano Banana

Si ya estás usando Google Nano Banana, sabes que es la herramienta que está redefiniendo…

3 semanas Hace

Límites de Gemini Gratis ¿Qué te ofrece la IA de Google sin pagar?

¿Te ha pasado? Estás en plena conversación con Gemini, fluyendo con ideas, y de repente……

3 meses Hace

Convierte una foto en una figura coleccionable con Nano Banana Gratis

¿Alguna vez soñaste con ser una de esas figuras coleccionables que tanto te fascinaban de…

3 meses Hace

Cómo Hacer un Video de Ciudad Emblemática con Veo 3

Imagina caminar por las calles iluminadas de París al atardecer, con la Torre Eiffel brillando…

3 meses Hace

Google Opal: Automatiza Tareas Diarias y Revoluciona Tu Productividad

¿Imaginas crear aplicaciones inteligentes que resuelvan tus problemas cotidianos sin escribir una sola línea de…

3 meses Hace

Esta página utiliza cookies para mejorar su rendimiento