Cómo crear un menú fijo en tres sencillos pasos

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

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
ARTÍCULO ANTERIOR

¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.