Jump to content


Photo

Menu Dropdown - Jquery


  • Faça o login para participar
12 replies to this topic

#1 VaNdo.WcG

VaNdo.WcG

    12 Horas

  • Usuários
  • 146 posts
  • Sexo:Não informado

Posted 19/02/2009, 15:40

Ola pessoal,

Seguinte, estou tentando criar um menu apoiando-me em JQuery, está funcionando, porém gostaria de que quando um dos menus fosse aberto, caso haja outro já aberto, este se feche.

Como fazer? Todos os menus ficam sempre abertos, a não ser que o usuário o feche.

Abaixo o codigo do meu menu atual, não sei se é a melhor opção, mas...

JS:
$(document).ready(function(){
	$("#roll ul.menu").addClass(" invisivel");

	$("#roll h2").click(function(){
		$(this).next("ul.menu").slideToggle("slow")
		.siblings("ul.menu:visible").slideUp("slow");
	});
});

$(document).ready(function(){
	$("#roll2 ul.menu").addClass(" invisivel");

	$("#roll2 h2").click(function(){
		$(this).next("ul.menu").slideToggle("slow")
		.siblings("ul.menu:visible").slideUp("slow");
	});
});

Html:
<div id="roll">
	<h2>Exemplos - 01 a 10</h2>
	<ul class="menu">
		<li><a href="#">- Exemplo 1</a></li>
		<li><a href="#">- Exemplo 2</a></li>
	  <li><a href="#">- Exemplo 3</a></li>
	</ul>
	</div>
	<div id="roll2">
	<h2>Exemplos - 11 a 20</h2>
	<ul class="menu">
		<li><a href="#">- Exemplo 1</a></li>
		<li><a href="#">- Exemplo 2</a></li>
		  <li><a href="#">- Exemplo 3</a></li>
	</ul>
	</div>

Sendo dois ou mais menus eu preciso mesmo estar utilizando um mesmo codigo duas ou mais vezes mudando só o valor?

Grato.

#2 fiote

fiote

    12 Horas

  • Usuários
  • 191 posts
  • Sexo:Masculino
  • Localidade:Vila Velha - ES
  • Interesses:PHP

Posted 19/02/2009, 16:22

Vamos lá, como eu acabei de postar no outro tópico, vamos melhorar isso aqui. Não faz sentido vc ter que aplicar o javascript em cada div separadamente. Sete uma classe nelas (como eu fiz abaixo), e vamos aplicar o js em todas ao mesmo tempo.

HTML
<div id="roll" class="meuRoll">	
	<h2>Exemplos - 01 a 10</h2>	
	<ul class="menu">		
		<li><a href="#">- Exemplo 1</a></li>
		<li><a href="#">- Exemplo 2</a></li>	  
		<li><a href="#">- Exemplo 3</a></li>	
	</ul>	
</div>	
<div id="roll2" class="meuRoll">	
	<h2>Exemplos - 11 a 20</h2>	
	<ul class="menu">		
		<li><a href="#">- Exemplo 1</a></li>		
		<li><a href="#">- Exemplo 2</a></li>		  
		<li><a href="#">- Exemplo 3</a></li>	
	</ul>	
</div>

JS
$(document).ready(function(){	
	$$(".meuRoll ul.menu").addClass(" invisivel");	
	$$(".meuRoll h2").click(function() {   
		$$(".meuRoll h2").next("ul.menu").FUNCOES_PRA_ESCONDER_O_MENU();	 
		$(this).next("ul.menu").slideToggle("slow").siblings("ul.menu:visible").slideUp("slow");   
	});
});

Substitui o FUNCOES_PRA_ESCONDER_O_MENU ae =P
[ FFTOnline.Net ]
Developed by Fiote, Powered by Mootools.

#3 VaNdo.WcG

VaNdo.WcG

    12 Horas

  • Usuários
  • 146 posts
  • Sexo:Não informado

Posted 19/02/2009, 16:29

Realmente, muito mais eficiente dessa maneira...

Pelo que por exemplo posso substituir essa marcação?

#4 fiote

fiote

    12 Horas

  • Usuários
  • 191 posts
  • Sexo:Masculino
  • Localidade:Vila Velha - ES
  • Interesses:PHP

Posted 19/02/2009, 16:35

Para exibir os menus, vc está usando
.slideToggle("slow").siblings("ul.menu:visible").slideUp("slow");
correto?

Eu não sei que biblioteca/framework usa essas funções para exibir um objeto, mas você precisa achar as funções pra esconder o mesmo. Provavelmente você já sabe, só não entendeu o que eu falei xD
[ FFTOnline.Net ]
Developed by Fiote, Powered by Mootools.

#5 VaNdo.WcG

VaNdo.WcG

    12 Horas

  • Usuários
  • 146 posts
  • Sexo:Não informado

Posted 19/02/2009, 16:41

Ah sim, entendi...

Estou usando JQuery, e ao olha pelo meu codigo, para esconder seria:

.siblings("ul.menu:visible").slideUp("slow");

Porém não está funcionando.

#6 fiote

fiote

    12 Horas

  • Usuários
  • 191 posts
  • Sexo:Masculino
  • Localidade:Vila Velha - ES
  • Interesses:PHP

Posted 19/02/2009, 16:51

É, complicado... não saber jQuery atrapalha um pouco a ajudar lol. Eu dei uma fuçada na documentação jQuery do slide e parece tudo certo.

Só pra fazer um teste, tira o .slideToggle("slow") da linha que exibe o menu pra ver se faz alguma diferença.

Edição feita por: fiote, 19/02/2009, 16:52.

[ FFTOnline.Net ]
Developed by Fiote, Powered by Mootools.

#7 VaNdo.WcG

VaNdo.WcG

    12 Horas

  • Usuários
  • 146 posts
  • Sexo:Não informado

Posted 19/02/2009, 17:04

Consegui o que queria amigo, agradeço a ajuda.

O codigo final ficou da seguinte maneira:

$(document).ready(function(){	
	$(".meuRoll ul.menu").addClass(" invisivel");	
	$(".meuRoll h2").click(function() {   
		$(".meuRoll h2").next("ul.menu").slideUp("slow");
		$(this).next("ul.menu").slideToggle("slow").siblings("ul.menu:visible").slideUp("slow");   
	});
});

A partir do codigo que me indicou, apenas retirei alguns $ que estavam duplicados e no local de onde indicou para que eu preenchesse, inseri slideUp("slow");.

Grato.


Um pequeno problema que encontrei, quando tento fechar o menu que esta aberto, ele se fecha e abre logo após sozinho.

Att.

Edição feita por: VaNdo.WcG, 19/02/2009, 17:05.


#8 fiote

fiote

    12 Horas

  • Usuários
  • 191 posts
  • Sexo:Masculino
  • Localidade:Vila Velha - ES
  • Interesses:PHP

Posted 19/02/2009, 17:21

Malz, percebi que fiz besteira. Além disso, eu não sabia como o jQuery implementava o each lol (agora sei).

$(document).ready(function(){	
	$$(".meuRoll ul.menu").addClass(" invisivel");	
	$$(".meuRoll h2").click(function() {   
		var original = $(this);
		$(".meuRoll h2").each( function(i) {
			if (original != $(this)) $(this).next("ul.menu").siblings("ul.menu:visible").slideDown("slow");	 
		}
		$(this).next("ul.menu").siblings("ul.menu:visible").slideUp("slow");   
	});
});

Acho que isso resolve o problema.

Edição feita por: fiote, 19/02/2009, 17:22.

[ FFTOnline.Net ]
Developed by Fiote, Powered by Mootools.

#9 VaNdo.WcG

VaNdo.WcG

    12 Horas

  • Usuários
  • 146 posts
  • Sexo:Não informado

Posted 19/02/2009, 19:23

Não entendi o que foi mudado, e tentando adaptar como antes, não consegui fazer funcionar agora.

#10 fiote

fiote

    12 Horas

  • Usuários
  • 191 posts
  • Sexo:Masculino
  • Localidade:Vila Velha - ES
  • Interesses:PHP

Posted 20/02/2009, 00:23

O codigo final ficou da seguinte maneira:

$(document).ready(function(){	
	$(".meuRoll ul.menu").addClass(" invisivel");	
	$(".meuRoll h2").click(function() {   
		$(".meuRoll h2").next("ul.menu").slideUp("slow");
		$(this).next("ul.menu").slideToggle("slow").siblings("ul.menu:visible").slideUp("slow");   
	});
});

A partir do codigo que me indicou, apenas retirei alguns $ que estavam duplicados e no local de onde indicou para que eu preenchesse, inseri slideUp("slow");.


Que estranho você usar slideUp pra esconder os menus.. pelo que eu li, slideUp é pra exibir, e slideDown é pra esconder, mas ok que bom que funcionou lol.

Você não entendeu a mudança que eu fiz? Ok, vou explicar ^^

Como você queria que os outros se escondessem ao clicar, eu adicionei (e vc completou) a linha $("meuRoll h2").next("ul.menu").slideUp("slow");

Isto é, vai aplicar .next("ul.menu").slideUp("slow"); para todos os $(".meuRoll h2").

Você então comentou que se vc clicasse no que já estava aberto, ele se fechava e abria logo em seguida, eu postei uma solução (sem explicar) e vc falou que deu erro. Sim, o código tá errado por dois motivos. Faltaram algumas letras (código errado) e a idéia estava errada também. Sobre a duplicidade dos $$, tem algo no mootools sobre usar duplo cifrão e me confundi xD

Agora vai a solução correta, com explicação:

$(document).ready(function(){	
	$(".meuRoll ul.menu").addClass(" invisivel");	
	$(".meuRoll h2").click(function() {   
		var estaOculto = $(this).next("ul.menu").is(":hidden");
		$(".meuRoll h2").next("ul.menu").slideUp("slow");
		if (estaOculto) $(this).next("ul.menu").slideToggle("slow").siblings("ul.menu:visible").slideUp("slow");   
	});
});

Ok, quando clicamos no objeto temos 3 comandos agora:

var estaOculto = $(this).next("ul.menu").is(":hidden");
A variável estaOculto recebe true caso o menu esteja fechado, ou false se ele estiver aberto.

$(".meuRoll h2").next("ul.menu").slideUp("slow");
Aqui nós fechamos todos os menus.

if (estaOculto) $(this).next("ul.menu").slideToggle("slow").siblings("ul.menu:visible").slideUp("slow");
Essa era a linha que exibia o menu clicado na hora. Porém, o problema antes era que, se ele clicasse num que já estava aberto, o código iria fechar todos (inclusive ele), e então o abriria denovo (afinal, vc clicou nele). Com essa mudança, o clicado só vai abrir se ele estiver fechado no momento do clique.

Acho que agora vai ;)

Edição feita por: fiote, 20/02/2009, 00:24.

[ FFTOnline.Net ]
Developed by Fiote, Powered by Mootools.

#11 VaNdo.WcG

VaNdo.WcG

    12 Horas

  • Usuários
  • 146 posts
  • Sexo:Não informado

Posted 20/02/2009, 16:19

Perfeito amigo,

Funcionou corretamente, grato pela ajuda, muito mais pela explicação que por sinal é de muito mais valor, uma vez que entendi e todos os que precisarem poderão entender também.

Estou montando um pequeno site com pequenos tutos sobre javascript para rodar na máquina mesmo para um trabalho, logo que estiver pronto terei o prazer em disponibilizar ao pessoal que sempre ajuda quando preciso.

Att.
Evandro.

#12 allcacrap

allcacrap

    Novato no fórum

  • Usuários
  • 1 posts
  • Sexo:Não informado

Posted 02/09/2009, 18:41

Ola

estou com uma duvida no menu que to fazendo
ele abre o submenu mais fecha quando clico nos demais link´s do menu

ta ai o xhtml

<ul class="menu">
<a href='#'><div id="logolink"></div></a>

<i><a href='#'><div id="link"><li>INICIO</li></div></a>

<div id="link">

<li class="itemPai">TRABALHOS
<ul class="subMenu">
<li><a href='#'>SubItem 1</a></li>
<li><a href='#'>SubItem 2</a></li>
<li><a href='#'>SubItem 3</a></li>
</ul>
</li>
</div>

<a href='#'><div id="link"><li>LOJA</li></div></a>

<a href='#'><div id="link"><li>GALERIA</li></div></a>

<a href='#'><div id="link"><li>ESCRITÓRIO</li></div></a>

<a href='#'><div id="link"><li>NOTÍCIAS</li></div></a>

<a href='#'><div id="link"><li>TEXTO</li></div></a></i>

</ul>

e o js

$(function(){
$('.menu .subMenu').show()

$('ul.menu li.itemPai').click(function(){
$('.menu .subMenu').slideToggle()
return false
})
})


o que devo fazer?

Obrigado

#13 fhantasma

fhantasma

    Novato no fórum

  • Usuários
  • 14 posts
  • Sexo:Não informado

Posted 24/03/2010, 17:17

Galera alguem sabe como faz pros menus iniciarem escondidos?




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq