15 Jan 2006

Sunday # 16:04 265 palavras Arquivado em: Css, Tutoriais

Por Tamara

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.

« Mapeamento de Imagens

I-Frame »

Os comentários desse blog são MODERADOS, portanto só serão publicados após a minha aprovação. Comentários com propagandas e divulgações não serão aprovados. Obrigada.