Inicio Apuntes FPApuntes DAW Cómo crear un menú siempre pegado arriba (sticky bar)

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

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Hoy 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;«.

Desde hace ya bastante tiempo, muchas páginas web nos ofrecen la posibilidad de añadir una barra de navegación fija en el header o dicho en inglés: sticky bar. Seguro que estas cansado de ver este tipo de menús, pues son estos aparecen en la parte superior y que te siguen cuando bajas en la página web.

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:

<html lang="es">
<head>
<meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="contenedor">
 
            <nav>
                <ul>
                    <li><a href="#">PI</a></li>
                    <li><a href="#">PO</a></li>
                    <li><a href="#">PA</a></li>
                    <li><a href="#">RA</a></li>
                    <li><a href="#">PIN</a></li>
                    <li><a href="#">POM</a></li>
                </ul>
            </nav>
 
            <header> 
                <h1><a href="https://entreunosyceros.net" rel="nofollow">entreunosyceros.net</a></h1>
            </header>  
 
            <div class="contenido">  
                
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum felis, feugiat et dictum id, vulputate non mi. Nullam hendrerit quis elit at tristique. Praesent adipiscing quam mattis, iaculis orci ac, adipiscing erat. Nam ac dignissim enim. Curabitur nec tempor tortor. Suspendisse fermentum id sapien sit amet porttitor. Proin facilisis, est ut laoreet consectetur, odio nibh lobortis felis, at pulvinar enim elit nec neque. Proin nibh elit, aliquam et convallis a, aliquet quis elit. Sed augue nunc, sollicitudin vel tellus at, tristique ultrices ligula. Etiam blandit interdum nulla eget accumsan. In blandit varius gravida.
                </p>
                <p>
                    Etiam sit amet libero ac tortor tempor consequat. Pellentesque pharetra sem sed felis lobortis cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque in dui nisi. Morbi eu leo elementum, vehicula odio et, fermentum mauris. Etiam nec lacus iaculis, viverra urna ut, vehicula sem. Etiam vestibulum congue ipsum, id euismod magna hendrerit id. Nulla commodo elit eget eros blandit convallis. Sed fermentum nisi vel mi pretium, ut ullamcorper eros mattis. Sed ornare lacus augue, eget ultricies risus varius vitae. Duis condimentum tincidunt odio, sed ultrices velit vulputate sit amet. Morbi magna nibh, vehicula sed blandit id, facilisis eget leo. Aliquam ultricies purus laoreet ipsum dictum, ut mollis sapien mattis. In hac habitasse platea dictumst. Nunc in sem eget tortor facilisis porta.
                </p>
                <p>
                    Mauris dapibus ligula quis orci lobortis lobortis. Vestibulum interdum adipiscing risus, quis placerat ante fermentum nec. Donec sapien diam, vulputate a lacus sed, accumsan semper diam. Vivamus non blandit leo. Integer rhoncus a nunc sed porttitor. Vivamus feugiat gravida mollis. Cras eu eros in sapien elementum rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque pharetra auctor ultrices.
                </p>
                <p>
                    Vestibulum porttitor velit eu suscipit dignissim. Maecenas eget lacus nec lacus condimentum faucibus. Suspendisse augue nibh, hendrerit in turpis vitae, mollis tempor urna. Nulla facilisi. Fusce ac mattis purus. Ut id condimentum mauris. Duis fermentum dolor et urna ullamcorper eleifend. Fusce at tortor diam. Aenean accumsan mi justo, sit amet consequat lectus hendrerit ac. Quisque tincidunt mattis tortor eget venenatis. Nam sed velit dictum lorem semper placerat id nec urna.
                </p>
                <p>
                    Maecenas lectus risus, molestie tempus volutpat non, consequat et enim. Morbi eu massa ac sem hendrerit suscipit. Vivamus risus lacus, bibendum ac elit eget, luctus suscipit magna. Suspendisse sodales, enim ut scelerisque aliquet, nisi nunc pretium massa, vel feugiat elit dolor nec tortor. Vivamus at sapien id eros sagittis imperdiet. Suspendisse tincidunt, sapien ut varius gravida, enim felis laoreet ante, ut fermentum erat arcu vitae dolor. Donec vel quam ipsum. Morbi eleifend urna sem, id consectetur felis fermentum sed. Nam purus lectus, eleifend id eros ut, dapibus dictum tellus. Cras eleifend scelerisque imperdiet.
                </p>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ipsum felis, feugiat et dictum id, vulputate non mi. Nullam hendrerit quis elit at tristique. Praesent adipiscing quam mattis, iaculis orci ac, adipiscing erat. Nam ac dignissim enim. Curabitur nec tempor tortor. Suspendisse fermentum id sapien sit amet porttitor. Proin facilisis, est ut laoreet consectetur, odio nibh lobortis felis, at pulvinar enim elit nec neque. Proin nibh elit, aliquam et convallis a, aliquet quis elit. Sed augue nunc, sollicitudin vel tellus at, tristique ultrices ligula. Etiam blandit interdum nulla eget accumsan. In blandit varius gravida.
                </p>
                <p>
                    Etiam sit amet libero ac tortor tempor consequat. Pellentesque pharetra sem sed felis lobortis cursus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque in dui nisi. Morbi eu leo elementum, vehicula odio et, fermentum mauris. Etiam nec lacus iaculis, viverra urna ut, vehicula sem. Etiam vestibulum congue ipsum, id euismod magna hendrerit id. Nulla commodo elit eget eros blandit convallis. Sed fermentum nisi vel mi pretium, ut ullamcorper eros mattis. Sed ornare lacus augue, eget ultricies risus varius vitae. Duis condimentum tincidunt odio, sed ultrices velit vulputate sit amet. Morbi magna nibh, vehicula sed blandit id, facilisis eget leo. Aliquam ultricies purus laoreet ipsum dictum, ut mollis sapien mattis. In hac habitasse platea dictumst. Nunc in sem eget tortor facilisis porta.
                </p>
                <p>
                    Mauris dapibus ligula quis orci lobortis lobortis. Vestibulum interdum adipiscing risus, quis placerat ante fermentum nec. Donec sapien diam, vulputate a lacus sed, accumsan semper diam. Vivamus non blandit leo. Integer rhoncus a nunc sed porttitor. Vivamus feugiat gravida mollis. Cras eu eros in sapien elementum rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque pharetra auctor ultrices.
                </p>
                <p>
                    Vestibulum porttitor velit eu suscipit dignissim. Maecenas eget lacus nec lacus condimentum faucibus. Suspendisse augue nibh, hendrerit in turpis vitae, mollis tempor urna. Nulla facilisi. Fusce ac mattis purus. Ut id condimentum mauris. Duis fermentum dolor et urna ullamcorper eleifend. Fusce at tortor diam. Aenean accumsan mi justo, sit amet consequat lectus hendrerit ac. Quisque tincidunt mattis tortor eget venenatis. Nam sed velit dictum lorem semper placerat id nec urna.
                </p>
                <p>
                    Maecenas lectus risus, molestie tempus volutpat non, consequat et enim. Morbi eu massa ac sem hendrerit suscipit. Vivamus risus lacus, bibendum ac elit eget, luctus suscipit magna. Suspendisse sodales, enim ut scelerisque aliquet, nisi nunc pretium massa, vel feugiat elit dolor nec tortor. Vivamus at sapien id eros sagittis imperdiet. Suspendisse tincidunt, sapien ut varius gravida, enim felis laoreet ante, ut fermentum erat arcu vitae dolor. Donec vel quam ipsum. Morbi eleifend urna sem, id consectetur felis fermentum sed. Nam purus lectus, eleifend id eros ut, dapibus dictum tellus. Cras eleifend scelerisque imperdiet.
                </p>
                <p>
                  Rellena esto con cosas para ver el resultado como se debe ....
                </p>
                
            </div>  
 
            <footer> 
                <h1>Se terminó!</h1>
            </footer>  
 
        </div>
</body>
</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.

* {
margin: 0;
padding: 0;
}
body {
background-color: #F0F0F0;
font-family: Arial, Helvetica;
font-size: 12px;
color: #000;
}
h1 {
font-family: Helvetica, Arial;
font-size: 40px;
font-weight: bold;
margin: 10px 0 10px 0;
}
h1 a {
text-decoration: none;
color: #9F1800;
}
h1 a:hover {
text-decoration: underline;
}
p {
margin-bottom: 15px;
text-align: justify;
}
header {
color: yellow;
max-width: 960px;
margin: auto;
margin-top: 55px;
}
.contenido, footer {
max-width: 960px;
margin: auto;
}

/*==== Menu ====*/
nav {
background-color: #5A5A5A;
height: 35px;
position: fixed; /*la propiedad que fija el menú*/
top: 0;
left: 0;
width: 100%;
}
nav ul {
width: 960px;
margin: auto;
}
nav ul li {
line-height: 35px;
display: inline-block;
padding-right: 50px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
nav ul li a:hover {
text-decoration: underline;
}

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.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Resumen de privacidad
cookies entreunosyceros

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible.

La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudarnos a comprender qué secciones de la web encuentras más interesantes y útiles.

Nunca almacenamos información personal de ningún tipo.

Tienes toda la información sobre privacidad, derechos legales y cookies en nuestra página sobre la política de privacidad o en la página sobre nuestra política de cookies.

Cookies necesarias

Las cookies estrictamente necesarias tiene que activarse siempre para que podamos guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no podremos guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies de terceros

Esta web utiliza las siguientes cookies adicionales:

- Mailchimp: Recordar si ya estás suscrito al boletín de noticias y sino ofrecértelo al salir.

- Accesibilidad: Para saber tus ajustes de accesibilidad en cada visita.

- Comentarios: Saber si has leído y aceptado nuestra política de privacidad a la hora de dejar un comentario en la web.

- Google Analytics: Localización para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

- Goggle Adsense: Anuncios personalizados según tu geolocalización y preferencias.

Dejar estas cookies activadas nos permite mejorar nuestra web.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.