slideMenu

Como he tenido bastante tiempo libre con el puente y estudiar como que para otro día, he estado creando un menú para jordivillar.com.

Todo ha sido tomando como ejemplo el que tienen en Bahia Studio que espero que no les moleste que haya fusilado bastante parte de su código.

La función en JavaScript necesita mootools para funcionar y la podéis descargar desde este enlace menu.js

Antes de cerrar la etiqueta head deberemos llamar al código JS de la siguiente manera:


<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/menu.js"></script>
<script type="text/javascript">
	window.addEvent('domready', function() {
		new SlideList($E('ul', 'navbar'), {duration: 450});
	});
</script>

Una vez hecho esto tendremos que crear nuestro menú:


<div id="navbar">
	<ul>
		<li id="menu_inicio" class="current"><a href="#">Inicio</a></li>
		<li id="menu_about"><a href="#">About</a></li>
		<li id="menu_cv"><a href="#">CV</a></li>
		<li id="menu_contacto"><a href="#">Contacto</a></li>
		<li class="background"><div class="left">&nbsp;</div></li>
	</ul>
</div>

Y por última añadirle el estilo mediante el siguiente CSS:

ul {
	list-style: none;
} 
#navbar {
	margin: 20px;
	padding: 7px 0px 0px 14px;
	float: left;
	overflow: hidden;
	position: relative;
	background: url(img/bg_navbar.jpg) no-repeat;
	width: 429px;
	height: 38px;
}
#navbar ul li {
	float: left;
}
#navbar ul li a {
	text-indent: -9999px;
	z-index: 10;
	display: block;
	float: left;
	height: 27px;
	padding: 0px 8px;
	position: relative;
	overflow: hidden;
}

#navbar li.background {
	background: url(img/bg_menu_right.png) no-repeat top right;
	z-index: 8;
	position: absolute;
	visibility: hidden;
}

#navbar .background .izq {
	background: url(img/bg_menu.png) no-repeat top left;
	height: 25px;
	margin-right: 4px;
}

#menu_inicio a {
	width: 44px;
	background: url(img/inicio.png) no-repeat center;
}

#menu_about a {
	width: 50px;
	background: url(img/about.png) no-repeat center;
}

#menu_cv a {
	width: 20px;
	background: url(img/cv.png) no-repeat center;
}

#menu_contacto a {
	width: 80px;
	background: url(img/contacto.png) no-repeat center;
}

Está claro que es muy importante que la id navbar no debe cambiarse, ya que sino el JS no funcionará correctamente.

A parte como la realización estaba enfocada a Wordpress he añadido una mejora que creo que deberían incluir en Bahia Studio -ya que el CMS nos proporciona las funciones necesarias. Consiste en ir moviendo la class current dependiendo de la página en la que nos encontremos y que así el efecto de retorno lo haga hacia la página correspondiente. Con un poco de PHP lo podemos conseguir:

<li id="menu_inicio" <?php if (is_home()) echo " class=\"current\"";?>>
<a href="http://jordivillar.com">Inicio</a></li>
<li id="menu_about" <?php if (is_page(About)) echo " class=\"current\"";?>>
<a href="http://jordivillar.com/about">About</a></li>