Menu á esquerda deslizante

É um menu bem simples e bonito. Eu ainda fiz com um efeito hover no texto bem legal.

quando está normal ele é simples, mas quando o mouse passa,

 a letra gira e fica embaixo da imagem. 

Esse é um tutorial, que entra mais no estilo utilitários, 

Afinal você só vai editar onde você quer personalizar! :D

Crie um Gadget de HTML/Javascript e cole o código a seguir nele:

<style> ul#deslizante { /*----GERAL---*/ position: fixed; /*----POSIÇÃO FIXA---*/ padding: 0px; top: 50px; /*---EM RELAÇÃO AO TOPO-------*/ left:0; list-style: none; z-index:999999; } ul#deslizante li { /*----BOTÕES---*/ width:130px; /*----LARGURA DOS BOTÕES---*/ height:100px; /*----ALTURA DOS BOTÕES----*/ background:#E34B64; /*---COR DO FUNDO---*/ border:1px solid #B03E5A; /*--- COR DA BORDA---*/ margin-left:-100px; /*---MARGEM EXTERIOR ESQUERDA---*/ -webkit-transition:0.7s ease-out ; /*---TEMPO DE TRANSIÇÃO---*/ -moz-transition: 0.7s ease-out ;/*---TEMPO DE TRANSIÇÃO---*/ transition: color 0.7s ease-out ;/*---TEMPO DE TRANSIÇÃO---*/ } ul#deslizante li:hover { margin-left:-1px; } .deslizante-texto { /*----TITULOS---*/ width:130px; /*----LARGURA DOS TITULOS---*/ height:100px; /*----ALTURA DOS TITULOS---*/ position:absolute; color:#fff; /*----COR DOS TITULOS---*/ -webkit-transform: rotate(90deg) scale(1.1); padding:50px; /*----MARGEM INTERNA DOS TITULOS---*/ margin-left:-40px; /*----MARGEM EXTERIOR ESQUERDA---*/ margin-top:-5px; /*----EM RELAÇÃO AO TOPO---*/ -webkit-transition:0.7s ease-out ; /*---TEMPO DE TRANSIÇÃO---*/ -moz-transition: 0.7s ease-out ; /*---TEMPO DE TRANSIÇÃO---*/ transition: color 0.7s ease-out ; /*---TEMPO DE TRANSIÇÃO---*/ } .deslizante-texto:hover { -webkit-transform: rotate(0deg) scale(1.1); /*---TEMPO DE TRANSIÇÃO---*/ -transform: rotate(0deg) scale(1.1); /*---TEMPO DE TRANSIÇÃO---*/ transform: rotate(0deg) scale(1.1); /*---TEMPO DE TRANSIÇÃO---*/ padding:70px; /*----MARGEM INTERNA HOVER---*/ margin-top:10px; /*----MARGEM TOPO EXTERNA HOVER---*/ margin-left:-30px; /*----MARGEM ESQUERDA HOVER---*/ } ul#deslizante .botao1 a { } ul#deslizante .botao2 a { } ul#deslizante .botao3 a { } ul#deslizante .botao4 a { } </style> <ul id='deslizante'> <li class='botao1'> <a href='LINK-AQUI'><div class='deslizante-texto'> TITULO1</div> <div style='position: block; margin-left:15px;background: url(http://i.imgur.com/l9jfI.png) no-repeat; width:100px;height:200px;'/> </div> </a></li> <br/> <li class='botao2'> <a href='LINK-AQUI'><div class='deslizante-texto'> TITULO2</div> <div style='position: block; margin-left:15px;background: url(http://i.imgur.com/l9jfI.png) no-repeat; width:100px;height:200px;'/> </div> </a></li> <br/> <li class='botao3'> <a href='LINK-AQUI'><div class='deslizante-texto'> TITULO3</div> <div style='position: block; margin-left:15px;background: url(http://i.imgur.com/l9jfI.png) no-repeat; width:100px;height:200px;'/> </div> </a></li> <br/> <li class='botao4'> <a href='LINK-AQUI'><div class='deslizante-texto'> TITULO4</div> <div style='position: block; margin-left:15px;background: url(http://i.imgur.com/l9jfI.png) no-repeat; width:100px;height:200px;'/> </div> </a></li> </ul>

Eu peguei a imagem do Kawaii World
e se quiser mudar, proucure por:

http://i.imgur.com/l9jfI.png

e troque. Lembrando que a imagem deve ter 100X200.
O código contém todas as informações para personalização, Fique a vontade.
Se não funcionou no seu blog, pode comentar. :3

____________________________________________
Lembrando que o sorteio do layout é só até amanhã, não perca tempo!

Sorteio pelos 100 seguidores - layout