Olá pessoal, hoje postarei um artigo bem simples. O objetivo deste artigo é mostrar aos principiantes como criar um menu.
Na internet tem muitas ferramentas que auxiliam na criação, muitos sites que disponibilizam códigos, isso é muito bom, porém, você entende o que eles fizeram, entendem o seu código fonte?
Neste artigo tentarei explicar como criar um menu, na raça e como deixá-lo do jeito que queremos.
Vamos ao código xHTML básico do nosso menu.
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=iso-8859-1″ />
<title>..:: Criando e entendendo um menu by aprendacss.wordpress.com ::..</title>
</head>
<body>
<div>
<div>
<h1><a href=”http://aprendacss.wordpress.com”>Aprenda CSS</a></h1>
<ul>
<li><a href=”http://aprendacss.wordpress.com”>Aprenda CSS</a></li>
<li><a href=”http://aprendacss.wordpress.com”>Aprenda CSS</a></li>
<li><a href=”http://aprendacss.wordpress.com”>Aprenda CSS</a></li>
<li><a href=”http://aprendacss.wordpress.com”>Aprenda CSS</a></li>
<li><a href=”http://aprendacss.wordpress.com”>Aprenda CSS</a></li>
</ul>
</div>
<div>
<p>Aqui vai o conteudo da página.</p>
</div>
<div>
<p>
Todos Direitos Reservados – <a href=”http://aprendacss.wordpress.com”><strong>Aprenda CSS</strong></a> – 2009
</p>
</div>
</div>
</body>
</html>
Agora vamos definir um um arquivo css para a estilização. Vamos resetar a margem e o padding de todos os elementos da página usando a técnica CSS Reset, também definiremos um layout básico para a página para vermos as separações, o layout não ficará belo, mas explicará o que desejamos mostrar.
* { margin: 0; padding: 0; }
body {
text-align: center;
}
#tudo {
margin: 0 auto;
text-align: left;
width: 1000px;
}
#cabecalho {
height: 150px;
}
#cabecalho h1{
height: 100px;
line-height: 100px;
background-color: #ABC;
text-align: center;
}
#conteudo {
height: 300px;
background-color: #DEF;
}
#rodape {
height: 50px;
background-color: #AAA;
text-align: center;
}
#rodape p {
line-height: 50px;
}
/********** AQUI COMEÇA O MENU ********************/
#cabecalho ul#menu {
height: 50px;
background-color: #123;
list-style: none;
}
#cabecalho ul#menu li{
float: left;
line-height: 50px;
width: 200px;
text-align: center;
}
#cabecalho ul#menu li a{
display: block;
margin: 0 20px;
text-decoration: none;
}
#cabecalho ul#menu li a:hover {
background-color: #456;
text-decoration: none;
color: #FFF;
}
Vamos explicar os códigos no menu:
Primeiramente, removemos aqueles “bullets” da lista, usando a propriedade list-style: none;, depois colocamos cada elemento da lista para flutuar do lado esquerdo, usando float: left;, definimos um tamanho e a altura da linha para ele ficar alinhado no centro.
Para cada link colocamos um display: block; para ele ocupar todo o espaço, e para um link na ficar colado no outro colocamos uma margem à direita e a esquerda.
Todas as outras especificações são para o layout do menu.
Bom, aqui terminamos o artigo, até a próxima pessoal.
Abraço
Ta certo!!!
Mas onde eu coloco esses códigos?!
Eu na verdade queria criar um cabeçalho assim ex:
|Inicio| |Sair| |Entrar| |Fazer logof|
Tudo isso no topo da pagina, tipo igual a sites mas só que no blogspot
Valew
Por: Leandro Rocks em 18/out/2009
às 13:30:54
Não entendi o que você quer.
Por: Paulo Fernandes em 21/mar/2010
às 11:59:19
Eu quero fazer sub abas, de paginas no tema contemp, como?
Por: _Parkour em 2/dez/2010
às 12:20:52
Onde eu coloco os codigos? Eu gostaria de criar uma barra de menu superior.
Por exemplo:
[jobs] [ilustrações] [design]
queria uns 5 menus, mas os templates prontos so dao a opção de um. Como eu altero isso?
Obrigada ^^
Por: heloisaramalho em 26/abr/2011
às 19:41:12