Menu Dinâmico!
Canal: CSS | Autor: Daniel Guimarães | Publicado em: 04/10/2006 | Views: 13.232Olá 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!
2º Passo é montar o seguite código na estrutura <Style>:
3º Passo é colocar em pratica no <body>:
PRONTO - O menu esta feito, voce poderá formatar mais tarde do seu gosto!
O Código pronto ficará assim:
Fique com DEUS!!
Daniel Guimarães.
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.
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:
Artigo anterior
CSS e suas Media Types
A pedido, falarei um pouco sobre as di. Próximo artigo
Transparência com CSS
Hoje irei demonstrar como se faz trans.
CSS e suas Media Types
A pedido, falarei um pouco sobre as di. Próximo artigo
Transparência com CSS
Hoje irei demonstrar como se faz trans.
Compartilhe:
valeu!
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.
Com metade desse código vc faz a mesma coisa. Só organizar e agrupar bem os elementos.
FLW!
vai ter q fz o menu pra mim hahahah
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!
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?
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í!