31/01/2013

Tutorial: 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.


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

.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 */
}


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: 

<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. 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
    Respostas
    1. Fico contente que tenha gostado

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram