CSS
Menu Dinâmico!
Publicado em: 04/10/2006 |
CSS |
Visualizações: 7.374 |
6 Comentário(s)
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.
Daniel Guimarães
WebDesigner e Designer Gráfico
» Site do colunista
Todas as matérias de Daniel Guimarães
- Identidade Visual: O que não fazer na criação de um logotipo
Nesse artigo nós veremos o que não deve ser feito na hora de criar um logotipo, . - Conceito Básico Sobre a Matemática
Programadores e desenvolvedores, agora já os internautas. Eu não sei o que dizer. - Miniaturas de Sites com Websnapr
Nesse artigo veremos como criar miniaturas de sites usando apenas um link, ao in. - Palestras, o que aproveitar delas?
Ir a palestras ou assisti-las em seu computador ou qualquer outro dispositivo o . - Curso de Visual Basic - Aula 6 - Criando um visualizador de imagens
Nesta sexta vídeo aula, iremos aprender como criar um visualizador de imagens co.
- Rollover de imagem com CSS
Neste tutorial vou mostrar a você como fazer um rollover de imagem usando css. O. - Criando sombra no CSS
Colocando sombra em um texto na página - CSS - HTML Dinâmico
Alguma vez você decidiu alterar as cores dos link de sua home-page? Que tal alt. - Atributos CSS
Alguns atributos de css e o que eles representam: - Pop Up em CSS
Meu diretor pediu para colocar uma popup em um site nosso, mas não queria coloca.
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
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!