Twitter
RSSPrimeiramente 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!
