Tutorial ^-^

Olá, tudo bem?

Trago um tutorial de menu bem legal, eu simplesmente adorei o efeito dele, acho até que vou usa-lo aqui em breve. O nome do tuto é: Menu Transparente, abaixo, vocês verão a Preview e o tutorial.

~Créditos no fim do post~

~Preview~

1- Cole o código abaixo em um HTML/JavaScript:

<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>

2- No seu HTML procure por ]]></b:skin> acima da Tag cole o código:

#photo{background:url(URL DA SUA FOTO);width:LARGURApx;height:alturapx; border: solid 5px #Cor da borda;}.boxmenu {background:transparent; opacity: 0.0;  width:LARGURApx;height: ALTURApx; -WEBKIT-TRANSITION-DURATION: .90S; margin-top:0px}.boxmenu:hover {opacity: 1.0;  width:LARGURApx;height:alturapx; }.nav2 {BACKGROUND: #COR DO FUNDO; opacity: 0.5;DISPLAY: INLINE-BLOCK; TEXT-ALIGN:center; FONT-SIZE:18PX; COLOR:#fff;  FLOAT: left; MARGIN:2PX; FONT-FAMILY:'Yanone Kaffeesatz'; PADDING:4PX;  WIDTH:190pX;HEIGHT:13PX; -WEBKIT-TRANSITION-DURATION: .90S;margin-bottom:0px; MARGIN-LEFT:0px;  }.nav2:hover {BACKGROUND: # COR DO FUNDO ; opacity: 1.9;DISPLAY: INLINE-BLOCK; TEXT-ALIGN:center; FONT-SIZE:18PX; COLOR:fff;  FLOAT: left; MARGIN:2PX; FONT-FAMILY:'Yanone Kaffeesatz'; PADDING:4PX;  WIDTH:190PX;HEIGHT:13PX; -WEBKIT-TRANSITION-DURATION: .90S;MARGIN-LEFT:0px; MARGIN-bottom:0px;text-shadow: 1px 1px 0 #Sombra do texto;} 

3- Faça as modificações de acordo com as instruções do próprio código, em seguida salve.

4- Agora cole o código abaixo em um gadget  HTML/JavaScript e faça as alterações necessárias, depois é só salvar e prontinho *-*

<div id="photo"><div class="boxmenu"><br><br><br><br><a href="LINK">NOME</a><a href="LINK">NOME</a><a href="LINK">NOME</a><a href="LINK">NOME</a><a href="LINK">NOME</a></div></div>

Créditos:

Css and HTML

Gave Crazy

Abraços♥