Publicado em 15 de ago.

menu accordion

pessoal eu estou criando um menu accordion só que estou precisando de uma ajudinha.

Ao clicar no MENU_1 eu faço ele abrir seu submenus, só que eu estou precisando saber qual o comando que uso para saber se o usuario está clicando novamente no MENU_1 para que eu possa fechar seus submenus

jQuery

$(document).ready(function(){
	$("p").click(function(){
 $("ul").slideUp("slow")
 $(this).next("ul").slideDown("fast")
	})
})

HTML

<p>MENU_1</p>
<ul>
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3</a></li>
</u>

Discussão (21)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

mauelement· 15 de ago.

Troca o slideUP por toogle.

o toggle é uma alternação dos cliques

Wellington09· 15 de ago.

então cara troquei por

$(document).ready(function(){
 $("p").click(function(){
 $(this).next(ul).toggle("slow")
 })
})
 e funcionou perfeitamente.

Só que estou com outro problema pois estou usando varios MENUS_

EX:

<p>MENU_1</p>
<ul>
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3</a></li>
</u>
<p>MENU_2</p>
<ul>
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3</a></li>
</u>
<p>MENU_3</p>
<ul>
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3</a></li>
</u>se eu clicar no MENU_1 ele abre e se eu clicar novamente ele fecha beleza certinho.

Mas se o usuario clicar no MENU_4 e depois não clicar novamente no MENU_4 para fechar e já pular para o MENU_9.

Como eu faço para fechar automaticamente o ultimo MENU_ que ele abriu e não fechou e já pulou para outro ?

tentei usando o prev mas não consegui

William Bruno· 16 de ago.

faz uma logica mais simples..

simplesmente fecha todos antes de abrir, oque ele clicar.

entenda por esse 'todos', os outros, menos oq ele clicar.

.hide(), sendo que o seletor deve ser filtrado por um .not(), excluindo oq ele clicou.

Wellington09· 16 de ago.

William eu já estou usando o .hide() eu só não estou colocando todo o codigo meu aqui pois para a duvida que eu tive eu não precisava por, mas eu vou colocar meu codigo completo desta vez.

Eu não entendi o que você quiz dizer com o .not() por isso pesquisei no google e achei este comando .siblings()

Como eu tenho submenus em meus menus eu estou tendo um problema na hora que o usuario clica em um submenu e já vai para outro menu deixando os submenus abertos.

copia e cola o meu exemplo para você entender.

Se você puder me explicar oque você quis dizer com o .not()

$(document).ready(function(){
	$(".submenu").hide()
	$(".menu2").hide()

	$("p#menu").click(function(){
 $(this).next(".submenu").toggle("slow")
 .siblings(".submenu").slideUp("slow")
	})

	$("p#menu2").click(function(){
 $(this).next(".submenu").toggle("fast")
 .siblings(".submenu").slideUp("slow")
	})

})

 <p id="menu">Menu 1</p>
 <ul class="submenu">
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3</a></li>
 <p id="menu2">SubMenu 1</p>
 <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>
 </ul>
 <p id="menu">Menu 2</p>
 <ul class="submenu">
 <li><a href="#">item 4</a></li>
 <li><a href="#">item 5</a></li>
 <li><a href="#">item 6</a></li>
 </ul>

Faça o teste ai e veja, se eu clicar no MENU 1 e depois clicar em Submenu 1 e depois clicar em MENU 2 e voltar para o MENU 1 o Submenu 1 estara aberto e eu não quero que ele fique aberto.

William Bruno· 16 de ago.

hum.. o teu html está meio incorreto...

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".menu ul").hide();//começando com os submenus escondidos
	$(".menu a").click(function( e ){
 //e.preventDefault();
 var ul = $( this ).next('ul');
 $(".menu ul").not( $( ul ) ).slideUp();
 $( ul ).toggle('slow');
	});
});
</script>
</head>
<body>

	<ul class="menu">
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3 com submenu</a>
 <ul>
 <li><a href="#">subitem 1</a></li>
 <li><a href="#">subitem 2</a></li>
 </ul>
 </li>
 <li><a href="#">item 4 com submenu</a>
 <ul>
 <li><a href="#">subitem 1</a></li>
 <li><a href="#">subitem 2</a></li>
 <li><a href="#">subitem 3</a></li>
 <li><a href="#">subitem 4</a></li>
 </ul>
 </li>
 <li><a href="#">item 5 com submenu</a>
 <ul>
 <li><a href="#">subitem 1</a></li>
 <li><a href="#">subitem 2</a></li>
 <li><a href="#">subitem 3</a></li>
 </ul>
 </li>
	</ul><!-- /menu -->

</body>
</html>

Wellington09· 16 de ago.

pq meu html está errado ?

não posso usar a tag <p> dentro da tag <ul>

o exemplo que você fez está com um problema tb , eu vou bater a cabeça mais um pouco aqui e ver oque consigo fazer.

O meu problema era que ao clicar no meu submenu e abrir um outro menu dentro dele , ele ficava aberto após eu navegar para qualquer outro menu o seu exemplo ele nem abre ao clicar ele já fecha , eu vou dar uma olhada no seu exemplo e ver se consigo fazer implementar no meu.

William Bruno· 16 de ago.

>
pq meu html está errado ?

não posso usar a tag **<p>** dentro da tag **<ul>**

sem envolver com um LI, não, ou seja, o <p> não pode ser filho direto do <ul> como você fez.

>
o seu exemplo ele nem abre ao clicar ele já fecha , eu vou dar uma olhada no seu exemplo e ver se consigo fazer implementar no meu.

não entendi.você precisa que ao navegar por um item do submenu, o menu continue aberto?

se for isso, então o problema é outro, e você precisa LER A URL, ver oque tá lá, e ai sim deixar o menu aberto.

Com javascript não é muito simples fazer isso.. mas é o mesmo efeito de deixar 'menu atual', em css, ou com php.

Poste como você tentou fazer a adaptação.

Wellington09· 25 de ago.

William eu consegui resolver aqui o meu problema vou postar todo o codigo e ai você pode ver oque eu queria fazer.

Só que eu só consegui fazer funcionar usando a tag <p> dentro da <ul>, mas eu vou tentar fazer do jeito que você falo.

Clique no MENU 1 e depois em nivel 2 e depois em MENU 3 e veja que o nivel 2 do MENU 1 agora está fechado era isso que eu queria fazer , pois ele ficava aberto.

<!DOCTYPE HTML>

<html lang="pt-br">
 <head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".submenu").hide()
	$(".submenu2").hide()

	$("p#menu").click(function(){
 $(this).next(".submenu").toggle("slow")
 .siblings(".submenu").slideUp("slow")
 $(".submenu2").hide()
	})

	$("p#menu2").click(function(){
 $(this).next(".submenu2").toggle("fast")
 .siblings(".submenu2").slideUp("slow")
	})

})</script>

<style type="text/css">
.nav

{

	background:#FFF;
	border:1px #000 solid;
	float:left;
	font-size:16px;
	margin:5px;
	width:200px;
}

p#menu
{

	cursor:pointer;
	height:30px;
	line-height:30px;
	text-indent:5px;
}

.vermelho

{

	background:#c91f00;
}

.amarelo

{

	background:#fbc701;
}

.verde

{

	background:#639c35;
}

.azul

{

	background:#028bb7;
}

.roxo

{

	background:#5222b4;
}

ul.submenu li
{

	line-height:25px;
	text-indent:10px;
}

ul.submenu li a
{

	display:block;
	text-decoration:none;
}

ul.submenu li a:hover
{

	background:#CCC;
}

</style>
 <head>

 <body>
 <div class="header">
 sindiçu
 </div>
 <div class="nav">
 <p id="menu" class="vermelho">Menu 1</p>
 <ul class="submenu">
 <li><a href="#">nivel 1</a></li>
 <li><a href="#">nivel 1</a></li>
 <li><a href="#">nivel 1</a></li>
 <p id="menu2">nivel 2</p>
 <ul class="submenu2">
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3</a></li>
 </ul>
 <p id="menu2">nivel 2</p>
 <ul class="submenu2">
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3</a></li>
 </ul>
 </ul>
 <p id="menu" class="amarelo">Menu 2</p>
 <ul class="submenu">
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3</a></li>
 </ul>
 <p id="menu" class="verde">Menu 3</p>
 <ul class="submenu">
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3</a></li>
 </ul>
 <p id="menu" class="azul">Menu 4</p>
 <ul class="submenu">
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3</a></li>
 </ul>
 <p id="menu" class="roxo">Menu 5</p>
 <ul class="submenu">
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3</a></li>
 </ul>
</div>
 </body>
</html>

Seguindo o mesmo exemplo acima, quando eu acesso um link dentro de meu menu accordion ele redireciona para outra pagina certo.

Como eu faço para deixar este menu accordion aberto ? pois ao clicar no link ele redireciona para outra pagina e tras o accordion referente ao clique fechado.

Oque estou tentando fazer é a mesma coisa com um menu ativo , onde ele muda de cor ao ser clicado , porem não consigo fazer o accordion ficar aberto, algum pode me ajudar ?

Wellington09· 25 de ago.

Seguindo o mesmo exemplo acima, quando eu acesso um link dentro de meu menu accordion ele redireciona para outra pagina certo.

Como eu faço para deixar este menu accordion aberto ? pois ao clicar no link ele redireciona para outra pagina e tras o accordion referente ao clique fechado.

Oque estou tentando fazer é a mesma coisa com um menu ativo , onde ele muda de cor ao ser clicado , porem não consigo fazer o accordion ficar aberto, algum pode me ajudar ?

William Bruno· 25 de ago.

exemplo:

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("a[href='"+get_page()+"']").parent('li').parent('ul').addClass('atual');

	$(".menu ul").not('.atual').hide();
	$(".menu a").click(function( e ){
 //e.preventDefault();
 var ul = $( this ).next('ul');
 $(".menu ul").not( $( ul ) ).slideUp();
 $( ul ).toggle('slow');
	});
});
function get_page()

{

	var url = window.location.href;
	var qnts = url.split('/').length;
	var pices = url.split('/');
	return pices[qnts-1];
}
</script>
</head>
<body>
	<ul class="menu">
 <li><a href="#">item 1</a></li>
 <li><a href="#">item 2</a></li>
 <li><a href="#">item 3 com submenu</a>
 <ul>
 <li><a href="item3-subitem1.html">subitem 1</a></li>
 <li><a href="item3-subitem2.html">subitem 2</a></li>
 </ul>
 </li>
 <li><a href="#">item 4 com submenu</a>
 <ul>
 <li><a href="item4-subitem1.html">subitem 1</a></li>
 <li><a href="item4-subitem2.html">subitem 2</a></li>
 <li><a href="item4-subitem3.html">subitem 3</a></li>
 <li><a href="item4-subitem4.html">subitem 4</a></li>
 </ul>
 </li>
 <li><a href="#">item 5 com submenu</a>
 <ul>
 <li><a href="#">subitem 1</a></li>
 <li><a href="#">subitem 2</a></li>
 <li><a href="#">subitem 3</a></li>
 </ul>
 </li>
	</ul><!-- /menu -->
</body>
</html>

você precisa ler a url, ver qual arquivo tá aberto, e então adicionar uma classe nele, para que na hora que você fechar os submenus, você não feche também o 'atual'.

Wellington09· 25 de ago.

William quando eu chegar em casa vou dar uma olhada no seu exemplo acima , mas só quero adiantar uma coisa, caso não entenda mais tarde eu post novamente.

No meu exemplo acima eu fiz um menu accordion com 3 niveis de acesso, sendo que ele não fecha o nivel 2 caso eu abra o nivel 3 que se encontra dentro do nivel 2 que o mesmo se encontra no nivel 1 dããã.

E se eu tiver varios niveis 3 dentro de um nivel 2 ele vai fechar o ultimo nivel 3 que eu deixei aberto e abrir o outro nivel 3 que eu acessar

Neste seu exemplo se eu colocar uma tag ul dentro do subitem 1 ele vai funcionar igual ao exemplo meu acima ?

obs: ainda não testei o seu exemplo de clicar no menu e deixar ele aberto , to um pouco corrido hj 'escola'

flw William obrigado pela ajuda

William Bruno· 25 de ago.

>
Neste seu exemplo se eu colocar uma tag ul dentro do subitem 1 ele vai funcionar igual ao exemplo meu acima ?

tá... então a tua intenção, era criar um menu de 3 níveiscara.. o teu html continua errado... mas vamos lá, seguindo a idéia:

alteração para ter 3 níveis, e continuar aberto após clicar, é usar o método .parents()

e tem mais um script que adicionei, para abertura do 3° nivel.

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("a[href='"+get_page()+"']").parent('li').parents('ul').addClass('atual');

	$(".menu ul").not('.atual').hide();
	$(".menu > li > a").click(function( e ){
 if( $( this ).attr('href')=='#' )
 {
 e.preventDefault();
 var ul = $( this ).next('ul');
 $(".menu ul").not( $( ul ) ).slideUp();
 $( ul ).toggle('slow');
 }
	});
	$(".menu ul a").click(function( e ){
 var ul = $( this ).next('ul');
 $(".menu ul li ul").not( $( ul ) ).slideUp();//se não quiser que feche o terceiro nivel, comente essa linha
 $( ul ).toggle('slow');
	});
});
function get_page()

{

	var url = window.location.href;
	var qnts = url.split('/').length;
	var pices = url.split('/');
	return pices[qnts-1]!='#' ? pices[qnts-1] : '';
}
</script>
</head>
<body>
 <ul class="menu">
 <li><a href="item1.html">item 1</a></li>
 <li><a href="#">1° nivel</a>
 <ul>
 <li><a href="#">2° nivel</a>
 <ul>
 <li><a href="nivel3.html">3° nivel</a></li>
 <li><a href="nivel3-2.html">3° nivel</a></li>
 </ul>
 </li>
 <li><a href="#">subitem 2</a>
 <ul>
 <li><a href="sub2-nivel3.html">3° nivel</a></li>
 <li><a href="sub2-nivel3-2.html">3° nivel</a></li>
 </ul>
 </li>
 </ul>
 </li>
 <li><a href="#">item 4 com submenu</a>
 <ul>
 <li><a href="item4-subitem1.html">subitem 1</a></li>
 <li><a href="item4-subitem2.html">subitem 2</a></li>
 <li><a href="item4-subitem3.html">subitem 3</a></li>
 <li><a href="item4-subitem4.html">subitem 4</a></li>
 </ul>
 </li>
 <li><a href="#">item 5 com submenu</a>
 <ul>
 <li><a href="item5-subitem1.html">subitem 1</a></li>
 <li><a href="item5-subitem2.html">subitem 2</a></li>
 <li><a href="item5-subitem3.html">subitem 3</a></li>
 </ul>
 </li>
 </ul><!-- /menu -->
</body>

Wellington09· 26 de ago.

Bom dia William fiz o teste aqui e funcionou perfeitamente só não entendi oque este comando faz

 var qnts = url.split('/').length;
 var pices = url.split('/');
 return pices[qnts-1];

você poderia dar uma ajuda , para que eu entenda melhor oque esta sendo feito ?

William Bruno· 26 de ago.

o metodo .split() divide uma string em arrays, apartir do caracter que você informar..

então, estou dividindo a string da URL do site, pelas / (barras)

o metodo .length retorna a quantidade de posições que tem

pices é o array

a posicao

total - 1, é a ultima posição do array

Wellington09· 28 de ago.

cara valeu pela atenção e pela ajuda, desculpa a demora para responder no forum é que essa semana foi corrido pra mim, fiz o teste de seu menu e ta perfeito , funcionando os 3 nivel que nem no meu porém como você disse com o HTML "errado" o unico problema que estou tendo é que eu fiz um menu separado de uma pagina que eu estou criando e ele funcionou beleza , na hora que eu clico em um menu e sou redirecionado para uma pagina ele deixa o menu a berto.

ex;

minhas paginas

D:/site/teste1.html
D:/site/teste2.html
D:/site/teste3.html
agora quando eu coloco o mesmo menu em meu projeto que está com a url mais amigavel ele não funciona

localhost:/projeto/cadastro
não sei o motivo dele funcionar com o teste1.html, teste2.html, teste3.htmle não funcionar com o localhost:/projeto/produto/1, localhost:/projeto/produto/2 ou localhost:/projeto/cadastro

sera que tenho que mostrar a extensão do arquivo NA URL para que ele funcione ? ou será que ele não funciona só pq estou colocando ele localhost apache ?

William Bruno· 28 de ago.

debugue a variavel:

function get_page()
{

 var url = window.location.href;
 alert( url );
 veja se bate com os href dos <a>

Wellington09· 30 de ago.

ta pegando a URL certinho , oque será que pode ser hein ?

William Bruno· 30 de ago.

como está o html dos links ?

Wellington09· 30 de ago.

<ul>

 <li><a href="<c:url value="/cadastro"/>">Cadastro</a></li>

</ul>

William Bruno· 30 de ago.

qndo você aperta:

Ctrl + U ( Exibir > Código Fonte ), é isso ai que aparece ?

veja que oque você ver no alert(), precisa 'combinar' com oque tiver no href dos links.

Wellington09· 30 de ago.

não não esta tag <a>é a que eu estou montando... já no codigo fonte ele me mostra a mesma url que aparece na barra de endereço , bom eu tou continuar fazendo os teste aqui e ver oque esta ocorrendo