Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Rafael Rosario

Menu accordion JAVASCRIPT

Recommended Posts

Fala galera, meu primeiro post aqui e já venho com um problemão.

 

Estou desenvolvendo um menu accordion vertical em JS, o problema é que não consigo colocar o efeito de sanfona nos submenus

 

Vejam o exemplo:

http://www.effeilhabelabrasil.com.br/menu/menu.htm

 

Clicando na aba "Search Engines" ele irá abrir os submenus

 

dentro desse submenu existe um chamado "ask.com", clicando nele ele irá abrir a 2ªfase de submenus, só que quando clico para fechar, NÃO FECHA (o efeito de "voltar" que as outas fases possuem não funciona e ele fica sempre aberto).

 

Ja tentei de tudo e não funciona. Alguem pode ajudar?

 

segue o código JS

 

function initMenus() {
$.each($('ul.menu'), function(){
$('ul.expand').show();
});
jQuery('ul.menu li.current_page_parent ul').css("display", "block");
$.each($('ul.menu'), function(){
	$('#'+ this.id +'.expandfirst ul.current_page_item').show();
});

$('ul.menu li a').click(

	function() {
		var checkElement = $(this).next();
		var parent = this.parentNode.parentNode.id;


		if($('#' + parent).hasClass('noaccordion')) {
			$(this).next().slideToggle('normal');
			return false;
		}


		if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
			if($('#' + parent).hasClass('collapsible')) {
				$('#' + parent + ' ul:visible').slideUp('normal');
			}
			return false;
		}

		if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
			$('#' + parent + ' ul:visible').slideUp('normal');
			checkElement.slideDown('normal');
			return false;
		}


		if($('#' + parent).hasClass('noaccordion')) {
			$(this).next().slideToggle('normal');
			return false;
		}


	}
);



}
$(document).ready(function() {initMenus();});

 

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Na net existem vários exemplos, basta estudar e adaptar, segue alguns...

 

Tutorial: http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu/

Demo: http://www.designchemical.com/lab/jquery/demo/jquery_simple_accordion_menu.htm

 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

Tutorial: http://www.sohtanaka.com/web-design/simple-accordion-w-css-and-jquery/

Demo: http://www.sohtanaka.com/web-design/examples/accordion/

 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

Tutorial / Demo: http://jquery.bassistance.de/accordion/demo/

 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

Demo: http://jqueryui.com/demos/accordion/default.html

 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

Demo: http://www.jeremymartin.name/examples/kwicks.php?example=5

 

Boa sorte.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Na net existem vários exemplos, basta estudar e adaptar, segue alguns...

 

Tutorial: http://www.designchemical.com/blog/index.php/jquery/jquery-simple-vertical-accordion-menu/

Demo: http://www.designchemical.com/lab/jquery/demo/jquery_simple_accordion_menu.htm

 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

Tutorial: http://www.sohtanaka.com/web-design/simple-accordion-w-css-and-jquery/

Demo: http://www.sohtanaka.com/web-design/examples/accordion/

 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

Tutorial / Demo: http://jquery.bassistance.de/accordion/demo/

 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

Demo: http://jqueryui.com/demos/accordion/default.html

 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

Demo: http://www.jeremymartin.name/examples/kwicks.php?example=5

 

Boa sorte.

 

 

A questão nem é essa! Preciso que me ajudem no efeito que estou com dificuldades para fazer funcionar.

 

Alguém mais pode me ajudar?

 

Obrigado.

Compartilhar este post


Link para o post
Compartilhar em outros sites

O efeito ta ai sim... olhe esse

 

http://www.designchemical.com/lab/jquery/demo/jquery_simple_accordion_menu.htm

 

O segredo ta nele, é exatamente o que esta precisando, basta analisar e montar da maneira que precisa.

 

Os outros tutos e demos que passei tem basicamente o que você necessita.

 

Mas se mesmo assim preferir pode aguardar.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.