Menu css horizontal, por Leonardo L Procopio

Salve Galera!!!

Bom, eu resolvi escrever alguns artigos, solucionando duvidas de pessoas que chegam até a mim.
Então agora vou mostrar como criar um menu na horizontal, somente com css!

Será que ainda é preciso dizer as vantagens de utilizar css?! Creio que não né!

Primeira coisa que vamos começar é com a estrutura do nosso menu (e isso é muito importante).

<ul id="menu_horizontal">
      <li><a href=#>Principal</a></li>
      <li><a href=#>Editorial</a></li>
      <li><a href=#>Palestra</a></li>
      <li><a href=#>Ensinamento</a></li>
      <li><a href=#>Jovem</a></li>
</ul>

Temos aqui uma lista não-ordenada com o nome (id) "menu_horizontal", até ai nada de mais.

Vamos colocar um css básico, pra retirar algumas coisas típicas da lista. Vou explicar porque fazer isso: as listas tem sempre algumas propriedades dela mesmo (não só lista, mas como todo elemento), ou seja, nos vamos zerar a margem (margin: 0;), os espaços (padding:0;), tirar o marcador de cada elemento da lista (list-style: none;) e vamos dar um tamanho pro nosso menu.
Obs: coloquei a cor para podermos ir visualizando melhor. A css inicial fica assim:

       ul#menu_horizontal {
            background: #f7f7f7;
            list-style: none;
            margin: 0;
            padding: 0;
            width: 770px;
        }

Próximo Passo!!!
Ai você começa a olhar, e pensa o seguinte: "Eu sei que o ul é um elemento a nível de bloco, e o li também!!! E por isso é que ele faz essa quebra de linha antes e depois deles." Seu pensamento esta correto, mas, através da css nós podemos transformar elementos em bloco (display: block) ou também podemos retirar essa propriedade (display: inline;).
Veja:

        ul#menu_horizontal li{
            float: left;
        }

Bom!!! Muito bom! Agora sim ta começando a parecer um menu horizontal!
Podemos parar por aqui?! Não, ainda não!!! Temos algumas coisas a mudar!

Vamos formatar diretamente o link, e fazendo o mesmo tomar conta de todo o li, usando display: block; dai então, podemos dar um tamanho, altura, formatar o texto, dar uma posicionada e colocar uma borda.
De uma olhada nos comentários se aparecer duvidas:

        ul#menu_horizontal li a{
            display: block; /* atribui ao link, o comando da parada toda! */
            background: #ccc; /* corsinha cai bem */
            width: 89px; /* tamanho */
            height: 17px; /* altura */
            _height: 20px; /* esse comando aqui só o ie vai entender, o ideal é coloca-lo de outra forma, no final eu mostro */
            font: 11px Verdana; /* tamanho da fonte e tipo */
            text-decoration: none; /* retira o sublinhado! Muito legal */
            text-align: center; /* alinha o texto no centro (ta de sacanagem né!) */
            color: #fff; /* cor do texto */
            padding-top: 2px; /* espaço entre o topo do texto e a margem superior */
            border: 1px solid #F2F2F2; /* formatando a borda! */
        }

Os comentários do código ajuda muito!
Nós formatamos o estado natural do link, sem ele sofrer nenhum evento. A grande jogada fica no estado hover! (Esse estado é quando colocamos o mouse em cima dele).
Então, lá vamos nós de novo!!!
Obs: vou comentar só as partes diferente ou importante!!!!

        ul#menu_horizontal li a:hover{
            font-weight: bold; /* aqui nos estamos colocando o texto em negrito! */
            color: #2C2D32;
            border: 1px solid silver;
        }

Agora você pode testar ai!!
Mas ta feio Léo!!! (bonito não tá!!!)
Mas ai é que entra o seu lado artístico. Altere o código, faça novas combinações, promova mudanças no código, pois só assim você vai dominar a técnica!!! Coloque sua imaginação p/trabalhar.
Lembre-se de que você pode fazer confinações com as bordas, você tem o controle de cada uma, e pode fazer efeitos 3D e tudo mais! Sua imaginação é a unica ferramenta que não tem limites, invente!!!

Veja aqui o resultado final e volte sempre!!!

<?xml version="1.0" encoding="iso-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>CSS menu with buttons</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"   />
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style type="text/css">
  <!--
  ul#menu_horizontal {
  background: #f7f7f7;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 770px;
  }
  ul#menu_horizontal li{
  float: left;
  /*
  display: inline; testar se no final vai dar na mesma por causa desse comando!!!
  margin-right: 2px;*/
  }
  ul#menu_horizontal li a{
  display: block;
  background: #ccc;
  width: 89px;
  height: 17px;
  _height: 20px;
  font: 11px Verdana;
  text-decoration: none;
  text-align: center;
  color: #fff;
  padding-top: 2px;
  border: 1px solid #F2F2F2;
  }
  ul#menu_horizontal li a:hover{
  font-weight: bold;
  color: #2C2D32;
  border: 1px solid silver;
  }
  -->
  </style>
  </head>
  <body>
  <ul id="menu_horizontal">
  <li><a href=#>Principal</a></li>
  <li><a href=#>Editorial</a></li>
  <li><a href=#>Palestra</a></li>
  <li><a href=#>Ensinamento</a></li>
  <li><a href=#>Jovem</a></li>
  </ul>
 </body>
  </html>

---------------------------------------------
msn: leonardomerce@hotmail.com
Rio de Luz

desconhecido

ssdfsd : Não avaliado

OIa <oia@oi.com.br>

Tenta fazer um horizontal com dropdown!

weverton <wevertonjaques1@hotmail.com>

você poderia deixar um link como o resultado final do código, pois isso facilitaria bastante para quem é iniciante em css. valeu.

Leonardo L Procópio <leonardolp@gmail.com>

Nos próximos já vou colocar assim!
vlw

pasquale <prof.pasquale@uol.com.br>

Nem preciso comentar né. Fugir da escola não te fez bem.

Rafael Santos Costa <rafaelgsl@hotmail.com>

Boma Adorei esse tutorial me serviu muito..

OBrigado

Continua sempre assim..

Abraços

Chasles <charlesfonseca@hotmail.com>

valew gostei mt

charise

ola

studio <studioadrenalina@hotmail.com>

Muito bom muito bom valeu

Arildo <arildo.oliveira@bol.com.br>

Valeu camarada, me ajudou muito, que Deus te abençoe por ajudar as pessoas.....

Cinthia <cinthia.cpd@fadminas.org.br>

Parabéns pelo site e pelas dicas muito boas. Queria ver com vc como eu faço um menu vertical igual este seu do site? Eu trabalho com o site www.fadminas.org.br estamos reformando, eu não tenho espaço, pro isso preciso de um menu horizontal q me forneça espaço para sublinks, o modelo que vc apresentou é perfeito, mas precisaria saber como encaixo sublinks nele, queria q ficasse tipo o do seu site http://www.plugmasters.com.br/sys/materias/481/1/Menu-css-horizontal , desde já gradeço a atenção. Espero q possa me ajudar.
Um grande abraço
Cinthia Medeiros

Cinthia <cinthia.cpd@fadminas.org.br>

Leonardo L Procópio <leonardolp@gmail.com>

Cinthia, me add no msn que te passo um link que vai te ajudar e muito!
Grande abraço!

Leonardo L Procópio <leonardolp@gmail.com>

Arildo, estamos ai pra ajudar sempre!
Grande abraço!