Slider

espacios slider









30 oct. 2013

Tutorial: Menú escondido a un lado del blog


Hola mis queridos seguidores que tal se encuentran?, hoy voy hacer un tutorial que me pidió Larita Itzumiki sobre como poder poner el menú de forma que desaparezca y al pasar el cursor aparezca en pocas palabras esto:
Es hermoso no? bien si queremos tener uno para nuestro blog lo que tenemos que hacer es copiar el siguiente código y irnos a:
  1. Diseño
  2. Un gadget
  3. Tipo javascript 

Pegamos el siguiente código:
<style>.menulun { width: 185px; padding: 13px; height: 100%; border-right: 8px solid#EBBDFF;background: url(Url del Fondo) repeat; top: 0; margin: 0; position: fixed; left: -200px; height: 100%; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; overflow: hidden; cursor: default; font-weight: normal; z-index: 12345; }.menulun:hover { left: 0; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; }.menulun a { border-radius:10px; background: #F9D7F5; color:#09DBF7; padding: 5px; display: block; width: 100%; text-transform: uppercase; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; font-size: 7pt; margin: 5px -10px; text-shadow: 0 1px 1px #; }.menulun a:hover { background: #D2F9FE; -webkit-transition: all .1s ease-out; -moz-transition: all .1s ease-out; -o-transition: all .1s ease-out; transition: all .1s ease-out; padding-left: 20px; }.menulun a:first-child { margin-top: 10px; } .menulun a:last-child { margin-bottom: 0px; }.menulun a { padding: 4px 6px; }</style><div class="menulun"><span style="font: italic 20px georgia; text-transform: none;"><img src="Url de imagen" style="-webkit-transition: all 1s;background-color:#F0CEFF; border-bottom-left-radius: 0px; border-top-right-radius: 0px; padding: 10px;border-radius:10px; width: 160px;" /></span><br /><div align="left"><a href="" rel="lunfoll"><span style="font: italic 20px georgia; text-transform: none;">MENU ♥</span></a></div><a href="Url de la pagina" onclick="changeNavigation;">Nombre de la pagina</a><a href="Url de la pagina" onclick="changeNavigation;">Nombre de la pagina</a><a href="Url de la pagina" onclick="changeNavigation;">Nombre de la pagina</a><div align="left"><a href="" rel="lunfoll"><span style="font: italic 20px georgia; text-transform: none;">Cbox</span></a></div>Aqui tu codigo de cbox</div>

 Guía de personalizado
#EBBDFF:Color de la linea vertical
#F9D7F5:color de los botones de menu
#09DBF7:color de texto
#D2F9FE:color de los botones de menu al pasar el cursor
#F0CEFF:color del borde de la imagen

Si no quieren la cbox lo único que deben hacer es cambiar donde dice Cbox y cambiarlo por el nombre que deseen y si quieres aumentar más lo que deben hacer es copiar este código antes de </div>

<a href="" rel="lunfoll"><span style="font: italic 20px georgia; text-transform: none;">Nombre</span></a></div>
Codigo o Texto o Imagen

Bien ya terminamos, les quedo hermoso verdad? me alegro mucho. Espero que les haya gustado el tutorial, besotes!! 

Créditos a lunany - kawaii

1 comentario: