tutoriais category image
Menu Horizontal
Monday 26/05/2008 às 16:02 | Arquivado em: Css, Tutoriais

Menu horizontal semelhante a esse:

01. Adicione ao seu css o código a seguir:

#menu {
list-style: none;
float: left;
height: 25px;
width: 465px;
padding-left:15px;
margin-top: 150px;
}
#menu ul {
padding: 0px;
margin: 0px;
float: left;
width: 100%;
list-style:none;
font-weight: bold;
height: 18px;
line-height: 18px;
vertical-align:middle;
}
#menu ul li {
display: block;
float: left;
margin: 1px;
width: auto;
text-align: center;
border:0px;
}
#menu ul li a {
display: block;
width: 61px;
text-align: center;
font-size: 10px;
font-family : Verdana, Arial, sans-serif;
text-decoration: none;
color: #FEC2E1;
background-color: #FFF1F9;
border:1px solid #FEC2E1;
vertical-align:middle;
}
#menu ul li a:hover, #menu li.current a {
color: #c0c0c0;
background-color: #f8f8f8 ;
text-decoration: none;
border:1px solid #c0c0c0;
}

O posicionamento do meu é feito em #menu.

2. Onde quer que o menu apareça, use:

<div id="menu">
<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>
</ul>
</div>

Posts Relacionados




9 Comentários em “Menu Horizontal”


Athena 13-12-2008 | 18:49 Responder

Só qeuria dizer que adorei esse tutorial sobre menu, dos vários que tentei esse foi o mais fácil que encontrei para utiçizar no meu blog. O seu site já está na minha seção de créditos!

Ayelen 26-02-2009 | 14:51 Responder

you inspire me 9
Ayelen, from Argentina :)

Mariiana 22-03-2009 | 10:43 Responder

adoreei o tutorial 26

Luanna 12-04-2009 | 10:06 Responder

Adorei aqui ,e simplismente tava presisando de um menu pra organizar meu site^^
beijo boa páscoa! 9

Verônica 24-04-2009 | 19:21 Responder

Eu tô loca pra colocar esse menu no meu site, mas eu não estou conseguindo!
Eu coloquei o primeiro css entre o mas não funcionou, deu erro.
Estou fazendo algo errado?
O que devo fazer?
=]
Obrigada

tamara 25-04-2009 | 08:56 Responder

Com certeza, algo errado você está fazendo, mas não dá para saber exatamente o que é. O menu tem que ser editado, você tem que ajustar as medidas de acordo com seu layout.

angeelica 10-04-2011 | 13:16 Responder

onde eu coloco o segundo codigo? nao entendi 24

Tamara 10-04-2011 | 13:53 Responder

“2. Onde quer que o menu apareça”

Andressa 21-09-2011 | 16:02 Responder

Deu tudo certinho, menos o conteudo do menu ;/
E agora, como faz ? 24


Comentar


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.





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