Cute Menu Con Efecto Deslizante

Holaaa mis blogueras como va su dia hoy? espero que bien ^^ ya se aproxima el viernes siiiiii -se emociona- hahah fin de semanita awwww a pasear se ha dicho xD.. saben tengo pensado ir al cine a ver la peli de cazador de vampiros.. alguien la ha visto? bueno si alguien ya la vio digame que tal esta sin tanto detalle okei >.<

bueno pasemos al tutorial, me han estado preguntando sobre este menu que al pasar el cursor sobre el se deslice hacia abajo.. (como tipo acordeon) investigue y bueno lo encontre... espero les guste ^^

para ver el Preview da clic aqui

Notita: Este efecto usa el script mootools que no es compatible con el jQuery, esto quiere decir que si usas algun script jQuery en tu caja Css osea en tu codigo de plantilla no funcionara.

Okaa aclarando eso podemos empezar:

-- Paso 1

Nos vamos a Plantilla >&gt; Edicion de Html >> continuar

copia este codigo y pegalo justo antes de </head>

<script src='https://sites.google.com/site/annyzkawaiiblog/annyzkawaii/mootools-core.js' type='text/javascript'/>

<script src='https://sites.google.com/site/annyzkawaiiblog/annyzkawaii/byslidemenu.js' type='text/javascript'/>

<style type='text/css'>

ul.bsm{

margin: 0px auto;

border:1px dashed #FFE6F1;

list-style-type: none;

}

ul.bsm li{

border-left:2px dashed #FFFFFF;

}

ul.bsm li.first{

border-style: none;

}

ul.vertical li,

div.vertical div{

border-top: 1px dashed #FFFFFF;

border-left-style: none;

}

</style>

asi quedaria:

da clic sobre la imagen para verla en tamaño grande

-- Paso 2

Pega este codigo justo antes de </body>

<script type='text/javascript'>

window.addEvent('load', function(){

var slideMenu = new BySlideMenu();

var verticalmenu = new BySlideMenu('verticalmenu', {vertical: true});

});

</script>

asi queda:

Das guardar y solo queda el ultimo paso =D

Y por ultimo el Tercer paso:

NOs vamos a Diseno >> Añadir gadget Html/javascript copiamos el codigo que pongo a continuacion y lo pegamos en el

<ul style="display:none; visibility:hidden;" class="bsm" id="byslidemenu">

<li></li></ul>

<ul class="bsm vertical" id="verticalmenu">

<li class="first"><a href="URL del enlace"><img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/tutoyrecursos.png" /></a></li>

<li><a href="URL del enlace"><img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/photoshops.png" /></a></li>

<li><a href="URL del enlace"><img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/afiliados.png" /></a></li>

<li><a href="URL del enlace"><img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/renders.png" /></a></li>

<li><a href="URL del enlace"><img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/recetas.png" /></a></li>

<li><a href="URL del enlace"><img src="http://i1063.photobucket.com/albums/t514/Annyz-Kawaii/creditos.png" /></a></li>

</ul>

Das guardar y listo ..^^

Morado:ahi pondras la imagen con tu letrerito

Verde: Ahi pondras en enlace de tus entradas

Yo puse mis propias imagenes de 230 x 150 px.. ustedes pueden hacer sus propias imagenes y letreritos a su gusto okei..

Tambien esta la opcion de ponerlo de forma Horizontal (yo la hice vertical) si la quieren de manera horizontal hacen lo mismo que el paso 1 y 2 y en el tercero

ponen este codigo:

<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>

Creditos

Ciudad Blogger