(X)HTML, CSS, JavaScript, AJax & PHP
RSS icon Email icon Bullet (black)
It is me

Sobre Mim

Olá, meu nome é Carlos Roberto tenho 23 anos e trabalho com desenvolvimento web a mais de um ano participando ativamente na criação de sites webstandards. Atualmente trabalho em uma agência de publicidade e propaganda na cidade de Ribeirão Preto, a Atual Interativa (Atual/CD) na qual atuo como Webdesigner.

Neste blog pretendo colocar dicas e textos das áreas de Web Standards e ajudar a difundir o conceito na comunidade brasileira de desenvolvedores.

Boa leitura a todos!

Siga no Twitter

Fique por dentro das atualizações do blog no twitter

http://twitter.com/carlosrberto

Search

 

março 2010
D S T Q Q S S
« jul    
 123456
78910111213
14151617181920
21222324252627
28293031  

Enquete

O que você achou do blog?

View Results

Loading ... Loading ...

Usuários Online

  • Criando um Menu CSS com listas

    Posted on março 8th, 2009 Carlos Roberto 3 comments

    Uma das coisas que os iniciantes em CSS tem certa dificuldade é em criar menus CSS, mas isso como veremos é uma uma das coisa mais simples de se fazer.

    Menus CSS são tão belos como menus em flash, e melhor, são mais acessiveis, amigaveis e ajudam os mecânismos de busca como por exemplo o google.

    Vejamos como criar um menu css simples como o da figura abaixo:

    mn_1

    Vamos imaginar que nosso site tem um topo, que será representado pela div#topo , dentro dela teremos a nossa lista não ordenada chamada ul#menu e os itens do nosso menu conforme a figura acima.

    O html que teremos então será o seguinte:

    
<div id="topo">
<ul id="menu">
<li><a href="#">home</a></li>
<li><a href="#">trabalhos</a></li>
<li><a href="#">currículo</a></li>
<li><a href="#">contato</a></li>
</ul>
</div>

    Resultaria nisso:

    mn_2

    Vamos começar zerando as margens e paddings do nosso documento e definindo uma altura e largura para o nosso topo com css abaixo:

    
* {
margin:0;
padding:0;
}
#topo {
width:100%;
height:28px;
}

    Agora vamos trabalhar com os itens do menu transformando ele em um menu horizontal ao invez de vertical e retirar os marcadores. Usaremos o seguinte css.

    
#menu li {
list-style-type:none;
display:inline;
}

    O segredo do menu CSS está na estilização dos links, faremos o seguinte, vamos flutuar nossos links para esquerda, fazendo isso poderemos declarar uma largura e altura para os eles (todos terão a mesma altura e largura), colocar um display:inline para poder aplicar margens sem ter problemas como o bug da margem duplicada, vamos tirar o sublinhado dos links usando o text-decoration:none, deixalos centralizados com text-align:center, remover aquela borda pontilhada que aparece nos links no firefox usando outline:none e aplicar um padding-top para centralizar o texto no link verticalmente lembrando de reajustar o valor de height.

    O CSS que resultaria isso seria o seguinte:

    
#menu li a {
width:70px;
height:20px;
font-family:tahoma;
font-size:11px;
color:#fff;
background:#000000;
text-align:center;
text-decoration:none;
outline:none;
padding-top:5px;
margin-left:20px;
display:inline;
float:left;
}

    Nosso menu está praticamente pronto só falta estilizar o estado hover dos links para que quando o usuário passar o mouse sobre ele o mesmo mude de cor.

    O seguinte CSS se encarrega disso:

    
#menu li a:hover {
background:#CCCCCC;
color:#000;
}

    Juntando tudo teriamos:

    
* {
margin:0;
padding:0;
}
#topo {
width:100%;
height:28px;
}
#menu {
height:25px;
float:right;
}
#menu li {
list-style-type:none;
display:inline;
}
#menu li a {
width:70px;
height:20px;
font-family:tahoma;
font-size:11px;
color:#fff;
background:#000000;
text-align:center;
text-decoration:none;
outline:none;
padding-top:5px;
margin-left:20px;
display:inline;
float:left;
}
#menu li a:hover {
background:#CCCCCC;
color:#000;
}

    Até o momento nosso menu ficaria como o do seguinte link:

    http://crgdesign.com.br/im/menu-css/menu1.html

    Criando o Efeito de Menu Ativo

    O efeito de menu ativo é aquele no qual o item do menu na página correspondente está ativo.

    Por exemplo se estivermos na página trabalhos o link da página trabalhos estaria ativo, como na figura abaixo:

    mn_31

    Mas como fazer isso?

    É mais simples do que imaginamos, basta primeiramente adicinarmos uma classe para cada item do menu no html, ficando assim:

    
<div id="topo">
<ul id="menu">
<li><a class="home" href="#">home</a></li>
<li><a class="trab" href="#">trabalhos</a></li>
<li><a class="curr" href="#">currículo</a></li>
<li><a class="cont" href="#">contato</a></li>
</ul>
</div>

    Agora adicionamos um id no body de cada página, por exemplo na página home colocamos no body o id de home, assim:

    
<body id="home">

</body>

    Isso se chama “Seletor Contextual“, usaremos o seguinte CSS:

    
#home #topo #menu li .home, #trab #topo #menu li .trab, #curr #topo #menu li .curr, #cont #topo #menu li .cont{
background:#CCCCCC;
color:#000;
}

    Reparem que coloquei todas as declarações juntas separadas por vírgula para economizar espaço.

    Pronto, temos um menu em CSS e contextual, ou seja fica ativo de acordo com o contexto.

    Visualizar o menu final

    Em um próximo tutorial ensinarei como fazer um menu CSS com imagens corretamente.

    Abraços e até o próximo!

    • Share/Save/Bookmark

    Posts relacionados

    (X)HTML/CSS, Web Standards , , , , , , , ,
    1 Estrela2 Estrelas3 Estrelas4 Estrelas5 Estrelas (2 votes, average: 3,00 out of 5)
    Loading ... Loading ...
     

    3 Responses to “Criando um Menu CSS com listas”

    1. wannya maio 23rd, 2009 at 19:12

      como fazer um menú igual ao do site?(Strict Web Standards)

    2. Pedro Diaz julho 21st, 2009 at 23:10

      Bacana essa dica de “Seletor Contextual“… Sei fazer esse ‘efeito’ de menu ativo, mas de outra forma. Vivendo e aprendendo! Valeu!

    3. Carlos Roberto julho 21st, 2009 at 23:17

      Realmente é uma boa prática!

      obrigado pelo comentário!

    Leave a Reply

    CAPTCHA image

Powered by WordPress Mortgages theme designed by AZ Money Web Design