Esse tutorial foi baseado no scprit desenvolvido pelo ~Patybs, apenas criei um tutorial e modifiquei o código conforme minha preferência.
CRIANDO O HTML:
Bom primeiramente coloque a estrutura básica do html que é essa aqui:
<html>
<head>
<title> Menu vertical </title>
</head>
<body>
</body>
</html>
Certo agora vamos colocar os itens do menu, serão apenas links a parte importante e mais complexa fica por conta do css, o código dos menus é esse aqui:
<html>
<head>
<title> Menu vertical </title>
</head>
<body>
<a class="menu" href="">Oficina da net</a>
<a class="menu" href="">Tutoriais clube</a>
<a class="menu" href="">Capixabinha</a>
</body>
</html>
A parte do html está pronta vamos agora programar o css.
A PARTE DO CSS:
Vou por o css dentro do próprio html, caso queiram criar um documento externo fiquem a vontade. O código de formatação do css é esse:
info
Grupo: Campones
Registrado: 21/11/07
Posts: 1
Reputação: 0
Olá,
Esse tutorial foi baseado no scprit desenvolvido pelo ~Patybs, apenas criei um tutorial e modifiquei o código conforme minha preferência.
CRIANDO O HTML:
Bom primeiramente coloque a estrutura básica do html que é essa aqui:
A parte do html está pronta vamos agora programar o css.
A PARTE DO CSS:
Vou por o css dentro do próprio html, caso queiram criar um documento externo fiquem a vontade. O código de formatação do css é esse:
<style> a.menu{ width: 150; background-color: #efefef; display:block; padding-left:1px; border-left:10px solid #333333; border-bottom:1px solid #BBBBBB; font-weight:bold; color:#666666; line-height:175%; } a.menu:hover{ background-color: #e3eeff; display:block; padding-left:0; font-weight:bold; border-left:10px solid #333333; border-bottom:1px solid #006699; color:#006699; } </style>Coloque os scprits do css dentro das tags <style> ou crie um documento externo.
EXPLICANDO O CÓDIGO:
a.menu
Define que o objecto a ser formatado é o menu.
width: 150;
Define a largura do menu
background-color: #efefef;
Define que a cor do fundo do item menu será #efefef
padding-left:1px;
Define a quantidade de pixels que terá da margem esquerda.
border-left:10px solid #333333;
Tal código cria uma borda do lado esquerdo de um objeto (no caso o menu), define a espessura, que sua forma é sólida e sua cor (hexadecimal).
border-bottom:1px solid #BBBBBB;
Como no código a cima ele criará uma borda porém na parte de baixo do objeto, define sua espessura, sua forma e sua cor (também hexadecimal).
font-weight:bold;
Diz que o texto será formatado em negrito.
color:#666666;
Define a cor do fundo do menu.
line-height:175%; }
Define a grossura do fundo, pode ser usado pixels e pontos também.
a.menu:hover
Define que quando o objeto menu for selecionado tal formatação será ativo (essa opção é possível graças ao hover).
background-color: #e3eeff;
Define que a cor do objeto selecionado será #e3eeff (coloque uma cor diferente da selecionada inicialmente para obter o resultado esperado).
display:block;
Define a posição em blocos.
padding-left:0;
Define que não existira padding-esquerdo (eu resetei essa opção coloque 10 e veja o que acontece).
font-weight:bold;
Essa opção já foi explicada, define o texto como negrito.
border-left:10px solid #333333;
Define que a borda lateral terá 10pixels, será sólida e terá a cor #333333 (mude e veja o que acontece).
border-bottom:1px solid #006699;
Aqui diz o que ira acontecer com a borda inferior quando o objecto for selecionado.
color:#006699;
Muda a cor do fundo para #006699 quando o objeto for selecionado.
Bom pessoal, não posso colocar um exemplo para vocês clicar em porém observem como ficara o menu.
MENU NÃO SELECIONADO:
MENU SELECIONADO: