Menu simples com CSS
Vou explicar como criar um menu bem legal com HTML e CSS. Abaixo tem uma imagem de como ele ficará.
Menu 1
Menu 1
Primeira mente vamos escrever o código da seguinte forma.
Criaremos uma div com a id “menu” com os links que você quer para seu menu.
<div id="menu"> <a href="#">Link 1</a> | <a href="#">Link 1</a> | <a href="#">Link 1</a> | <a href="#">Link 1</a> </div>
Perfeito, agora como faremos nosso menu com CSS? O CSS é a melhor maneira para dar visual a páginas web, com ela você pode inserir cores dos links, colocar imagens de fundo para cada elemento, uma série de coisas podem ser feitas pelo CSS.
Agora temos que colocar o visual. O menu poderá ser ajustado para ficar do lado esquerdo ou direito, basta alterar o float para left (esquerda) ou right (direita).
#menu {
margin: 15px;
padding: 10px;
background:#333333;
color: #ffffff;
float: left;
}
#menu a:link, #menu a:visited {
color: #ffffff;
text-decoration: none;
}
#menu a:hover {
color: #0099FF;
text-decoration: underline;
}
Este menu é bem simples. a id #menu define as características para o elemento que tem a id menu, no nosso caso a divisória. Demos 15px de margem, 10px de padding, que é a distância do texto, imagem, ou qualquer outro tipo de conteúdo para a borda, definimos uma cor (cinza escuro) para o fundo, que é a propriedade background, a propriedade color define a cor do texto, dizemos que será branco e por último usamos float, que significa que o texto irá flutuar a esquerda.
Menu 2
Primeiramente digitaremos o código html, que é nossa estrutura. Abaixo segue a imagem de como ele ficará.
Menu 2
Vamos ao código. Insira uma divisória com id “menu2″. Agora vamos fazer de um modo diferente, usando lista para formar-mos nosso menu.
<div id="menu2">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
A tag “ul” é usada para listas que não possuem uma ordem, em inglês unordered list. A tag “li” é utilizada para definir um item da lista, do inglês list item.
Agora vamos implementar o CSS.
#menu2 {
margin: 0px;
float: right;
margin: 15px;
}
#menu2 ul {
background:#0099FF;
color: #ffffff;
list-style: none;
padding: 4px;
float: left;
}
#menu2 li {
float: left;
}
#menu2 li a:link, #menu2 li a:visited{
background: #0099FF;
display: block;
padding: 8px;
background: #8DCDEF;
text-decoration: none;
color: #ffffff;
}
#menu2 li a:hover{
background: #0099ff;
color: #ffffff;
}
Eu aconselho que sempre use para links a Pseudo classe :link e :visited e não deixar somente como a. Estes 2 códigos auxiliam o estado do nosso link. Se no caso você já visitou o link e não tiver formatado ele com CSS, ele ficará da cor padrão do navegador, que é roxo se eu não me engano.
As 4 pseudo classes usadas pela tag “a” são:
a:link -> Para o link normal
a:visited -> para links que o usuário já tenha acessado.
a:hover -> para quando o usuário passar o mouse em cima ele dar o estilo
a:active -> para quando o usuário clicar no link ele dar o estilo
Abaixo segue o código dos 2 menus juntos. Espero que tenham gostado.
“Copy aeee”
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Alexandre Mattos Blog - Menu</title>
<style>
* { /* esta formatação é para remover qualquer tipo de margin e padding do documento */
margin: 0px;
padding: 0px;
}
#menu {
margin: 15px;
padding: 10px;
background:#333333;
color: #ffffff;
float: left;
}
#menu a:link, #menu a:visited {
color: #ffffff;
text-decoration: none;
}
#menu a:hover {
color: #0099FF;
text-decoration: underline;
}
/********************* fim do menu 1 *************************/
#menu2 {
margin: 0px;
float: right;
margin: 15px;
}
#menu2 ul {
background:#0099FF;
color: #ffffff;
list-style: none;
padding: 4px;
float: left;
}
#menu2 li {
float: left;
}
#menu2 li a:link,
#menu2 li a:visited{
background: #0099FF;
display: block;
padding: 8px;
background: #8DCDEF;
text-decoration: none;
color: #ffffff;
}
#menu2 li a:hover{
background: #0099ff;
color: #ffffff;
}
</style>
</head>
<body>
<div id="menu">
<a href="#">Link 1</a> | <a href="#">Link 1</a> | <a href="#">Link 1</a> | <a href="#">Link 1</a>
</div>
<div id="menu2">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</div>
</body>
</html>
Um abraço!
Ninguéam comentou ainda.
Deixar um comentário
Pesquisar no Blog
Tópicos recentes
Calendário de Posts
Arquivos
- fevereiro 2010 (1)
- dezembro 2009 (14)
