menu accordion

Wellington09 · Agosto 15, 2010

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>

mauelement · Agosto 15, 2010

Troca o slideUP por toogle.

o toggle é uma alternação dos cliques

Wellington09 · Agosto 15, 2010

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 · Agosto 16, 2010

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 · Agosto 16, 2010

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 · Agosto 16, 2010

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 · Agosto 16, 2010

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 · Agosto 16, 2010

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 · Agosto 25, 2010

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 · Agosto 25, 2010

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 · Agosto 25, 2010

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 · Agosto 25, 2010

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 · Agosto 25, 2010

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íveis

cara.. 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 · Agosto 26, 2010

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 · Agosto 26, 2010

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 · Agosto 28, 2010

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.html

e 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 · Agosto 28, 2010

debugue a variavel:

function get_page()
{
        var url = window.location.href;
        alert( url );

veja se bate com os href dos <a>

Wellington09 · Agosto 30, 2010

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

William Bruno · Agosto 30, 2010

como está o html dos links ?

Wellington09 · Agosto 30, 2010

<ul>

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

</ul>

Arquivado

menu accordion

Recommended Posts

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

mauelement 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Wellington09 1