8 replies to this topic

[Maykel Esser]

Fala galera!

Estou estudando um pouco de Jquery, adaptando as minhas necessidades.
Tenho um menu drop-down, onde ao passar o mouse em uma categoria, obviamente abre a lista para baixo. Normal.

Porém, ao navegar na lista, ele perde o estilo do :hover da categoria... lógico, pois tirei o mouse da área do hover.

Pensei então em fazer em jquery o seguinte:

Se tiver uma UL depois da LI que estou com o mouse em cima, fixa uma classe (.ativo), para que eu possa navegar nos sub-menus, e manter a classe acionada. Ao sair do submenu, remove a classe.

[codebox]function classeAtiva() {
$("#nav ul li").hover(function() {
$(this).addClass("ativo");
}, function() {

});
}[/codebox]

Porém não funcionou Como posso proceder? Segue o código do menu resumido abaixo...

[codebox]<ul id="nav">
<li><asp:HyperLink ID="hlDefault" runat="server" NavigateUrl="default.aspx" CssClass="ativo">Página inicial</asp:HyperLink></li>
<li id="liPerfil" runat="server" style="display:none;"><a href="#">Perfis</a>
<ul>
<li id="liCadastrarPerfil" runat="server" style="display:none;"><asp:HyperLink ID="hlCadPerfil" runat="server" NavigateUrl="modulos/perfil/formulario.aspx">Cadastrar registro</asp:HyperLink></li>
<li id="liConsultarPerfil" runat="server" style="display:none;"><asp:HyperLink ID="hlConPerfil" runat="server" NavigateUrl="modulos/perfil/listar.aspx">Consultar registros</asp:HyperLink></li>
</ul>
</li>
<li id="liUsuario" runat="server" style="display:none;"><a href="#">Usuários</a>
<ul>
<li id="liCadastrarUsuario" runat="server" style="display:none;"><asp:HyperLink ID="hlCadUsuario" runat="server" NavigateUrl="modulos/usuario/formulario.aspx">Cadastrar registro</asp:HyperLink></li>
<li id="liConsultarUsuario" runat="server" style="display:none;"><asp:HyperLink ID="hlConUsuario" runat="server" NavigateUrl="modulos/usuario/listar.aspx">Consultar registros</asp:HyperLink></li>
</ul>
</li>
</ul>
[/codebox]

[Édipo Costa Rebouças]

maykel, a classe ative tem que ficar no li ou no a, pois se por no li esta certo, você só tem que torar desse classeAtiva e jogar dentro do $(document).ready();

exemplo:

$(document).ready(function(){
	$("#nav ul li").hover(function() {
		$(this).addClass("ativo"); /* caso seja na tag a  e não no li você tem que trocar por $(this).children("a").addClass("ativo"); */
	}, function() {
		
	});

});

Edição feita por: Édipo Costa Rebouças, 18/09/2009, 18:04.

[Maykel Esser]

opa, temos um progresso!

a LI que estava sendo indicada estava errada

[codebox]$(document).ready(function() {
$("#nav li").hover(function() {
$(this).children("a").addClass("ativo");
}, function() {
});[/codebox]

Lendo um pouco sobre os eventos mouseout, tentei o seguinte, porém sem sucesso:

[codebox]$("#nav li.categoria ul").mouseout(function() {
/* se sair do UL depois da categoria, remover a classe "ativo" */
$("li.categoria").removeClass("ativo");
});[/codebox]

tentei usar também o próprio retorno da função, mas não deu certo, pois aí ele indicaria a remoção da classe no lugar errado :S

alguem tem uma luz?

[Édipo Costa Rebouças]

para fazer o efeito de retirada você usa o segundo para do

.hover()

exemplo:

$(document).ready(function() {
	$("#nav li").hover(
		function() {
			alert("estou dentro");
		}, 
			function() {
			alert("já sai? que em graça poxa...");
		}
	);
});

Deixei a tabulação um pouco diferente do normal quando se usa jquery para ficar mais claro.

A primeira function() é executada com o você esta dentro do li, a segunda é executada quando você sai do li, você poderia por exemplo aplicar uma função nessa segunda que tida qualquer classe ativo do que estiver dentro do li.

$(document).ready(function() {
	$("#nav li").hover(
		function() {
			alert("estou dentro");
		}, 
		function() {
			var listElem = $(this); //li referenciado no seletor $(jquery)
			$(listElem).find('*').removeClass('ativo'); //seleciona tudo que esta dentro do listElem e remove a classe ativo.
 		}
	);
});

Edição feita por: Édipo Costa Rebouças, 25/09/2009, 14:00.

[Maykel Esser]

aí que está o problema, Édipo. Eu não posso usar o próprio retorno da função, pois ele está removendo já quando sai da LI... eu quero que remova a classe apenas quando saia da UL filha...

<ul>
<li>Categoria
<ul><li>Subcategoria</li>
</ul>
</li>
</ul>

Ao passar o mouse na CATEGORIA, adiciona a classe... OK, está funcionando... porém quero que só remova a classe quando sair dessa ul subcategoria, pois se fizer do jeito que você está sugerindo, eu desço o mouse na UL que abre, e a classe é removida, e não pode!

[Édipo Costa Rebouças]

Exemplo:

você Tem isso:

UL
LI // hover - addClass(ativo), quando sair do hover removeClass(ativo)
UL //display:none -- display:block(quando mouse o li superior esta no hover )
LI



Diferente do onmouseover o hover vai ficar ativo até o ultimo li, pois o ul li esta dentro dele, você pode navegar por toda a arvore de ul li ul li que não vai sair a class...

Comparando com css, por exemplo, se você tem um link, e nele tem uma tag img, se você atribuir uma cor no hover e o mouse estiver sobre o img, o hover vai continuar, só vai sair do hover quando o mouse não estiver sobre nenhum elemento que estaja dentro do elemento com hover "ativo".

Uma pequena observação: o hover é ativado também por tabulações do teclado, é excelente para fazer menus acessiveis.

o menu superior do http://petmag.com.br/ funciona com hover, só tem umas frescuras a mais por causa que tinha que ter um delay e umas legendas.

Edição feita por: Édipo Costa Rebouças, 25/09/2009, 17:54.

[Maykel Esser]

a duvida é, eu nao estou inserindo a classe ativo no LI, e sim no link "A" dentro desta LI...

$(document).ready(function() {    $("#nav li.categoria").hover(function() {        $(this).children("a").addClass("ativo");    }, function() {    });});

na verdade, eu tenho assim:

UL#nav
LI.categoria
A.ativo
UL


se eu estou navegando na UL que abre da categoria, o ativo tem que se manter!
quando saio da UL de baixo, tem que desaparecer... isso que não estou conseguindo entender... seria como está feito nesse petmag mesmo...

está funcionando, quando passo o mouse na categoria, abre o menu, e eu consigo navegar tranquilamente com o ativo "acionado"...

agora, quando saio do menu, o ativo continua aberto :S

ó!

[Édipo Costa Rebouças]

$(document).ready(function() {

	$("#nav li.categoria").hover(function() {

		$(this).children("a").addClass("ativo");

	}, function() {

		$(this).children("a").removeClass("ativo");

	});

});

Edição feita por: Édipo Costa Rebouças, 25/09/2009, 20:19.

[Maykel Esser]

argh! Tão simples assim e deu certo!

UHahuAHUahuUHAH que droga!

Valeu édipo, quebrou mais um galhão!