Tutorial:Menu escondido y al pasar el cursor se muestra ♥

Hola  ¡¡toy feliz son 89 seguidores que sigen mi blog ¡ wii y ademas toy solita en mi casita ,y no tengo a nadies que me interumpa (mis hermanos que me botan de la computadora) jiji asi que publicare mas tutoriales  ¡ Estoy segura que este tutorial les encantara,este efectito lo queria poner a este diseño pero mas me gusta en menu que tengo flotante :3 ,bueno si lo usan den creditos ,de que se trata este tutorial? es como poner un Menu escondido que al pasar el cursor  se muestra *-*¡ aver aqui una imagen:

Para que lo vean mejor por que esta borroso clic en :
Vista Previa
Como veran al pasar el cursor sobre esa linea vertical que esta al lado izquierdo sale el menu,n.n¡
Pueden poner un menu y abajito otras cositas asta cierto limite,por ejemplo yo puse una imagen primero y luego abajito el menu,despues mi cbox,y imagenes que estan en movimiento.
Si les gusta sigan los pasitos *-*
Este efectito se puede poner en la plantilla clasica Blogskin o el diseñador de plantilla ,la que yo uso y creo la mayoria.
Para los que usan la plantilla clasica ponerlo el codigo en cualquier lugar que deseen donde se encuentra tu cbox,seguidores,algun gadget abajito coloca el siguiente codigo
Para los que usan el diseñador de plantilla la normal ,van a añadir nuevo gadget y copian el siguiente codigo

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

Aqui para cambiar los colores:
#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

Aora si no quieren un cbox hay pueden cambiar el nombre Cbox por lo que quieras y donde dice Aqui tu codigo de cbox  colocas el codigo que quieras por ejemplo tu botoncito de afiliacion ,creditos,etc.

y si no quieres sobrar un espacio y quieres aumentar mas  coloca el siguiente codigo antes del ultimo  </div>

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

Codigo o Texto o Imagen

Y listo eso es todo ¡¡