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, divulgações, perguntas e de quem não leu o post, não serão aprovados. Dúvidas só serão respondidas na página de perguntas e respostas. Obrigada.