Menu Dinâmico!

Canal: CSS  |  Autor: Daniel Guimarães  |  Publicado em: 04/10/2006  |  Views: 13.232
Olá Galera da Oficina da NET ,

Vamos aprender um menu dinâmico semelhante ao menu do site uol, é bem simples o processo que iremos ver:

1º Passo é montar a estrutura HTML e CSS!

<html>
<head>
<title>Menu</title>
</head>
<body>


</body>
</html>


2º Passo é montar o seguite código na estrutura <Style>:

<style type="text/css">
#menu {  /* Aqui definimos o o estado do menu normal */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana;  /* Aqui definimos a fonte*/
font-size: 11px;  /* Aqui definimos o tamanho da fonte*/
color: white;   /* Aqui definimos a cor da fonte*/
background-color: #43A9FF;  /* Aqui definimos o fundo*/
border: 1px solid #A9D8FF;   /* Aqui definimos a borda*/
text-decoration: none;   /* Aqui definimos a decoração do texto*/
}
#menu:hover {   /* Aqui definimos o o estado do menu quando o mouse é passado por cima */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana; /* Aqui definimos a fonte*/
font-size: 11px;  /* Aqui definimos o tamanho da fonte*/
color: white;   /* Aqui definimos a cor da fonte*/
background-color: #1E77C3;  /* Aqui definimos o fundo, no caso uma cor mais escura*/
border: 1px solid #A9D8FF;  /* Aqui definimos a borda*/
text-decoration: underline;  /* Aqui definimos a decoração do texto, no caso está sublinhado*/
}
</style>


3º Passo é colocar em pratica no <body>:

<a id="menu" href="http://www.oficinadanet.com.br">Oficina da NET</a><br>
<a id="menu" href="http://www.uol.com.br">Uol</a><br>
<a id="menu" href="mailto:guimaraes_dgm@hotmail.com">e-mail</a><br>


PRONTO - O menu esta feito, voce poderá formatar mais tarde do seu gosto!

O Código pronto ficará assim:

<html>
<head>
<title>Menu</title>
<style type="text/css">
#menu {  /* Aqui definimos o o estado do menu normal */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana;  /* Aqui definimos a fonte*/
font-size: 11px;  /* Aqui definimos o tamanho da fonte*/
color: white;   /* Aqui definimos a cor da fonte*/
background-color: #43A9FF;  /* Aqui definimos o fundo*/
border: 1px solid #A9D8FF;   /* Aqui definimos a borda*/
text-decoration: none;   /* Aqui definimos a decoração do texto*/
}
#menu:hover {   /* Aqui definimos o o estado do menu quando o mouse é passado por cima */
width:120px; /* Aqui definimos o tamanho na horizontal */
height:20; /* Aqui definimos o tamanho na vertical */
padding-left: 6px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
padding-top: 2px; /* Aqui definimos o espaço entre o texto e a borda esquerda */
font-family: verdana; /* Aqui definimos a fonte*/
font-size: 11px;  /* Aqui definimos o tamanho da fonte*/
color: white;   /* Aqui definimos a cor da fonte*/
background-color: #1E77C3;  /* Aqui definimos o fundo, no caso uma cor mais escura*/
border: 1px solid #A9D8FF;  /* Aqui definimos a borda*/
text-decoration: underline;  /* Aqui definimos a decoração do texto, no caso está sublinhado*/
}
</style>
</head>
<body>
<a id="menu" href="http://www.oficinadanet.com.br">Oficina da NET</a><br>
<a id="menu" href="http://www.uol.com.br">Uol</a><br>
<a id="menu" href="mailto:guimaraes_dgm@hotmail.com">e-mail</a><br>
</body>
</html>


Fique com DEUS!!
Daniel Guimarães.
Creative Commons Esta obra está licenciada sob uma Licença Creative Commons. Você pode copiar, distribuir, exibir, executar, desde que seja dado crédito ao autor original (Citando nome do autor, data, local e link de onde tirou o texto). Você não pode fazer uso comercial desta obra. Você não pode criar obras derivadas.
Vote no artigo:

Compartilhe:

[x] Fechar Preencha os campos abaixo para indicar esta página:
Seu nome:
Seu e-mail:
Nome do indicado:
E-mail do indicado:
Deixe uma mensagem:
Anti-spam:

(nova imagem)
Preencha o que vê:
Twitter diHITT Facebook delicious envie por e-mail comentar

comentarComentários:

Preencha o formulário para comentar:

[x] Fechar
Nome:*
E-mail:* (não será exibido)
Site: (http://)
Comentário:*
Anti-spam:

(nova imagem)
Preencha o que vê:

Deseja receber as respostas dos comentários

Publicado em:
04/03/2007 - 17:48
Meu irmão alem de ser um pouco simples, ficou muito bom a cor e tudo +!
valeu!
Publicado em:
26/03/2007 - 15:54
Comigo se fizer numa página html da certo, tentei colocar numa página php e ta dando erro o menu tipo amontoa e fica bem estranho, se alguem puder me dar uma mão, o endereço hospedado é http://www.lrbdigital.com.br/new_site/
Publicado em:
04/04/2007 - 12:50
Oi Luke,
bom se o menu está dando erro, concerteza será um dos código PHP que está interferindo. Mas o site que voce me forneceu, eu não consegui encontrar o menu que se refere.
Abraços, Daniel.
Obs.: Encontrei muita beleza em seu site, mas só precisa formatar as fontes, mas gostei da criação das imagens.
Igor
Publicado em:
28/06/2007 - 09:25
Achei q o código ficou um absurdo de grande para fazer um menu tão simples.
Com metade desse código vc faz a mesma coisa. Só organizar e agrupar bem os elementos.

FLW!
Rosalia
Publicado em:
11/07/2007 - 13:03
Rosalia
fl ai dani achei mto dificil seu código!!!!!!!
vai ter q fz o menu pra mim hahahah
Daniel Guimarães
Publicado em:
13/09/2008 - 22:55
Acredito que não Igor, pois ao lado dos atributos são Comentários, e o código está recheado formatações.

O CSS nesta página está em 30 linhas, o que é isso para um navegador que em conexão 56k leva 0,2 segundos

Abraços!
Anderson
Publicado em:
05/12/2008 - 11:36
Anderson
o q tem de dimâmico no menu? achei que iria aparecer quando passasse o mouse em cima ou algo assim...
Ricardo
Publicado em:
04/01/2009 - 17:20
Ricardo
mermao, menu dinâmico? isso é uma piada! e de mal gosto ainda ¬¬
Cleriton
Publicado em:
20/01/2009 - 19:50
Cleriton
Parabéns Daniel Guimarães. Os comentários nos codigos significam que vocês realmente entende o que fez. Por isso, fica entao meus elogios.

O menu é dinâmico e é simples sim, mas com a imaginação é que se consegue fazer o que quer.
Eu consegui, mas e vocês?

Eduardo
Publicado em:
07/10/2009 - 08:44
Eduardo
Menu dinâmico?

Que eu saiba dinâmico é quando pode ser customizado através
de variáveis... Esse menu é estático, já que tu simplesmente jogou os links ali...

Rever isso aí!