Los menús fijos son una tendencia en el diseño web hoy en día. Lucen bien, y son super útiles para los visitantes. Hoy, te mostraré cómo crear un ligero, funcional y bonito menú fijo para tu sitio web o para tu blog de WordPress.
El HTML
Vamos a empezar con lo básico: el HTML. Coloca este código justo después de la apertura del tag body de tu documento HTML. Si estás poniendo en práctica este tutorial en un blog de WordPress, este código debe ir dentro del fichero header.php.
<div id="fixmenu"> <a href="http://www.yoursite.com"><img src="path/to/yourlogo.png" alt="" /></a> <ul class="menu-fixed"> <li><a href="http://www.yoursite.com">Home</a></li> <li><a href="#header" id="srolltotop">Top</a></li> </ul> </div><!-- #fixmenu -->
Como puedes ver, hemos creado un contenedor (#fixmenu), el logo del sitio web enlazado y una lista url que contendrá los elementos de nuestro menú. Siéntete libre a la hora de añadir más elementos hasta satisfacer tus necesidades.
El CSS
El segundo paso es el CSS. Vamos a crear un menú fijo asombroso, así que pega el siguiente código dentro de tu fichero style.css (o como quiera que se llame).
#fixmenu{
width: 1122px;
height:30px;
margin-left:-48px;
padding:5px 48px;
position:fixed;
top:0;
background:#7eb7d9;
display:none;
}
.menu-fixed{
width: 260px;
float: right;
text-align: right;
padding:4px 0 5px 0;
list-style-type:none;
}
.menu-fixed li{ display:inline; }
.menu-fixed a{
ont-size:0.9em;
color:#fff;
text-shadow:1px 1px #5E8BC5;
padding:0 0 0 10px;
}
Si ejecutas este código en el navegador te percatarás de que no aparece nada de nada, ¿por qué? Pues es por la propiedad display:none que he añadido en el contenedor #fixmenu. Esto lo he hecho así porque símplemente queremos que nuestro menú fijo sea visible solo cuando el menú normal no pueda verse debido al scroll.
El jQuery
Entonces, ¿cómo podemos detectar cuando se ha hecho scroll en la página lo suficiente para saber que el header del sitio ya no se ve? Para ello vamos a utilizar jQuery, por supuesto. Pega este código al final de tu documento html. Si estás poniendo en práctica este tutorial en un blog de WordPress, este código debe ir dentro del fichero footer.php.. Por supuesto, asegúrate de haber incluido el framework jQuery antes de este código.
$(document).ready(function() {
$(window).scroll(function(){
if(document.body.scrollTop > 300)
$('#fixmenu').fadeIn( "slow", function() { });
else
$('#fixmenu').fadeOut( "slow", function() { });
});
$('a#srolltotop').click(function(){
$('html, body').animate({scrollTop:0}, 100);
return false;
});
});
Lo que hace este código es bastante simple: En la línea 3, detectamos si el documento se ha desplazado a más de 300 píxeles desde la parte superior. Si es así, se llama a la función de jQuery fadeIn() para poder visualizar el menú fijo. Por otro lado, la función fadeOut() se utiliza para ocultar el menú cuando la parte superior del documento sea visible.
En la línea 9, he añadido un poco de código para detectar cuando se activa el enlace #scrolltop. Un clic suavizará el desplazamiento hasta la parte superior del documento.
Fuente: catswhocode.com