Menu Con Efecto Deslizante

Categoria

Categoria

Categoria

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