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, del cual podréis ver un ejemplo en menuSlide.
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"> </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>Demo en slideMenu
5 comentarios en “slideMenu”
-
kerberoS
Hola Jordi! Mi nombre es Diego, soy parte del Staff de Bahia Studio, gracias por la mención. Aclaro que nosotros no somos los autores del script de este menú, el script se llama Facy Menu.
Y en cuento lo de implementar la clase current para cada sección, ya trabajamos en eso. Nuevamente gracias.
Un abrazo.
-
PlayRoOm » Blog Archive » slideMenu con Mootools
[…] ha publicado un, poco común, post-tutorial de Javascript. Y la verdad es que creo que ha aportado un grano de arena más a esta gran comunidad de mentes […]
-
aporreador
@kerberoS, perdona no vi tu comentario antes. Gracias a ti y ya se que el script no es 100% vuestro pero yo usé vuestra versión, vuestras imágenes y demás por eso os menciono.
Ya veo que habéis implementado la pequeña mejora para ir moviendo la clase current, me alegro de que os haya servido.
Muchas gracias a vosotros
-
Enrique Ramirez
Muy bueno hermano. Justo lo que buscaba para el nuevo diseño de mi blog. Sólo me molesta un detalle: si no hay una clase “current” en ningún li, el efecto se pierde. ¿Habrá forma de arreglar esto? Claro ejemplo en la página de Bahia Studio http://www.bahiastudio.net/404 en donde el fondo sólo aparece al dar click.
De ahí en fuera, muy buen script hermano. ¡Felicidades!
-
Valeria
Hola
Desde BRM te invitamos a un encuentro de bloggers en el marco del Día del Emprendedor de Barcelona, que organiza Barcelona Activa, el 27 y 28 de mayo en el palacio de congresos de Barcelona.
La idea es reunirnos para intercambiar algunas ideas contigo, beber algo y sobre todo tomar parte en las actividades del evento.
Los ponentes y actividades son muy variadas e interesantes, como tu estarás invitado a través de BRM, tendrás un trato distinto al de los otros asistentes, incluso un contacto directo con los ponentes y organizadores.
Un saludo,
