Banner propaganda da DevMedia - Cursos de desenvolvimento web

CSS Menu

Publicado em: 03/11/2003

Construção de menus

CSS possibilita definir uma variedade infinita de layouts e efeitos para um menu de navegação. O limite é a sua imaginação!

Um link visitado, não visitado, ativo ou no estado hover (quando você passa o mouse sobre ele) pode assumir aspectos (cores, fundos, etc...) diferentes através de CSS:

Abordarei neste tutorial a construção de dois menus verticais e uma barra de navegação.

Numa visão inicial mostro o menu em ação e a seguir apresento a folha de estilo e a marcação do código que faz o menu funcionar.

Caso você resolva copiar e colar os códigos, use os mostrados no tutorial, pois o do código fonte está adaptado para não conflitar com as estilizações do site e não funcionarão como mostrado.

Bons estudos.

Os seletores de links

São quatro os seletores dos links:

  1. a:link define o estilo do link no estado inicial;
  2. a:visited define o estilo do link visitado;
  3. a:hover define o estilo do link quando passa-se o mouse sobre ele;
  4. a:active define o estilo do link ativo (o que foi "clicado").

Menu #1

O menu em ação:

Screenshots do menu:

Renderização do menu no Internet Explorer 5 , no 6 e no Firefox

Folha de estilos do menu

#menuver {
width: 11em;
padding: 0; 
margin: 0;
font: 12px Verdana, sans-serif;
background: #000; 
border-top: 3px solid red; 
border-bottom: 3px solid red; 
}
#menuver li {
list-style: none;
margin: 0.5em 0 0.5em 0.5em; 
}
#menuver li a {
margin:0; 
padding:0;
text-decoration:none;
color: #fff;
}
#menuver li a:visited {
color: #fff;
}
#menuver li a:hover { 
background: #fff;
color: #000; 
}
#menuver li a:active { 
background: #ccc;
color: #000; 
}

Código HTML do menu

<ul id="menuver">
<li>
<a href="#" title="Entrada no site">Home</a>
</li>
<li>
<a href="#" title="Área de tutorial CSS"
>CSS Tutorial</a>
</li>
<li>
<a href="#" title="Técnicas de layout com CSS"
>CSS Layout</a>
</li>
<li>
<a href="#" title="Técnicas de efeitos em links"
>CSS Links</a>
</li>
<li>
<a href="#" title="Construção de menus"
>CSS Menu</a>
</li>
<li>
<a href="#" title="CSS para impressão"
>CSS Print</a>
</li>
<li>
<a href="#" title="Importação de folhas de
 estilo">CSS @import</a>
</li>
<li>
<a href="#" title="Fale conosco">Contato</a>
</li>
</ul>

Menu #2

Nos browsers citados no menu anterior todas as renderizações se mostraram iguais.

Folha de estilos do menu

#menubv {
width: 12em;
padding: 0;
margin: 0;
font: 14px Verdana, sans-serif;
}
#menubv ul {
list-style: none;
margin: 0;
padding: 0;
}
#menubv li {
border-bottom: 1px solid #f00;
margin: 0;
}
#menubv li a {
display: block;
padding: 5px 5px 5px 0.5em;
font-weight:bold;
border-left: 10px solid #ffc0cb;
border-right: 10px solid #fff5ee;
background-color: #ffe4e1;
color: #808000;
text-decoration: none;
}
#menubv li a:hover {
border-left: 10px solid #fcc;
border-right: 10px solid #fff;
background-color: #fff0f5;
color: #ccc;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#menubv  li { float: left; height: 1%; }
* html ul#menubv  li a { height: 1%; }
/* End */

Código HTML do menu

<div id="menubv">
...mesmo código do menu#1...
</ul>

Mais menu de navegação:
http://maujor.com/tutorial/menu_vert.php
http://maujor.com/tutorial/menurollimg.php


Barra de navegação

Nos browsers citados no menu#1 todas as renderizaçõos se mostraram iguais.

Nota: Retirei o link CSS @import deste exemplo para acomodar ao espaço disponível

Folha de estilos do menu

#menuhor {
border:none;
margin: 0;
font: 9px Arial, sans-serif;
}
#menuhor li {
list-style: none; 
margin: 0;
display: inline;
}
#menuhor li a {
height:1px; /* IE5.0 bug */
padding: 3px 1px; 
margin:0;
border: 1px solid #f00; 
background: #999;
text-decoration: none;
}
#menuhor li a:link {
color: #fff;
}
#menuhor li a:visited {
color: #fff;
}
#menuhor li a:hover {
background: #ccc;
color: #000; 
border-color: #000;
}

Código HTML do menu

<ul id="menuhor">
...mesmo código do menu#1...
</ul>

Mais barras de navegação:
http://maujor.com/tutorial/barNavCSS.php
http://maujor.com/tutorial/barrabotao.php

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo