Sticky menu

Cómo crear un menú siempre pegado arriba (sticky bar)

Sticky barHoy voy a colgar aquí un pequeño tutorial para una persona que me ha preguntado como se hace una Sticky bar como la que tenía en el anterior tema de esta web. Se trata de un pequeño código CSS que se puede resumir en una sola propiedad “position:fixed;“.

El siguiente código no es más que un pequeño ejemplo para realizar un menú que siempre quede pegado en la parte superior de la pantalla. Es de gran utilidad para sitios que tienen un gran tamaño de alto (yo me he desecho de el ya que el estilo que he puesto en la web, lo hacen bastante inútil a mi modo de ver), de esta manera los usuarios podrán siempre tener a la vista el menú de navegación mientras hacen scroll sobre la web.

Crear una Sticky bar para el menú de tu página web

Como ya he dicho este es un pequeño ejemplo que se puede complicar todo lo que el código te permita. Primero vamos a ver el código HTML del archivo que llamé index.html

… y una vez visto que no tiene nada más que unos enlaces y texto de relleno vamos a eschar un vistazo al css que acompañará al archivo html.

Y con esto ya tendremos conseguido nuestro menú “pegajoso” para poder tener una página web un poco más vistosa y manejable (sobre todo en caso de un scrool demasiado lago). Si no te crees que esto vaya a funcionar, siempre puedes echar un vistazo al ejemplo, en el que he utilizado exactamente el mismo código que aquí muestro.

Deja un comentario