Menú siempre visible

Cómo hacer un menú flotante con jQuery

Peter Von Oostznanen

archivado en: JavaScript / 21 diciembre, 2014

Cuando una página es muy larga, no es mala idea hacer que la barra de navegación principal acompañe el scroll, de tal manera que el usuario no tenga que volver a subir para seleccionar otra opción. Con jQuery este efecto es muy fácil de conseguir (ver demo en plunker). Imaginemos que tenemos una barra de este tipo:

<nav id="menuFlotante">

<ul>

<li>Opción 1</li>

<li>Opción 2</li>

<li>Opción 3</li>

<li>Opción 4</li>

</ul>

</nav>

Con estas CSS:

#menuFlotante {

position:relative;

}

#menuFlotante ul {

margin: 0;

padding:0;

list-style-type: none;

background:#ededed;

border: 1px solid #ccc;

}

#menuFlotante li {

display:inline-block;

padding:0.1em;

width:100px;

border-right: 1px solid #ccc;

text-align:center;

}

Lo único que hay que hacer es redefinir su top cuando se hace scroll con el método homónimo de jQuery:

$(document).ready(function() {

$(window).scroll(function() {

$('#menuFlotante').css('top', $(window).scrollTop());

});

});

|| Tags:

valoración de los lectores sobre Menú siempre visible

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • estrellica valoración negativa
  • 3 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.