Menu com jQuery CSS

[mhqmelo 0]

boa tarde a todos, alguem sabe como eu faco um menu desses? quando ele eh clicado ele fica com tamanho maior (altura) e de cor diferente. eu dei uma olhada pra usar superfish mais nao deu certo. Alguem sabe de algum tutorial? Obrigado!!!

 

Marcelo.

 

abaixo segue a imagem:

 

[William Bruno 1501]

é apenas height, não precisa de javascript nisso.

 

estude css box model.

[mhqmelo 0]

Mais com o CSS eu consigo so fazer o hover mudar.

Quando eu estiver na pagina de contato por exemplo, teria que ficar com o estilo vermelho. A cada pagina o menu fica da cor mostrando qual pagina esta.

[William Bruno 1501]

isso dá para fazer com css tb

 

leia:

http://www.maujor.com/blog/2009/08/12/destacar-link-para-pagina-corrente/

[Fernando Gyn 0]

bom isso pode ser resolvido, com um simples teste do menu e adiciona um classe a ele com o efeito.

 

exemplo

 

.atual{color:#f00}

quando carregar a pagina verifica qual link e aplica a classe ao link.

 

@edit

 

não tinha visto a postagem do William Bruno.

[mhqmelo 0]

Obrigado pelas respostas, Eu nao estou conseguindo nem chegar a esse ponto. Meu menu nao ta ficando legal. Ele tinha q ficar como se fosse "blocos" mais ta uma bosta.

 

Como eu posiciono exatamente igual a foto?

 

Se tiverem como me dar uma luz!!

 

o CSS:

 

#menu ul{
padding-top:30px;
list-style:none;
float:right;
}
#menu ul li{
display:inline;
background:#252424;
color:#7f7f7f;
padding:30px;
font-family:Arial, Helvetica, sans-serif;
text-transform:uppercase;
font-size:12px;
}

 

e o HTML

 

<div id="menu">
   	<ul>
           <li>Home</li>
           <li>About</li>
           <li>Portfolio</li>
           <li>Contact</li>
       </ul>
</div><!-- /menu -->

 

 

Eu queria que todos os quadrados fossem do mesmo tamanho e nao do tamanho do padding (neste caso o quadrado do portfolio fica maior do que o quadrado do home)

[crf_h0m3r 5]

Sim, porque a palavra Portfolio é maior que Home. Veja o tamanho da maior palavra, e se baseie nela para obter um tamanho igual de todos os boxes.

[mhqmelo 0]

Obrigado pelas dicas,

 

O objetivo desse menu eh ficar com os quadrados do mesmo tamanho e quando tiver no hover ou estivar na pagina atual ele fica "ativado" (com altura maior e de outra cor).

 

Sera que eh melhor eu tentar fazer com CSS Sprites?

 

Eu ja pensei em fazer cada 1 em uma div separada, mais acho q vai ficar pior.

 

------------------------------

 

Eu achei esse aqui:

 

Clique aqui

 

Mais nao tenho nem ideia de como fazer..

[William Bruno 1501]

amigo.. são cores sólidas ne?!

 

então faça com background-color.

 

se foque no básico. Esqueça jQuery, esqueça sprite.

você vai ter LI.

 

quer todos da mesma largura ? então defina largura width

quer que eles cresçam ? então no hover, e qndo estiver atual, você vai dar mais height, ou um padding-bottom.

 

 

entendeu ?

[mhqmelo 0]

Entendi, eu estou fazendo o basico do basico, mais nao esta funcionando nada

 

ul#menu{
margin-top:50px;
float:right;
background-color:#FFF;
}
#menu li{
text-decoration:none;
display:inline;
width:120px;
height:120px;
}
#menu li a{

}

Eu coloquei o fundo branco so para facilitar a visualizacao.

 

<ul id="menu">
   	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
   	<li><a href="#">Portfolio</a></li>
   	<li><a href="#">Contact</a></li>
   </ul><!-- /ul -->

 

Tem uma forma mais correta de posicionar a lista?

 

 

Eu consegui posicionar como eu queria, mais eu Copiei o codigo do "Repente CSS" e nao entendi direito

 

/* Menu */
ul#menu{
margin-top:40px;
float:right;
list-style:none;
width:500px;
height:75px;
}
#menu li{
width:120px;
height:75px;
float:left;
display:inline;
text-align:center;
text-transform:uppercase;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
}
#menu li a{
text-decoration:none;
font-weight:bold;
background: #252424;
   color:  #7f7f7f;
   display: block;
   padding: 28px 10px;
   margin: 0 5px;
}
#menu li a:hover{
background-color:#9f1818;
height:40px;
color:#fff;
font-weight:bold;
}

 

<ul id="menu">
   	<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
   	<li><a href="#">Portfolio</a></li>
   	<li><a href="#">Contact</a></li>
   </ul><!-- /ul -->

 

 

 

Eu nao entendi o seguinte:

 

1 - pq eu tenho que colocar o height dentro do #menu li, se ele ja esta dentro do ul#menu ?

2 - dentro do #menu li a, pq eu tenho que coloca o display:block; e pq esse padding de 28px 10px; (eu sei q o primeiro eh de cima e abaixo e o segundo da direita e esquerda) Estou com duvida a respeito dos valores.

3 - #menu li a:hover, o height:40px; na verdade teria que ser de 120px mais ae ele fica gigantesco, esse height do a:hover eh somado ao #menu li height:75px; ?

 

Como eu disse, eu fiz mais nao entendi pq eu ja peguei o codigo praticamente pronto..