jueves, 6 de septiembre de 2012

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


18 comentarios:

  1. simplemente me encanto hermoso efecto muchisimas gracias por este aporteeeeee

    ResponderEliminar
  2. que maravilloso justo
    pensaba cambiar el menu *o*
    graaaaaciaaas por este tuto me
    encanto

    ResponderEliminar
    Respuestas
    1. aa se me
      olvidaba
      q
      lindo gatito el de tu otro blog XDDDDD
      ^u^jejejeje
      saluditos

      Eliminar
  3. olle disculpa
    y como le quito eso:
    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.
    esque en mi blog de pruebas si funciono el movimiento
    y mi otro blog nop
    q le tengo q quitar?????¿¿¿
    busque en ccss en personalizar el blog en donde esta el color de la letra etc..pero no tiene nada de codigos en css
    :O
    link de los dos :
    http://lovelysit.blogspot.mx/
    http://blogpruebaslove.blogspot.mx/
    aa todavia tiene tus imagenes
    luego luego q me digas las quito y pongo las mias
    ojala y me ayudes ^^ es que me gusto mucho el menu

    ResponderEliminar
    Respuestas
    1. mm oki ya veo..
      entonces en el blog que no puedes poner el efecto, estas utilizando algun codigo con jQuery..mmm no esta en personalizar sino lo encontraras en:

      diseno -- edicion de html -- editar plantilla

      da ctrl mas la tecla F y busca jQuery.. estoy segura que lo encontraras...

      para quitarlo pues.. primero tienes que localizar en que truco estas usando el jQuery

      hhahha creo que ya me hice bolas.. espero me entiendas sino con gusto aqui andare ^^

      Eliminar
    2. y sobre las imagenes no te preocupes si te gustaron te puedes quedar con ellas como menu ^^ saludos

      Eliminar
    3. me crearas q no me salio ese de jquery..
      al intentar ese con control f .__............. :/
      :o
      o las imagenes muchas gracias pero tengo otras secciones
      ^^ las tomare de inspiracion ^u^
      besos

      Eliminar
  4. Me encanto *A* <3 Intentare hacerlo~

    ResponderEliminar
  5. Hola nena claro que te dare el credito jamas pense en robarme el tuto y solo que no lo pondre ahora porque quiero hacer algo mas para dar credito parte de la imagen de mi blog esta echa gracias a tu blog asi que quiero hace runa entrada y algo en el gadget y bueno mejor depues te dejo el link para que veas y HAPPY DAY¡¡¡

    ResponderEliminar
  6. TE LUCISTE ANNYZ
    SIN TI NUESTROS BLOGS SERIAN UNA PORKERIA :D
    SIGUE ASI

    ResponderEliminar
  7. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  8. no me funciona :c que hice mal??
    así queda D:
    http://diarioquepica.blogspot.com.es/

    ResponderEliminar
  9. Muchas gracias, eres un cielo, es muy bonito y es más, andaba buscando esta opción ya hace un tiempecillo, voy a intentar ponerlo que con tus explicaciones siempre contadas de forma sencilla me parece hasta fácil, jeje, gracias y ¡buen finde!

    ResponderEliminar
  10. Que bello Menú!..me podrías prestar la imagen que dice Tutoriales!{sin letras la imagen limpia solo con los peluchitos} me encanta! Por favor! n.n...si me vas a responder por favor lo puedes hacer en mi blog!

    ResponderEliminar
  11. annyz q crees lo resolvi de todos modos gracias por tomarte tu hermoso tiempo :D
    los post de reciente de movimiento
    de recientes era el problema se me ocurrio
    q a lo mejor chance era eso porque husan un efecto parecido
    un beso
    mill
    gracias tbm
    lo digo por si otras chicas tiene ese mismo problema
    besos :*

    ResponderEliminar
  12. gracias!!! si tu no existiera mi blog seria una basura!!!
    gracias por todo.
    saludos!!!!

    ResponderEliminar
  13. Hola annyz!! :D
    sabes tengo un pequeño problemita con esto :'c
    no se si me podrías ayudar D:
    PORFISS!!
    http://dramas-asiatico.blogspot.com/

    es que cada imagen me redirecciona a la de arriba, por ejemplo en vez de ir a la página de doramas me va a la de fichas T.T
    y no me funciona y se ve tan bonito que me da penita sacarlo Dx

    oh! y lo otro es que te debo muucho a ti y a tu blog :D
    entonces estaba pensando darte un regalito :3
    pero no se donde enviártelo -.-

    bueno eso sería gracias por todo
    te cuidas C:

    ResponderEliminar
  14. Hice unos cuantos arreglitos y creo que lo arreglé ^^
    muuuchas graaacias por todo :D

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.