CADASTRE-SE

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 TOPO