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

top feature image

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. De esta manera los usuarios podrán siempre tener a la vista el menú de navegación. Hacer scroll sobre la web ya no será un problema.

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. Ahora vamos a eschar un vistazo al css que acompañará al archivo html.

Y con esto ya tendremos conseguido nuestro menú “pegajoso”. Con ello conseguiremos una página web un poco más vistosa y manejable (evitando el 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