31/01/2013

Menu Hover Solid


Bom dia meus ninjas! Hoje eu trago um menu que usei em uma das novas encomendas que fiz, ele se chama "Hover Solid ", é mais um daqueles famoso menus de tumblr. Caso queira dar uma olhada veja aqui. . Créditos ao tumblr Htmlife, eu peguei no KW então também recebe os créditos. Antes de mim postar o tutorial, gostaria de saber o opnião de vocês sobre o que eu coloco comemorando os 500 seguidores. Um layout free, utilitários, bases de cabeçalho ou um big tutorial? Não esqueçam de dizer, ok? Agora vamos aprender como colocar o menu.

1. Primeiro vá ate seu HTML, usando o CTRL + F e procure por ]]></b:skin>. Assim que o achar, acima cole:

Códigos
.menub{
background:#fd90d0; /* cor de fundo */
font-family: Tahoma; /* fonte */
 width: 60%;  /* largura */
float: right;
padding: 2px;
text-align: center;
margin: 1px;
border-radius: 0px;
font-size: 8pt; /* tamanho da fonte */
color: #BC8F8F; /* cor da fonte */
-webkit-transition-duration: .90s;
-moz-transition-duration: .90s;
transition-duration: .90s;
}
.menub:hover {~
font-family: Tahoma; /* fonte ao passar o mouse */
width:60%; /* largura ao passar o mouse */
float: right;
background:#ebebeb; /* cor de fundo ao passar o mouse */
padding: 2px;
text-align: center;
margin: 1px;
border-radius: 0px;
font-size: 8pt; /* tamanho da fonte ao passar o mouse */
color: #696969; /* cor da fonte ao passar o mouse */
padding-left:0px;
box-shadow:7px 8px 16px #000 inset, -3px -8px 44px #000 inset; /* sombra interna, altere o que está em negrito */
-moz-box-shadow:7px 8px 16px #000 inset, -3px -8px 44px #000 inset; /* sombra interna, altere o que está em negrito */
-webkit-box-shadow:7px 8px 16px #fff inset, -3px -8px 4px #ebebeb inset;/* sombra interna, altere o que está em negrito */
border-bottom:2px solid#eee; /* borda de baixo ao passar o mouse */
}


2. Agora salve, ou mude as cores como desejar. Agora vá ate seu layout e lá abra um gadget HTML/Javascript e dentro adicione o próximo código, mude as partes que se pede: 

Códigos
<div class="menub"><a href="link">Título</a></div>
<div class="menub"><a href="link">Título</a></div>
<div class="menub"><a href="link">Título</a></div>
<div class="menub"><a href="link">Título</a></div>

Salve e prontinho!

8 comentários:

  1. Sabe que não conheço esse efeito ? Mas estou precisando para colocar em um Layout , não custa nada ver como é , né ?

    Beijos > SFE

    ResponderExcluir
  2. Anônimo31/1/13

    Adoreeei o tutorial *-*

    #Kisses ♥

    Visita >> http://pensamento-jhenny.blogspot.com.br/

    ResponderExcluir
  3. Esse menu é bem legal,gostei do tuto.
    http://barbieseumundopink.blogspot.com.br
    Beijos!

    ResponderExcluir
  4. Adorei esse menu , ele é super fofo ^^

    ResponderExcluir

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345