7 de mar de 2010

Menu CSS Horizontal (efeito flash)

Olá, hoje você VAI aprender como é simples fazer um menu CSS horizontal com estilo flash respeitando os padrões do W3C.

Primeiramente vamos criar um documento HTML básico como este abaixo(chame de wcut-menu002html):

<!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 wcut002.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 */     
    list-style-type:none; /* Retira os marcadores (bolinhas) da lista  */     
    text-align:center; /* Centraliza o texto dentro do menu */
    padding:0px 0px; /* Elimina os espaços da esquerda */
}

#wcut-menu li{
    display:inline; /* exibe os elementos em linha (horizontalmente) */
}


Agora adicione esta linha entre as tags <head> e </head>

<link rel="stylesheet" href="wcut002.css" type="text/css" />

Agora sim, já deu uma melhorada tente entender qual impacto cada linha de CSS teve.



Vamos agora editar cadalink  item da lista (tag li no HTML)

#wcut-menu li a{
    color:#663300; /* Altera a cor do elemento */
    text-decoration:none; /* Retira o sublinhado do link */
    height:30px;
    display:inline-block; /* preenche toda a área como link (em linha) */
}



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

Espero que tenha ajudado. Abraços!

0 comentários: