Menu Com Efeito Hover Perfeito Em Todos Os Navegadores!!!

Criado por Mateus Souza em 28 de fevereiro de 2009 às 14:20

Bom hoje eu vou postar um dos meu “macetes” que eu uso pra me ajudar na produção de sites…é o famoso “don’t repeat yourself”:

hover Menu Com Efeito Hover Perfeito Em Todos Os Navegadores!!!

Demonstração / Download

Primeiro vamos ao conceito.Seria um modelo já produzido para agilizar o seu trabalho como webdesigner, por exemplo, você ta la ganhando o pão de cada dia e se depara com um menu como este…não é mais facil usar o famoso CTRL+C e CTRL+V? pois bem, este é o conceito…e acredite, sua produtividade vai aumetar e muito...chega de fica perdendo tempo escreve linhas e linhas de código, torrando a cabeça, ouvindo o chefe gritar no seu ouvido porque o job ta atrasado…ta bom, eu apelei mais é essa a intenção.
É claro que cada menu é diferente um do outro e tals, enfim…o objetivo é ter em mãos um modelo propriamente feito, compatível com todos os navegadores, ai é só fazer o jogo do copiar e colar, um pouquinho de alteração aqui…outro ali…e voala…menu certinho e produzido pelo menos na metade do tempo. Já deu pra entender né…

Como não te muito o que falar vamos logo ao bendito menu em css:

HTML:

<ul class="menu">
<li><a href="">Home</a></li>

<li><a href="">Contato</a></li>
<li><a href="">Serviços</a></li>
<li><a href="">Musica</a></li>
<li><a href="">Teste</a></li>
</ul>

O codigo HTML é só isso mesmo, uma lista simples, nada demais…

CSS:

ul.menu li {
float:left;
background: #333;
padding:0px;
line-height: 30px;
border-style: solid;
border-width: 1px;
border-color: #404040 #1a1a1a #1a1a1a #505050;
}
ul.menu li a{
display: block;
padding: 5px 30px;
color: #fff;
font-size:17px;
font-family:Arial,Helvetica,sans-serif;
text-decoration: none;
font-weight: bold;
}
ul.menu li a:hover, ul.menu li:hover{
color: #fff;
background: #4698ca;
border-top-color: #5db1e0 !important;
border-left-color: #5db1e0;
}

Se você fizer o download dos arquivos verá que quase todas as linhas de códigos do CSS (algumas seria idiotisse comentar) estão comentadas explicando o funcionamento de cada uma.

Até a próxima.

Postado em CSS, Dicas, HTML, Webdesigner