Nenhuma resposta neste tópico

[gutostraube]

Muita gente usa tabelas e outros elementos para criar menus, tanto horizontais, qnt verticais. Mas de acordo com o projeto WebSemântica, as tabelas devem ser utilizadas somente como tabelas. Isso pode parecer óbvio, mas não é tanto assim. Vou explicar através de um exemplo pra ficar mais fácil de entender:

Se você precisa colocar dados organizados em uma grade, vc usa uma tabela, ou seja, linhas e colunas. Mas um menu ou o layout de um site não são dados organizados por linhas e colunas, por isso, deve-se usar as tags específicas para cada situação. Para fazer o layout de um site, você pode usar a tag <div>, que funciona como divisor de conteúdo, aliada ao CSS para montar um design mais leve e semânticamente correto. E no caso dos menus? O q usar? O menu não é uma lista de opção, com links para as áreas do site ou algo assim? Então deve-se usar a tag <ul>. Mas vou parar de enrolar e explicar de uma vez como criar o menu usando listas!

MENU VERTICAL

Esse é o código que você vai colocar no lugar onde você quer o menu:

     <div id="menu">
        <ul>
          <li><a href="home.htm">01 - Home</a></li>
          <li><a href="sobre.htm">02 - Sobre</a></li>
          <li><a href="portfolio.htm">03 - Portf&oacute;lio</a></li>
          <li><a href="servicos.htm">04 - Servi&ccedil;os</a></li>
          <li><a href="contato.htm">05 - Contato</a></li>
        </ul>
      </div>

Então na sua folha de estilo ou entre as tags <style type="text/css"> e </style> insira o seguinte código:

/* Base do menu */

#menu {
  width:260px;
  padding:0px;
  margin:0px;
}

/* Margens da lista */

#menu ul {
  margin:0px;
  padding:0px;
}

/* Nesse caso, sem essa parte ficará um espaço entre os itens do menu */

#menu ul li {
  display:inline;
}

/* Itens do menu */

#menu ul li a {
  display:block;
}

/* Itens do menu quando o mouse estiver em cima */

#menu ul li a:hover {
}

Com excessão da largura da base do menu, não mude nenhum valor. Fique a vontade para colocar a formatação que vc quiser dentro de "#menu ul li a" e "#menu ul li a:hover". Um exemplo que ficou legal foi esse:

#menu ul li a {
  margin:0px 0px 0px 2px;
  padding:10px 8px 10px 8px;
  background-color:#000000;
  letter-spacing:1px;
  display:block;
}
#menu ul li a:hover {
  background-color:#060606;
  border-bottom:1px solid #1C1C1C;
  border-top:1px solid #1C1C1C;
  padding:9px 8px 9px 10px;
}

Agora só um CTRL+C e um CTRL+V e editar do seu jeito e está pronto seu menu vertical!

MENU HORIZONTAL

O código da lista é o mesmo do menu vertical, o que muda é o estilo:

/* Base do menu */

#menu {
  width:760px;
  padding:0px;
  margin:0px;
}

/* Base da lista e margens */

#menu ul {
  margin:0px;
  padding:0px;
  width:760px;
  float:left;
}

/* Nesse caso, isso é necessário para que a lista fique horizontal */

#menu ul li {
  display:inline;
}

/* Itens do menu */

#menu ul li a {
  float:left;
}

/* Itens do menu quando o mouse estiver em cima */

#menu ul li a:hover {
}

Assim como no menu vertical você pode alterar a formatação dos itens do menu.

Para quem não manja muito CSS e quer fazer uns efeitos legais, tipow, mudar as bordas, fundo, fontes e outras formatações, essa é a página da W3Schools que tem a referência do CSS2: http://www.w3schools...s_reference.asp

É isso ae galera... qq dúvida estamos aew!!!



THINK TABLELESS!!!!