CSS›  

Criando menus verticais

Aprenda a criar simples porém bonitos menus verticais utilizando html e principalmente css.

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:



<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
Mais de CSS
  • CSS: Design responsivo para menu, imagem e publicidade
    CSS: Design responsivo para menu, imagem e publicidade
  • Design responsivo com CSS3
    Design responsivo com CSS3
  • O que é tableless e como funciona essa metodologia?
    O que é tableless e como funciona essa metodologia?
  • Regras para como separar o HTML do CSS
    Regras para como separar o HTML do CSS
  • CSS Font-size: px, em, %, pt ou keyword?
    CSS Font-size: px, em, %, pt ou keyword?
Compartilhe com seus amigos:
últimos reviews
  • 8,4
    Review Samsung Galaxy K Zoom
    Nessas 2 últimas semanas passou por nossas mãos o potente Galaxy K Zoom, veja o que achamos dele.
  • 8,6
    Review Moto X - Segunda geração
    O aparelho da Motorola é a prova “viva” que o que está ótimo pode melhorar ainda mais.
  • 8,1
    Review Zenfone 5
    Tela de 5 polegadas, câmera de foto e vídeo superiores aos concorrentes, boa usabilidade e preço baixo. A Asus acertou n...

TOPO