Pular para o conteúdo principal

Menu horizontal com CSS (Tableless)

Olá a todos,
Todos os amadores na construção de sites (como eu) um dia já se perguntaram “como é que esse cara fez esse menu jóia” pois é, meu layout antigo (o maldito que bugou) já possuia um, mas nada como uma catástrofe em nossas vidas para tirarmos algumas lições (como a de criar um menu).
Então vamos lá, para quem hospeda seu site em algum lugar eu recomendo o uso de alguma ferramenta para a criação, existem vários, como diria um amigo meu “se você chutar uma árvore cai um monte”, seguem alguns links:
Bom não vou me aprofundar nessas ferramentas, é só digitar no google que certamente vocês irão encontrar outras, mesmo porque se você leu o artigo até aqui quer mais é ver como fazer o tal menu. Vocês vão perceber que o exemplo abaixo é identico ao menu usado por mim (gostei tanto que quase não mexi), eu não o inventei, achei aqui, no site do TABLELESS, vamos ao código:
 
Estrutura:
Primeiramente faça um div e atribua uma ID para este div, neste exemplo nosso div se chamará “menu”. Dentro deste div, faça uma lista, esta lista deve conter as opções de seu menu:
<div id=”menu”>
<ul>
<li><a href=”">Primeiro</a></li>
<li><a href=”">Segundo</a></li>
<li><a href=”">Terceiro</a></li>
<li><a href=”">Quarto</a></li>
<li><a href=”">Quinto</a></li>
</ul>
</div>
Começando a formatação:
Agora que já fizemos a estrutura do menu, vamos formatá-lo com css.
Primeiro, para podermos trabalhar melhor, vamos tirar o margin (margin:0px;\), o padding (padding:0px;\) e os Bullets das opções (list-style:none;) da tag UL. Queremos que o UL seja uma barra de navegação certo? Então vamos fazer ele flutuar à esquerda (float:left), depois damos a ele a largura de 100% (width:100%;\), isso fará com que ele vire uma bloco. Veja o código css atribuído à tag UL:
#menu ul {
padding:0px;
margin:0px;
float: left;
width: 100%;
background-color:#EDEDED;
list-style:none;
}
Terceiro:
Nosso menu ainda não está horizontal… agora é hora de resolver isso.
Para o nosso menu ficar horizontal, temos que fazer as suas opções ficarem uma ao lado da outra… para isso, basta atribuir um display:inline; para a tag LI… Isso fará todas as opções ficarem em uma linha horizontal:
#menu ul li { display: inline; }
Deixando o menu na horizontal:
Ótimo. Estamos quase acabando nosso menu horizontal, agora falta pouco.
Precisamos apenas formatar os links do menu para que eles não fiquem tão próximos um do outro. No css, faça que todos os links que estão dentro da tag LI (#menu ul li a) flutuem à esquerda (float:left;\), isso é necessário para que os links se transformem em bloco. Agora, dê um espaço entre a borda do menu e o texto, para isso use o padding (padding: 2px 10px;\).
Você pode aproveitar para definir o “visual” que deverá ter o link: cor de fundo, letra, etc…
Veja o código css que escrevemos neste passo.
#menu ul li a {
padding: 2px 10px;
float:left;
/* visual do link */
background-color:#EDEDED;
color: #333;
text-decoration: none;
border-bottom:3px solid #EDEDED;
}
Vamos ver no que deu!
Para finalizar, vamos apenas definir o que deverá acontecer com o link quando o usuário passar o mouse. Este passo dispensa explicações.
#menu ul li a:hover {
background-color:#D6D6D6;
color: #6D6D6D;
border-bottom:3px solid #EA0000;
}
*O código de exemplo é o mesmo do site.

Comentários

  1. Opa Eduardo.
    Ótimo post. Sem dúvida alguma, todo desenvolvedor precisa de uma mãozinha na hora de fazer seu menu.

    Silas Lopes
    http://silasiub.blogspot.com/

    ResponderExcluir
  2. nossa ainda estou aprendendo, mas me falta muito, obrigado pelo selo já estou pegando ela daqui a pouco, praticamente estou mexendo as pressas no pc devido a facu e varios trabalhos, mais obrigado mesmo.

    ResponderExcluir
  3. Ótimo post mas você poderia dá uma explicação de como eu poderia centralizar os itens do menu?
    Isso está esquentando minha cabeça. Não acho nenhum lugar com uma explicação clara sobre isso :)
    Parabéns pelo post!

    ResponderExcluir

Postar um comentário

Obrigado por Participar do programero, fique a vontade para agradecer, retificar, perguntar ou sugerir.

Postagens mais visitadas deste blog

Iniciar e Parar Serviços do Windows (Delphi)

Em certas ocasiões nos deparamos com a necessidade de manipular determinadas atividades do SO, como iniciar ou parar um banco de dados, ou qualquer outro serviço que esteja funcionando no momento. Segue abaixo um código que encontrei na Internet para tal finalidade (não me recordo à fonte, assim que eu a encontrar colocarei).
Iniciar Serviço:

uses WinSvc;
//
// start service
//
// return TRUE if successful
//
// sMachine:
//   machine name, ie: \SERVER
//   empty = local machine
//
// sService
//   service name, ie: Alerter
//
function ServiceStart(
  sMachine,
  sService : string ) : boolean;
var
//
  // service control
  // manager handle
  schm,
//
  // service handle
  schs   : SC_Handle;
//
  // service status
  ss     : TServiceStatus;
//
  // temp char pointer
  psTemp : PChar;
//
  // check point
  dwChkP : DWord;
begin
  ss.dwCurrentState := -1;
// connect to the service
  // contr…

Alterar cores do PageControl (Delphi)

O padrão Windows todo cinza não é muito atraente, por isso quando nos utilizarmos do PageControl podemos alterar suas cores e fontes da seguinte maneira:
Em primeiro lugar devemos alterar a propriedade OwnerDraw para TRUE;
Depois implementar seu método DrawTab da seguinte maneira: //pinta a fonte
Control.Canvas.Font.Color:=clBlack;
//
// pinta a paleta / aba
Control.Canvas.brush.Color:=clSkyBlue;

PageControl1.Canvas.Rectangle(Rect);
Control.Canvas.TextOut(Rect.left+5,Rect.top+3,PageControl1.Pages[tabindex].Caption);
// pinta a parte interna (tabsheet)
PageControl1.Pages[TabIndex].brush.Color := Control.Canvas.brush.Color;
PageControl1.Pages[TabIndex].Repaint;

Caso a intenção seja manter cada aba com seu próprio estilo basta adicionar um CASE filtrando o índice das abas: case TabIndex of
  0: Control.Canvas.Font.Color:=clBlack;
  1: Control.Canvas.Font.Color:=clWindow;
  2: Control.Canvas.Font.Color:=clRed;
en…

Listar arquivos existentes em diretório (Delphi)

Mostraremos uma maneira simples e prática para listar o conteúdo de um diretório com a opção de incluir nessa listagem os arquivos de seus subdiretórios. No exemplo abaixo temos um Edit para receber o diretório a ser pesquisado um CheckBox para indicar se os subdiretórios entrarão na pesquisa um botão para efetuar a pesquisa e um Memo para listar os arquivos encontrados, no final um Edit que receberá o cálculo final (em bytes) da soma do tamanho dos arquivos. procedure TForm1.Button1Click(Sender: TObject);
begin
  tamanhoTotal := 0;
  memLista.Lines.Clear;
  ListarArquivos(edtDiretorio.Text, chkSub.Checked);
  Edit1.Text := IntToStr( tamanhoTotal );
end;
procedure TForm1.ListarArquivos(Diretorio: string; Sub:Boolean);
var
  F: TSearchRec;
  Ret: Integer;
  TempNome: string;
begin
  Ret := FindFirst(Diretorio+'\*.*', faAnyFile, F);
try
while Ret = 0 do
begin
if TemAtributo(F.Attr, faDirectory) then
begin
if (F.Name <> '.') And (F.Name &l…