Publicado por: Paulo Fernandes | 30/jul/2009

Criando um menu bem simples

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”&gt;

<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=”https://aprendacss.wordpress.com”>Aprenda CSS</a></h1>

             <ul>

                    <li><a href=”https://aprendacss.wordpress.com”>Aprenda CSS</a></li>

                    <li><a href=”https://aprendacss.wordpress.com”>Aprenda CSS</a></li>

                    <li><a href=”https://aprendacss.wordpress.com”>Aprenda CSS</a></li>

                    <li><a href=”https://aprendacss.wordpress.com”>Aprenda CSS</a></li>

                    <li><a href=”https://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=”https://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

Anúncios

Responses

  1. 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

    • Não entendi o que você quer.

      • eu entendi o que ela quer
        no caso é que ela quer apenas por exemplo no final

        home

        ela ira colocar um [espaço]|[espaço]

  2. Eu quero fazer sub abas, de paginas no tema contemp, como?

  3. 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 ^^


Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

Categorias

%d blogueiros gostam disto: