Menu Dinâmico!
Menu Semelhante a do UOL, muito interesante...
Publicado em: 4 de outubro de 2006 | Leituras: 15.290 |
Canal: CSS |
Autor: Daniel Guimarães
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!
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.
Resposta em até 24 horas! (grátis)Dúvidas?
Autor da matéria
Últimas matérias escritas pelo autor:
|
Daniel Guimarães Estudante Universitário, FreeLance e Estagiário. |
Últimas matérias escritas pelo autor:
02/03 - Porque a criação do CSS?
17/12 - Menu Vertical
27/10 - Introdução ao CSS – Parte II
06/10 - Introdução ao CSS – Parte I
06/10 - Borda Colorida
04/10 - Menu Dinâmico!
17/12 - Menu Vertical
27/10 - Introdução ao CSS – Parte II
06/10 - Introdução ao CSS – Parte I
06/10 - Borda Colorida
04/10 - Menu Dinâmico!
Últimas matérias
O que você procura para sua vida profissional?
O planejamento agrega valor
E-mail marketing em 140 caracteres
Novos iPods, novo iOS, novo iTunes e nova Apple TV
Conheça as 100 primeiras cidades atendidas pelo Banda Larga ...
Linus Torvalds diz que mercado já se rendeu ao Linux
