Menus

MENU SIMPLES:

É um menu super simples e fácil! Exemplo:

Coloca isso no seu css:

.menusimples {float: center; font: 8px "Alterebro Pixel Font", small fonts; color:#fff !important; text-align: center; text-transform: uppercase; background-color: #969E57; padding: 6px; border-radius: 1px; text-shadow: 0 1px 0 #878f49;margin-bottom: 5px; margin-top:5px; letter-spacing:0px; display: inline-block; width: auto; align: center; text-align: center;}

E no local onde você quiser:

<div class="menusimples">Conteúdo aqui</div>

http://making-themes.tumblr.com/post/27158884623

Menu Splasher

Vou ensinar vocês a fazerem esse menu:

Demo aqui

Primeiro coloquem isso no css de vocês (entre <style> e </style>):
/***Menu Simone(cerejadosundae)**/
 .navsm{float:left; overflow: hidden;background: -webkit-gradient(linear, left top, left bottom, from(#d6d6d6), to(#fff));display: inline-block; padding: 2px; text-align: center; color:#aaa;margin:1px; line-height:40px;height:40px;width:40px;font-size: 10px;font-family: 'Play', sans-serif; -webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;transition: all 0.5s linear;border-radius:100px; border: 1px solid #d6d6d6;}
.navsm:hover {height:56px;background:#eee;color:#aaa;}
.navsm img{width:18px;margin-top:10px; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; }
.navsm:hover img{-webkit-transform: rotate(360deg); }

Arrume as cores e tamanhos se desejar, mas só se souber mexer.

Em seguida cole isso onde deseja que o menu apareça:
<a href="LINK"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/home.png"><br>Home</div></a><a href="LINK"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/mail_2.png"><br>ask</div></a><a href="LINK"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/delete.png"><br>Dash</div></a><a href="LINK"><div class="navsm"><img src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/48x48/photo.png"><br>Fotos</div></a>

Substitua os links e os icones se desejar, não esqueça que depois do link da imagem deve exitir um <br> para o nome ficar abaixo da foto. Espero que tenham entendido, qualquer dúvida venham na ask.



MENU HOVER (OU DE CORAÇÃO) DESLIZANTE — ESTILO FOFO:



Oi gente! Então, como o título diz, hoje vou ensinar para vocês como fazer o menu hover deslizante com um estilo mais fofinho ><

Exemplo:



Primeiro, põe esse código no teu css:
/* MENU HOVER FOFO POR GIOVANNA C. (VENTOS-DE-SETEMBRO) */


.heart {display : block; font-size: 10px; font-family: Tahoma; letter-spacing : 0; border-bottom : 1px solid #eee; background-repeat : no-repeat;    text-indent : 5px; vertical-align : middle; text-decoration : none; line-height : 15px; margin-bottom : 1px; padding-left : 3px; -webkit-transition: all 0.9s ease-out; -moz-transition: all 0.9s ease-out; border-left: solid #000; background: #f0f0f0; color: #666 !important;}


.heart:hover {display : block; text-decoration: none; vertical-align: middle; line-height: 15px; background: #fff; border-left: solid #C0D287; padding-left: 15px;}

Tudo o que está em negrito, pode ser mudado. o “border-left” é a borda do menu (como a borda azul no exemplo); o “padding-left” é o espaço entre a borda e o início da frase; o “background” é a cor do fundo. 

Agora, cole esse código onde você quiser o menu:
<div class="heart"> O que quer escrito</div>

E pronto, o menu com efeito fofo está pronto! Qualquer dúvida, é só perguntar na ask :D

Tutorial por Giovanna C.;
Se lhe for útil, dê like no post e credite ao making-themes; 
Não reblogue esse post!
Espero que tenham gostado! Qualquer dúvida, pergunta na ask :3


http://making-themes.tumblr.com/post/27456926396