Menu Vertical
Sexta-feira, 13-01-2006 # 16:04 Css, Tutoriais 265 palavras

Modelo de menu vertical simples. Se você quiser pode variar o estilo mudando os atributos de borda, tamanho, cor, etc. Seu menu vai ficar assim:

01. Adicione ao seu css:

#nav ul {
padding: 0px;
margin: 0px;
width: 100%;
list-style:none;
font-weight: bold;
height: 18px;
line-height: 18px;
vertical-align:middle;
}
#nav ul li {
display: block;
margin: 1px;
border:0px;
}
#nav ul li a {
display: block;
width: 150px;
font-size: 10px;
font-family : Verdana, Arial, sans-serif;
text-decoration: none;
text-transform: uppercase;
text-indent: 5px;
letter-spacing: 2px;
color: #FEC2E1;
background-color: #FFF1F9;
vertical-align:middle;
}
#nav ul li a:hover {
color: #c0c0c0;
background-color: #F8F8F8;
}

02. E no lugar em que você quer que apareça o menu coloque:

<div id="nav">
<ul>
<li><a href="http://www.link1.com">Link 1</a></li>
<li><a href="http://www.link2.com">Link 2</a></li>
<li><a href="http://www.link3.com">Link 3</a></li>
<li><a href="http://www.link4.com">Link 4</a></li>
</ul>
</div>

Ou, caso você esteja usando páginas com i-frame use:

<div id="nav">
<ul>
<li><a href="http://www.link1.com" target="iframe">Link 1</a></li>
<li><a href="http://www.link2.com" target="iframe">Link 2</a></li>
<li><a href="http://www.link3.com" target="iframe">Link 3</a></li>
<li><a href="http://www.link4.com" target="iframe">Link 4</a></li>
</ul>
</div>

Não esqueça de trocar "link" pelo endereço do seu link.



Pixels »

38 37 36 35 34 33 32 31 30 29 28 27 26 25 24 23 22 21 20 19 18 17 16 15 14 13 12 11 10 9 8 7 6 5 4 3 2 1


Nenhum comentário em “Menu Vertical” -