CSS
Criando menus verticais
Publicado em: 24/04/2007 |
CSS |
Visualizações: 6.351 |
2 Comentário(s)
Olá,
Esse tutorial foi beseado 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:
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:
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 avontade. O código de formatação do css é esse:
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 margen esquerda.
border-left:10px solid #333333;
Tal código cria uma borda do lado esquerdo de um objecto (no caso o menu), define a espesura, 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 objecto, define sua espesura, 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 objecto menu for selecinado tal formatação será ativo (essa opção é possível graças ao hover).
background-color: #e3eeff;
Define que a cor do objecto 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á solida 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 objecto for selecionado.
Bom pessoal, não posso colocar um exemplo para vocês clicarem porém observerm como ficara o menu.
MENU NÃO SELECIONADO:
MENU SELECIONADO:
Dúvidas?Sugestões?Críticas?
luciano_ip@oficinadanet.com.br
Esse tutorial foi beseado 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 avontade. 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 margen esquerda.
border-left:10px solid #333333;
Tal código cria uma borda do lado esquerdo de um objecto (no caso o menu), define a espesura, 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 objecto, define sua espesura, 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 objecto menu for selecinado tal formatação será ativo (essa opção é possível graças ao hover).
background-color: #e3eeff;
Define que a cor do objecto 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á solida 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 objecto for selecionado.
Bom pessoal, não posso colocar um exemplo para vocês clicarem porém observerm como ficara o menu.
MENU NÃO SELECIONADO:
MENU SELECIONADO:
Dúvidas?Sugestões?Críticas?
luciano_ip@oficinadanet.com.br
Luciano Infanti de Paula
» Site do colunista
Todas as matérias de Luciano Infanti de Paula
- Compartilhando o acesso à internet 3G
A rede 3G de acesso à internet é uma grande realidade hoje, em funcionamento em . - Os 10 piores bugs da história
Os 10 piores bugs da história, acompanhe abaixo esses bugs e caso você conheça u. - Indicadores da Qualidade
Os indicadores da qualidade, são na realidade uma das ferramentas mais utilizada. - Internet, intranet e extranet o que são, e quais as diferenças?
Este artigo demonstra o que é cada um destes acessos. Como funcionam, e para que. - Photoshop - Criando gif animado
Vídeo aula de photoshop, ensina a criar um gif animado com a utilização da guia .
- Rollover de imagem com CSS
Neste tutorial vou mostrar a você como fazer um rollover de imagem usando css. O. - Criando sombra no CSS
Colocando sombra em um texto na página - CSS - HTML Dinâmico
Alguma vez você decidiu alterar as cores dos link de sua home-page? Que tal alt. - Atributos CSS
Alguns atributos de css e o que eles representam: - Pop Up em CSS
Meu diretor pediu para colocar uma popup em um site nosso, mas não queria coloca.
Samuel Alves
Publicado em: 10/08/2007 - 00:14
Ai cara q tal se o Underline aparecer somente no A:HOVER e o PADDING-LEFT ser maior uns 5 ou 10px pra destacar o Link q o mouse esta sobre ele... Abraço.
Billy
Publicado em: 20/05/2008 - 12:46
sentado a direita de deus pai michael jordan todo poderoso chefão que gosta e se alimenta de torta com maçã e moscas como um um sapo entristecido numa sexta feira treze no meio de uma partida com o Zico e seu Creysson no ataque com baguetes para se proteger da banderinha polêmica do Mickey Mouse que contém símbolos nazistas como Lula e seu Creysson que estava jogando futebol com o Zico que atacou o Renato Silva que comeu os pães do seu Creysson que morreu atingido pelo apito da banderinha que havia roubado-o do juiz que expulsou Michael Jordan do campo por discrimiação ja que todos eram nazistas