4 de mar de 2010

Menu CSS Vertical (efeito flash)

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!

1 comentários:

weller miranda disse...

muito legal a iniciativa, falta vc colocar um link com o script funcionando! abraços!