COMO HACER UN Men?? tipo acorde??n con efecto deslizante

  • julio 4, 2010

Antes de ponerlo considera que, Mootools no es compatible con la mayor??a de las librer??as de efectos, as?? que si usas jQuery, Prototype o Scriptaculous estoy casi seguro que no les funcionar??.
Adem??s que es un men?? de im??genes, as?? que cada qui??n deber?? crear sus im??genes con sus textos o lo que se le quiera agregar a la imagen.

Bien, habiendo aclarado lo anterior empecemos, primero hay que descargar este archivo, descomprimirlo y subirlo en alg??n alojamiento.

Ahora entra en Dise??o | Edici??n de HTML y pega antes de </head> lo siguiente:

<script src=’URL del archivo mootools-core.js‘ type=’text/javascript’/>
<script src=’URL del archivo byslidemenu.js‘ type=’text/javascript’/>
<style type=’text/css’>
ul.bsm{
margin: 0px auto;
border:1px solid #B0B0B0;
list-style-type: none;
}
ul.bsm li{
border-left:2px solid #FFFFFF;
}
ul.bsm li.first{
border-style: none;
}
ul.vertical li,
div.vertical div{
border-top: 2px solid #FFFFFF;
border-left-style: none;
}
</style>

Cambia lo que est?? en color verde por las URLs de los archivos que subiste previamente a tu alojamiento.

Luego pega antes de </body> esto:

<script type=’text/javascript’>
window.addEvent(&#39;load&#39;, function(){
var slideMenu = new BySlideMenu();
var verticalmenu = new BySlideMenu(&#39;verticalmenu&#39;, {vertical: true});
});
</script>

Por ??ltimo entra en Dise??o | Elementos de la p??gina | A??adir un gadget | HTML/Javascript y pega uno de estos c??digos.
Si deseas usar el men?? horizontal pega esto:

<ul class=»bsm» id=»byslidemenu»>
<li class=»first»><a href=»URL del enlace«><img src=»URL de la imagen» /></a></li>
<li><a href=»URL del enlace«><img src=»URL de la imagen» /></a></li>
<li><a href=»URL del enlace«><img src=»URL de la imagen» /></a></li>
<li><a href=»URL del enlace«><img src=»URL de la imagen» /></a></li>
<li><a href=»URL del enlace«><img src=»URL de la imagen» /></a></li>
</ul>

O si deseas el men?? vertical pega este:

<ul class=»bsm vertical» id=»verticalmenu»>
<li class=»first»><a href=»URL del enlace«><img src=»URL de la imagen» /></a></li>
<li><a href=»URL del enlace«><img src=»URL de la imagen» /></a></li>
<li><a href=»URL del enlace«><img src=»URL de la imagen» /></a></li>
<li><a href=»URL del enlace«><img src=»URL de la imagen» /></a></li>
<li><a href=»URL del enlace«><img src=»URL de la imagen» /></a></li>
</ul>

Ya s??lo cambia lo que est?? en color rojo por las URLs de tus im??genes y por las URLs de los enlaces. Las im??genes yo las he hecho de 300px de ancho y 225px de alto, pueden ser de cualquier otra medida, pero esa de ejemplo creo que da mejores resultados visuales.

Como ves la instalaci??n es muy sencilla, el mayor trabajo estar?? en dise??ar las im??genes del men??, pero al final seguro tendr??s un men?? mejor personalizado y poco usual


FUENTE: Ciudadblogger

No Comments Found