Menú Fixed o Pegajoso en CSS

menu fixed thumbnail

Cuando hablamos de que queremos posicionar algún elemento de una forma fixed, nos referimos a que ese algo lo queremos pegado o fijo (como su traducción nos indica) en nuestra página. Te voy a explicar cómo hacer que un elemento, en este caso el menú superior sea un menú fixed, o pegajoso, a la parte superior del documento o en cualquier otra zona de tu diseño web.

En cuanto a tendencias de diseño en css, para 2015 se habla mucho últimamente de los menú fixed o menú fijo. Esto le da a la web una experiencia de usuario aún mayor, ya que el usuario que visita nuestro sitio web no va a tener que estar haciendo scroll para volver a la parte superior o donde quiera que se encuentre nuestro menú.

Esta técnica de fijar elementos en alguna parte del diseño de la web se usa mucho por ejemplo para poder posicionar elementos que queremos que siempre sean visibles a nuestro usuario.

Un ejemplo del uso de esta propiedad position:fixed es en las imágenes de fondo, pues cuando queremos que nuestro background-image se quede fijo en una zona de nuestro contendor solo tenemos que agregarle la propiedad background-attachment: fixed cubra por completo nuestro ancho y alto de un contenedor, lo único

Cómo crear un menú fixed en CSS

Esta tarea es tan fácil como comprender el uso de la propiedad position con si valor fixed, la cual nos quiere decir que si establecemos este valor en la propiedad antes nombrada a cualquier contenedor, este se quedará fijo en la posición que nosotros le designemos con top, right, bottom y left.

Veamos un ejemplo:

See the Pen apu314 version2 by apu314 (@apu314) on CodePen.

 ¿Cómo hacemos esto?

Bien, es sencillo. Al contenedor tenemos que agregarle el position: fixed y una posición left, right, bottom o top. Para ver cómo se hace vamos a comenzar paso a paso desde un documento en blanco para ir así explicando las distintas etapas del desarrollo de esta técnica.

 Código HTML

 

 

 Código CSS

 

Como se puede apreciar, al contenedor que tiene la clase fixed le he agregado un z-index: 999 para evitar que se posicione algún elemento que no queremos encima de éste. Lo que hacemos con eso  es que siempre vamos a tener a este contendor y su contenido encima de todos los demás. Jugar con la propiedad z-index es una forma de darse cuenta que el las etiquetas podemos tratarlas como si fueran capas superpuestas. El position: fixed ,  como ya dije anteriormente sirve para que el contendor y su contenido se quede pegado a una posición concreta en la página. Para posicionarlo, simplemente tenemos que jugar con los valores de las propiedades top, right, bottom y left.

Resultado

See the Pen Menú (cabecera) Fixed by apu314 (@apu314) on CodePen.


Esto es todo lo que quería explicar con esta pequeña guía de cómo crear un menú fixed o pegajoso en css. Espero te haya servido de ayuda y, ya sabes, cualquier duda, sugerencia o crítica directamente a los comentarios. Y, si quieres seguir viendo cosas tan interesantes como esta o los cursos que estoy subiendo a youtube no esperes más y subscríbete desde aquí mismo.