Olá, hoje você VAI aprender como é simples fazer um menu CSS com estilo flash, algo que fica simples, leve(devemos nos preocupar sempre com isso, pois AINDA temos muitos usuários sem banda larga no Brasil), acessível, ou seja, respeitando os padrões do
W3C.
Primeiramente vamos criar um documento
HTML básico como este abaixo(chame de
wcut-menu.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Como um todo! me ensinou - Meu primeiro Menu CSS Vertical</title>
</head>
<body>
</body>
</html>
Em seguida, insira o código de uma lista comum HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Web Como um todo! me ensinou - Meu primeiro Menu CSS Vertical</title>
</head>
<body>
<ul id="wcut-menu">
<li><a href="#" title="home">home</a></li>
<li><a href="#" title="release">release</a></li>
<li><a href="#" title="produtos">produtos</a></li>
<li><a href="#" title="contato">contato</a></li>
</ul>
</body>
</html>
Note que foi incluído um identificador para esta lista (atributo
id), e também foi utilizado o atributo
title para atender aos Padrões
W3C para melhor
acessibilidade.
Veja como o exemplo ficou:
Reparou as bolinhas e a cor horrível né?
Então chegou a hora de brincar com o CSS e alterar o estilo da lista. Crie uma folha de estilos (CSS), nomeie para
wcut.css e insira o código abaixo:
@charset "utf-8";
/* CSS Document */
#wcut-menu{
font-family:Arial, Helvetica, sans-serif; /* Define-se a família da fonte */
border: 1px solid #000000; /* Define as propriedades da borda do elemento */
width: 200px; /* Define a largura do elemento em pixels(px) */
list-style-type:none; /* Retira os marcadores (bolinhas) da lista */
text-align:center; /* Centraliza o texto dentro do menu */
padding-left:0px; /* Elimina os espaços da esquerda */
}
Agora adicione esta linha entre as tags <head> e </head>
<link rel="stylesheet" href="wcut.css" type="text/css" />
Agora sim, já deu uma melhorada tente entender qual impacto cada linha de CSS teve.
Vamos agora editar cada item da lista (tag
li no HTML)
#wcut-menu li a{
display:block; /* Exibe o link em bloco (ocupa toda área) */
color:#663300; /* Altera a cor do elemento */
text-decoration:none; /* Retira o sublinhado do link */
}
Agora, você vai aprender uma propriedade do CSS que será muito útil em efeitos, adicione a linha abaixo em seu arquivo CSS
#wcut-menu li a:hover{
background-color:#663300;
color:#FFFFFF;
}
Eis que surge como mágica um efeito como menu flash
A propriedade :hover em frente ao identificador css (neste caso "
#wcut-menu li a" que indica que busca um elemento
'a' dentro de uma tag
'li' dentro de um elemento identificado por
wcut-menu ) faz com que o que está descrito dentro será setado somente quando o mouse passar pelo elemento.
Veja aqui o
Resultado Final do tutorial
Bom, acho que isso já abre a mente de muitos, agora é só se divertir e criar. Qualquer dúvida é só comentar que respondemos. Pra quem quer se aprofundar mais no CSS
este site descreve todas as propriedades do CSS, é só devorar.
Espero que tenha ajudado. Abraços!
Twitter
RSS
