Assinar Feeds - 281 leitores
26 May 2008
Menu Horizontal
Monday # 16:02 196 palavras Arquivado em: Css, Tutoriais Por tamara

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>


« Dynamic Highlight Menu
Bolo de Caneca »



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.




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


6 Comentários em “Menu Horizontal” -


1
Athena 13-12-2008 - 18:49

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!

. wp_ozh_getCountryName(0,$comment->comment_author_IP) . Responder comentário  

2
Ayelen 26-02-2009 - 14:51

you inspire me 9
Ayelen, from Argentina :)

. wp_ozh_getCountryName(0,$comment->comment_author_IP) . Responder comentário  

3
Mariiana 22-03-2009 - 10:43

adoreei o tutorial 26

. wp_ozh_getCountryName(0,$comment->comment_author_IP) . Responder comentário  

4
Luanna 12-04-2009 - 10:06

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

. wp_ozh_getCountryName(0,$comment->comment_author_IP) . Responder comentário  

5
Verônica 24-04-2009 - 19:21

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

. wp_ozh_getCountryName(0,$comment->comment_author_IP) . Responder comentário  

6
tamara 25-04-2009 - 08:56

Verônica em April 24, 2009 às 7:21 pm disse:

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

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.

. wp_ozh_getCountryName(0,$comment->comment_author_IP) . Responder comentário