CSS Menu
11:33Fresh Young´s
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:
- a:link define o estilo do link no estado inicial;
- a:visited define o estilo do link visitado;
- a:hover define o estilo do link quando passa-se o mouse sobre ele;
- a:active define o estilo do link ativo (o que foi "clicado").
Menu #1
O menu em ação:
Screenshots do menu:
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
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>
0 comentários