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!

<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?