Menu Vertical
Faça um menu vertical totalmente personalizável. Ele ficará assim:
Primeiro, insira no seu código css:
Mostre + ▼
/****MENU VERTICAL****/
/*classe 01*/
a.nav2
{
display : block;
padding-left : 5px;
font-family : verdana;
font-size : 9px;
background-color :
#D3CDBC;
border-top : 1px solid
#ffffff;
color :
#716448;
text-align : justify;
line-height : 15px;
letter-spacing : 1px;
text-transform : lowercase;
font-weight : normal;
}
a.nav2:
link {
display : block;
padding-left : 5px;
font-family : verdana;
font-size : 9px;
background-color :
#D3CDBC;
border-top : 1px solid
#ffffff;
color :
#716448;
text-align : justify;
line-height : 15px;
letter-spacing : 1px;
text-transform : lowercase;
font-weight : normal;
}
a.nav2:active
{
display : block;
padding-left : 5px;
font-family : verdana;
font-size : 9px;
background-color :
#D3CDBC;
border-top : 1px solid
#ffffff;
color :
#716448;
text-align : justify;
line-height : 15px;
letter-spacing : 1px;
text-transform : lowercase;
font-weight : normal;
}
a.nav2:visited
{
display : block;
padding-left : 5px;
font-family : verdana;
font-size : 9px;
background-color :
#D3CDBC;
border-top : 1px solid
#ffffff;
color :
#716448;
text-align : justify;
line-height : 15px;
letter-spacing : 1px;
text-transform : lowercase;
font-weight : normal;
}
a.nav2:hover
{
display : block;
padding-left : 5px;
background-color :
#D9CBA4;
border-top : 1px solid
#ffffff;
border-right :
0 solid
#fee0ed;
font-family : verdana;
font-size : 9px;
color :
#716448;
text-align : justify;
line-height : 15px;
letter-spacing : 1px;
font-weight : normal;
}
/*classe 02*/
a.nav3 {
display : block;
padding-left : 5px;
font-family : verdana;
font-size : 9px;
background-color : #D3CDBC;
border-top : 1px solid #ffffff;
color : #716448;
text-align : justify;
line-height : 15px;
letter-spacing : 1px;
text-transform : lowercase;
font-weight : normal;
}
a.nav3:link {
display : block;
padding-left : 5px;
font-family : verdana;
font-size : 9px;
background-color : #D3CDBC;
border-top : 1px solid #ffffff;
color : #716448;
text-align : justify;
line-height : 15px;
letter-spacing : 1px;
text-transform : lowercase;
font-weight : normal;
}
a.nav3:active {
display : block;
padding-left : 5px;
font-family : verdana;
font-size : 9px;
background-color : #D3CDBC;
border-top : 1px solid #ffffff;
color : #716448;
text-align : justify;
line-height : 15px;
letter-spacing : 1px;
text-transform : lowercase;
font-weight: normal;
}
a.nav3:visited {
display : block;
padding-left : 5px;
font-family : verdana;
font-size : 9px;
background-color : #D3CDBC;
border-top : 1px solid #ffffff;
color : #716448;
text-align : justify;
line-height : 15px;
letter-spacing : 1px;
text-transform : lowercase;
font-weight : normal;
}
a.nav3:hover {
display : block;
padding-left : 5px;
background-color : #D9CBA4;
border-top : 1px solid #ffffff;
border-right : 0 solid #fee0ed;
font-family : verdana;
font-size : 9px;
color : #716448;
text-align : justify;
line-height : 15px;
letter-spacing : 1px;
font-weight : normal;
}
E onde você quer que apareça, coloque (mudando os endereços):
<a href="http://blog.com.br" class="nav2"> home</a>
<a href="http://blog.com.br" class="nav3">perfil</a>
<a href="http://blog.com.br" class="nav2">blog</a>
<a href="http://blog.com.br" class="nav3">links</a>
<a href="http://blog.com.br" class="nav2">perguntas</a>
<a href="http://blog.com.br" class="nav3">extras</a>
Você pode deixá-lo com duas cores diferentes, modificando as partes necessárias em /*classe 01*/ e /*classe 02*/.