Menu Elastic

09:24 4 Comments A+ a-


Hey gente, trouxe um menu super fofo, eu usaria ela na sidebar, entretanto vocês podem usar onde quiserem, aqui a preview.
Bem, vamos aprender a colocá-lo!


Cole esse código antes de ]]></b:skin>:
/*** menu elastic s-trongfaith ***/ .elastic {width: LARGURApx; margin-top: DISTÂNCIA DO TOPOpx; margin-left: DISTÂNCIA DA ESQUERDApx; margin-right: DISTÂNCIA DA DIREITApx; position:fixed;z-index:999999 } .elastic a { background-color: #COR DO FUNDO; border-top:3px solid #COR DA BORDA; text-align: center; font-family: tinytots; font-size:8px; color:#COR DA FONTE; display:inline; letter-spacing: ESPAÇO ENTRE OS LINKSpx; padding: 4px 4px; width: 100px; transition-duration: 0.8s; -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s; margin-left: -3px;}@font-face {font-family: "tinytots";src: url('http://static.tumblr.com/rmj06l2/Usellxb4i/tinytots.ttf');} .elastic a:hover {background-color: #COR DO FUNDO QUANDO PASSA O MOUSE; color: #COR DA FONTE QUANDO PASSA O MOUSE; border-top:3px solid #COR DA BORDA QUANDO PASSA O MOUSE; padding-bottom: 40px;padding-top: 40px; width: LARGURA QUANDO PASSA O MOUSEpx; transition-duration: s; -moz-transition-duration: 0.5s; -webkit-transition-duration: 0.5s; -o-transition-duration: 0.5s; width: 50px;} /*** fim s-trongfaith ***/


Agora, no seu gadget HTML/Java cole o seguinte:
<div class="elastic"><a href="/">Link</a><a href="/">Link</a><a href="/">Link</a><a href="/">Link</a><a href="/">Link</a><a href="/">Link</a><a href="/">Link</a></div>
Os códigos voc~es podem editar da forma que quiserem o.k?
Bem, é só isso!
Beijos!

Sou Nathalia Nates, adolescente, confusa, que não sabe o que quer da vida, e por isso tenta de tudo(desistindo na maioria das vezes por ter medos e inseguranças).

Nasci em uma pequena cidade do norte do paraná, onde moro até hoje, com meus pais e meus dois cachorros.