Twitter
RSSPrimeiramente 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:
muito legal a iniciativa, falta vc colocar um link com o script funcionando! abraços!
Postar um comentário