Menu Shy
Visualize o menu aqui: Menu Shy.
Se gostar dê like no post para sabermos se foi útil, por favor; Não reblogue.
O código que vai no CSS -- ou seja, antes de </style> ou depois de <style> -- é este:
/********** MENU SHY por: nerdesign.tumblr.com **********/ #menu {width: TAMANHOpx; background: #FUNDO; padding: 5px; font-family: 'Calibri'; text-transform: uppercase; font-size: 10px;} .botao {color: #FONTE;-webkit-transition-duration: .5s; -moz-transition-duration: .5s; -o-transition-duration: .5s; background: none; padding: 2px 3px 3px 3px; text-align: center; display: inline-block; margin-left: 2px; margin-right: 2; border-radius: 5px;} .botao:hover {background: #BOTÃO_HOVER; color: #FONTE_HOVER;}
Personalizando o CSS do menu:
Onde ta escrito TAMANHO você substitui pelo tamanho da largura do menu (por exemplo, assim: width: 250px;)
Onde ta escrito FUNDO você substitui pelo código da cor que quer pôr no fundo do menu (código de cores HTML aqui).
Onde ta escrito FONTE você substitui pelo código da cor que quer nas letras.
Onde ta escrito BOTÃO_HOVER você substitui pela cor que vai ficar o fundo do botão quando você passar o mouse por cima dele.
E onde ta escrito FONTE_HOVER você substitui pela cor que vai ficar as letras quando você passar o mouse por cima delas.
E o código que vai depois de <body> é este:
<div id="menu"> <center> <a href="SEU_LINK_AQUI"><div class="botao">Botão 1</div></a> <a href="SEU_LINK_AQUI"><div class="botao">Botão 2</div></a> <a href="SEU_LINK_AQUI"><div class="botao">Botão 3</div></a> <a href="SEU_LINK_AQUI"><div class="botao">Botão 4</div></a> <a href="SEU_LINK_AQUI"><div class="botao">Botão 5</div></a> <a href="SEU_LINK_AQUI"><div class="botao">Botão 6</div></a> </center> </div>
Personalizando:
Onde ta escrito SEU_LINK_AQUI você substitui pelo link que você quer.
E onde tem Botão 1, Botão 2, etc... é onde você coloca o títulos dos botões, ou seja, a palavrinha que vai aparecer no botão.
E é isso. Espero que tenham gostado. Qualquer dúvida nos pergunte na ask, ficaremos felizes em poder ajudar. ^^
E lembrando:
Se tiver gostado dê like no post para sabermos se foi útil;
E não reblogue.