Mateus Souza

Conversas sobre desenvolvimento web

Categorias »

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

3

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

Demonstração / Download

Primeiro vamos ao conceito. Seria um modelo já produzido para agilizar o seu trabalho como webdesigner, por exemplo, você ta lá 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 está atrasado… ok, 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 voalá… 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.

3 Comentários

  1. Hipiseejex disse:
    24 de maio de 2009 às 14:22

    Hi, courteous posts there :-) through’s concerning the gripping word

  2. Alexandre broggio disse:
    28 de maio de 2009 às 15:05

    Simples e fuincional uma outra dica e usar

    * {margin:0px; padding:0px;}

    para que o menu cole no topo e canto esquerdo para que depois conforme o uso se posicione ele,
    e para qeu o menu fique na vertical e so mudar para

    ul.menu li {
    width:150px;
    background: #333;
    padding:0px;
    line-height: 30px;
    border-style: solid;
    border-width: 1px;
    border-color: #404040 #1a1a1a #1a1a1a #505050;
    }

    ul.menu li a{
    display:inline;
    width:150px;
    padding: 5px 30px;
    color: #fff;
    font-size:17px;
    font-family:Arial,Helvetica,sans-serif;
    text-decoration: none;
    font-weight: bold;
    }

    e continuara funcionando em todos os navegadores ^_^

  3. roberto disse:
    11 de junho de 2015 às 20:51

    perfeito velho , parabéns

Faça um Comentário

Todas as Categorias