Menu Horizontal

quarta-feira, abril 21, 2010

Menu horizontal para colocar no seu blog. Se usar credite.

Coloque o código abaixo no seu CSS, se você usa novo blogger coloque no HTML antes de ]]></b:skin>.

<STYLE type="text/css">

#menuhori {
list-style: none;
float: left; /* NÃO MEXA AQUI */
height: 40px; /* ALTURA DO MENU */
width: 980px; /* LARGURA DO ESPAÇO EM QUE VOCÊ VAI COLOCAR ELE */
padding-left:15px;
margin-top: 22px;
}

#menuhori ul {
padding: 0px;
margin: 0px;
float: left;

width: 100%;
list-style:none;
font-weight: bold;
height: 18px;
line-height: 20px;
vertical-align:middle;
}
#menuhori ul li {

display: block;
float: left;
margin: 1px;
width: auto;
text-align: center;
border:0px;
}
#menuhori ul li a {
display: block;
width: 131px;
text-align: center;
font-size: 10px;
font-family : Verdana, Arial, sans-serif;
text-decoration: none;
color: #D7AAFF; /* COR DA FONTE */
background-color: #F8F0FF; /* COR DO FUNDO */
border:1px solid #D7AAFF; /* COR DA BORDA */
vertical-align:middle;
}
#menuzinhoh ul li a:hover, #menu li.current a {
color: #B664FF; /* COR DA FONTE QUANDO PASSA O MOUSE */
background-color: #EAD2FF; /* COR DO FUNDO QUANDO PASSA O MOUSE */
text-decoration: none;
border:1px solid #B664FF; /* COR DA BORDA QUANDO PASSA O MOUSE */
}

</style>


Para fazer com que seu menu funcione, coloque o seguinte código onde você quer que ele apareça:
<div id"menuzinhoh"><a href="ENDEREÇODOLINK">COLOQUE AQUI O QUE VOCÊ QUER QUE APAREÇA</a></div>

Seu menu ficará assim:



A parte mais clara é ele normal, e a parte mais escura é quando passar o mouse em cima!



You Might Also Like

5 comentários

  1. Oi! tatah! seu novo lay tah mara!
    bjoos, thank for link!

    ResponderExcluir
  2. Oi, não consegui colocar o menu horizontal. Onde colocar as opções que vou querer?

    ResponderExcluir
  3. Olá não consegui colocar o menu como devo fazer?? e aonde colocar as opções que eu vou querer tipo quando eu visualizo diz que deu erro para verificar alguns códigos e tal... por favor me ajude!!! desde ja agradeço beijo's

    ResponderExcluir
  4. Adoro seu blog, sempre me ajuda muito...obrigada!
    bjs
    Márcia

    ResponderExcluir
  5. Não entendi muito bem o que fazer depois de colar o código, pode me ajudar? :]

    ResponderExcluir

Popular Posts

SUBSCRIBE

Like us on Facebook

Flickr Images

Instagram

Subscribe