Tuto-Menu Dream

Anneseyo.

Vagueando por ai e encontre um tutorial lindo que é menu fofinho pra vocês rsrs. Esse menu é mais diferente, esse é daquele que uma caixinha hover, quando você passa o mouse na imagem o menu ira abaixar e vai aparecer, vamos ao tutorial?

Preview:♥

1- Cole esse código acima de ]]></b:skin>:

.position {margin-top: -401px; margin-left: -14px; position:absolute;-webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s;}

.position:hover {margin-top: -250px;}
.menu1{background: rgba(0,0,0,0.03);padding: 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.15), 0 1px 1px rgba(255,255,255,0.35); text-align: just;cursor:pointer;}
.menu {display : block;font-size: 8px;font-family: 'Play', sans-serif;letter-spacing : 0;margin-left: 1px; margin-right: 1px; background-repeat : no-repeat;text-indent : 8px;vertical-align : middle;text-decoration : none;line-height : 21px; margin-bottom : 1px;padding: 0px;border-top: 1px solid #fff;background : #f5f5f5; text-shadow: 1px 1px 1px #fff; text-transform:uppercase; color: #999;}
.menu a {color:#fff;text-transform: uppercase;text-shadow: 0px 1px 0px #fff;text-decoration:none;}
.menu:hover {display : block;font-size: 8px;font-family: 'Play', sans-serif;letter-spacing : 0;margin-left: 1px; margin-right: 1px; background-repeat : no-repeat;text-indent : 8px;vertical-align : middle;text-decoration : none;line-height : 21px; margin-bottom : 1px;padding: 0px;border-top: 1px solid #fff;background : #f5f5f5; text-shadow: 1px 1px 1px #fff; text-transform:uppercase; color: #999;}

 Explicação: .position é onde ira marcar o posicionamento da sua caixinha, ela tem que ficar escondidinha então mude o margin-top para alterar o valor do topo que varia com os themes, use os números negativos para que ela fique somente com a imagem do lado de fora, o margin-left é se você quer o menu mais para a direita ou para a esquerda, isso também vai depender o seu gosto ;]

.position:hover o hover é para quando a pessoa passe o mouse na imagem o menu desça, então você vai ter que alterar o valor de margin-top também mas esse vai ser o valor mais positivo pq assim o menu não previsa ficar escondidinho como no outro.

.menu1 é a caixinha transparent, não mecha nesse código por favor.

.menu é o menuzinho que fica dentro, é as caixinhas do menu, isso você pode alterar as cores se preferir mas se não souber HTML recomendo que não mexa.

Agora vá em seu layout e adicione um gadget de HTML/JavaScript, cole:

 <div class="position"><div class="menu1">
<a href="LINK" class="menu"> Home </a>
<a href="LINK" class="menu"> About </a>
<a href="LINK" class="menu"> Ask </a>
<a href="LINK" class="menu"> Tumblr </a>
<a href="LINK" class="menu"> Twitter </a>
<a href="LINK" class="menu"> Facebook </a>
</div>
<img src="http://media.tumblr.com/7cd84524fce5976cbbb2af580d31c033/tumblr_inline_mlmosoCo5F1qz4rgp.png">  
</div>

Explicação 2: Esse código acima é o HTML. No luvar de LINK você vai colocar a sua URL que deseja, nunca esqueça do class=”menu” se caso quiser colocar mais links ;]

Se caso queira mudar a imagem de passar o mouse (no caso a imagem amarelinha escrito menu), é só procurar por esse código:

http://media.tumblr.com/7cd84524fce5976cbbb2af580d31c033/tumblr_inline_mlmosoCo5F1qz4rgp.png

Mas só altere essa parte

Pronto, o seu menu  já esta feito. Viram como é simples? O difícil é só na hora dos valores de margin-top de .position e .position:hover 

Kiss!