[RESOLVIDO] Menu CSS

[luan Fauth 0]

Olá pessoal, desculpe se estiver postando em local errado...

 

Estou desenvolvendo o site da empresa de meu pai, e estou utilizando um pequeno menu com 6 itens que ao passar o mouse sobre o item, ele muda de cor e tal... o detalhe é que estou tentando fazer com que ele abra a página dentro do iFrame e fique "ativo" ou melhor, em realse, mostrando ao usuário que ele clicou e está naquela página.

 

o código do menu é o seguinte:

 

<div id="hmenu"> 
<ul>
    <li style="border:none">
        <a href="container/home.html" target="framerow" shape="rect">Home</a>
    </li>
    <li>
        <a href="container/igai.html" target="framerow" shape="rect">A Empresa</a>
    </li>
    <li>
        <a href="container/estrutura.html" target="framerow" shape="rect">Estrutura</a>
    </li>
    <li>
        <a href="container/galeria.php" shape="rect">Fotos</a>
    </li>
    <li>
        <a href="container/localizacao.html" target="framerow" shape="rect">Localização</a>
    </li>
    <li>
        <a href="container/contato.html" target="framerow" shape="rect">Contato</a>
    </li>
</ul> 
</div>

o CSS está da seguinte forma:

 

#hmenuWrapper {
	width:100%;
	margin:0 auto ;
}
#hmenu {
	position:relative;
	float:right;
	top: 60px;
}
#hmenu ul {
	list-style:none inside none;
	margin:0;
	padding:0;
	text-transform:uppercase;
	font-size:14px;
	font-family:Arial,sans-serif;
}
#hmenu ul li {
	float:left;
}
#hmenu ul li a {
	border:0 none;
	color:#666666;
	display:block;
	float:left;
	font-size:14px;
	font-weight:bold;
	height:2em;
	line-height:2em;
	text-align:center;
	padding:0 20px;
}
#hmenu ul li a:hover {
	background-color:#b7090c;
	color:#e0e0e0; 
}
#hmenu ul li a:link {
	text-decoration:none;
}
#hmenu ul li a:visited {
	text-decoration:none;
}
#hmenu ul li a:active {
	text-decoration:none;
}
#hmenu li#current {
	background-color:#b7090c;
	color:#e0e0e0; 
}

como vou fazer pro item clicado ficar com uma coloração diferenciada, e quando clicar em outro ele voltar ao normal e o outro ficar colorido???

ajuda plx!!

[Eliseu M. 2]

JavaScript, ou com o meu favorito framework jQuery :]

 

Adicione uma nova classe para estilizar o item ativo:

 

#hmenu ul li a.active {
        border:0 none;
        color:#00F;
        display:block;
        float:left;
        font-size:14px;
        font-weight:bold;
        height:2em;
        line-height:2em;
        text-align:center;
        padding:0 20px;
}

Depois insira o código em jQuery:

 

$(document).ready(function() {
 $("#hmenu ul li a").click(function() {
  $("#hmenu ul li a").removeClass('active');
  $(this).addClass('active');
 });
});

*Não se esqueça de linkar a biblioteca:

 

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

Pronto! Quando clicar num link, ele recebe a classe .active e todos os outros perdem. Isso evite que dois ou mais itens pareçam ativos.

 

Falou!

[luan Fauth 0]

JavaScript, ou com o meu favorito framework jQuery :]

 

Adicione uma nova classe para estilizar o item ativo:

 

#hmenu ul li a.active {
        border:0 none;
        color:#00F;
        display:block;
        float:left;
        font-size:14px;
        font-weight:bold;
        height:2em;
        line-height:2em;
        text-align:center;
        padding:0 20px;
}

Depois insira o código em jQuery:

 

$(document).ready(function() {
 $("#hmenu ul li a").click(function() {
  $("#hmenu ul li a").removeClass('active');
  $(this).addClass('active');
 });
});

*Não se esqueça de linkar a biblioteca:

 

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>

Pronto! Quando clicar num link, ele recebe a classe .active e todos os outros perdem. Isso evite que dois ou mais itens pareçam ativos.

 

Falou!

 

 

 

Eliseu, Muito obrigado! resolveu meu problema direitinho!!

E pode ter certeza, seus creditos estão lá!

 

=D

 

Abraço.