[Tutorial] Como criar um menu simples e bonito em CSS

CSS significa Cascade Styling Sheet, que em Português se designa como Folhas de Estilo em Cascata. CSS alarga os horizontes do programador e do designer, permitindo criar as páginas de uma forma mais concisa e trabalhada, podendo assim concluir que de certa forma, o resultado final é mais controlado pelos seus criadores. O que se faz com CSS e não se faz com HTML dá um grande empurrão a quem aprende e sabe trabalhar com CSS tem seguramente melhores resultados do que aquele que trabalha apenas com HTML. Está na hora de você aprender CSS, assim vamos dar um cheirinho sobre essa matéria, que irá ser aprofundada mais tarde. Começamos neste artigo por Criar um Menu Simples com CSS.

1. SELECTORES DOS LINKS
Existem 4 selectores dos links: link, visited, hover e active. Cada um deles define um estilo diferente:

a:link – estilo do link no seu estado inicial
a:visited – estilo do link depois de visitado
a:hover – estilo do link quando se passa o rato sobre ele
a:active – estilo do link que foi clicado, enquanto estiver activo


2. EXEMPLO MENU VERTICAL

Código:

1-<!--- Aqui começa o Código CSS --->
2- 
3- <style type="text/css">
4- #menuexemplo {
5- width: 180px;
6- padding: 0;
7- margin-left: 25px;
8- font: 12px Verdana, sans-serif;
9- background: #fff;
10- border-top: 3px solid orange;
11- border-bottom: 3px solid orange;
12- }
13- #menuexemplo li {
14- list-style: none;
15- margin: 0.5em 0 0.5em 0.5em;
16- }
17- #menuexemplo li a {
18- margin:0;
19- padding:0;
20- text-decoration:none;
21- color: #000;
22- }
23- #menuexemplo li a:visited {
24- color: #000;
25- }
26- #menuexemplo li a:hover {
27- font: 15px Verdana, sans-serif;
28- }
29- #menuexemplo li a:active {
30- background: #ccc;
31- color: #000;
32- }
33- </style>
34- <!--- aqui acaba o código CSS --->
35- <!--- aqui começa o código HTML --->
36-
37- <ul id="menuexemplo">
38- <li>
39- <a href="#" title="Entrada no site">Inicio</a>
40- </li>
41- <li>
42- <a href="http://www.escolacriatividade.com/" title="Escola de Criatividade">Escola de Criatividade</a>
43- </li>
44- <li>
45- <a href="http://www.escolapsicologia.com/" title="Escola de Psicologia">Escola de Psicologia</a>
46- </li>
47- <li>
48- <a href="http://www.escoladinheiro.com/" title="Escola de Dinheiro">Escola de Dinheiro</a>
49- </li>
50- <li>
51- <a href="http://www.google.pt/" title="Google">Google.pt</a>
52- </li>
53- <li>
54- <a href="http://www.digg.com*" title="Digg">Digg.com</a>
55- </li>
56- </ul>
57- <!--- Aqui acaba o código HTMl --->

Aqui fica uma imagem do menu vertical:



3. EXEMPLO MENU HORIZONTAL

Código:


1- <!--- Aqui começa o Código CSS --->
2- 
3- <style type="text/css">
4- #menuexemplo2 {
5- border:none;
6- margin: 0;
7- font: 12px Arial, sans-serif;
8- }
9- #menuexemplo2 li {
10- list-style: none;
11- margin: 0;
12- display: inline;
13- }
14- #menuexemplo2 li a {
15- height:1px;
16- padding: 3px 1px;
17- margin:0;
18- border-top: 2px solid orange;
19- border-bottom: 2px solid orange;
20- background: #444;
21- text-decoration: none;
22- }
23- #menuexemplo2 li a:link {
24- color: #fff;
25- }
26- #menuexemplo2 li a:visited {
27- color: #fff;
28- }
29- #menuexemplo2 li a:hover {
30- background: #fff;
31- color: #000;
32- border-color: red;
33- }
34- </style>
35- <!--- aqui acaba o código CSS --->
36- <!--- aqui começa o código HTML --->
37- 
38- <ul id="menuexemplo2">
39- <li>
40- <a href="#" title="Entrada no site">Inicio</a>
41- </li>
42- <li>
43- <a href="http://www.escolacriatividade.com/" title="Escola de Criatividade">Escola de Criatividade</a>
44- </li>
45- <li>
46- <a href="http://www.escolapsicologia.com/" title="Escola de Psicologia">Escola de Psicologia</a>
47- </li>
48- <li>
49- <a href="http://www.escoladinheiro.com/" title="Escola de Dinheiro">Escola de Dinheiro</a>
50- </li>
51- <li>
52- <a href="http://www.google.pt/" title="Google">Google.pt</a>
53- </li>
54- <li>
55- <a href="http://www.digg.com*" title="Digg">Digg.com</a>
56- </li>
57- </ul>
58- <!--- Aqui acaba o código HTMl --->

Aqui fica uma imagem do menu horizontal:



Fonte: escolacriatividade[code]