Ir para conteúdo

POWERED BY:

Arquivado

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

Gutto Faria

[Resolvido] Accordian Menu c/ jQuery ao contrário

Por , em Javascript

Recommended Posts

Gutto Faria    0

Gutto Faria
Postado

Estou com o código abaixo para um accordian menu, só que gostaria que ele funcionasse ao contrário, ou seja, ao clicar no "MENU", o conteúdo aparecesse acima do menu, ficaria mais ou menos assim:

 

MENU (sem clicar)

 

 

opção 1

opção 2

MENU (após clicar)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 <script type="text/javascript" src="jquery-1.4.1.min.js"></script>
 
 <script type="text/javascript">
 $(document).ready(function(){
 $(".conteudoMenu").hide();
 $(".itemMenu").click(function(){
 $(this).next(".conteudoMenu").slideToggle(300);
 });
 })
 </script>
 
 <style type="text/css">
 <!--
 body, td, th {
 font-family: Verdana, Geneva, sans-serif;
 font-size: 11px;
 }
 ul#menuGeral {
 margin:0px;
 padding:0px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
 list-style:none;
 }
 ul#menuGeral li {
 }

 ul#menuGeral a {
 display:block;
 padding:3px;
 cursor:pointer;
 color:#000;
 text-decoration:none;
 }
 ul#menuGeral li a {
 padding-left: 20px;
 background-color:#DDE0EF;
 border:1px solid #D4D4D4;
 margin-bottom:1px;
 }
 ul#menuGeral li a:hover {
 background-color:#B7BDDD;
 }
 ul#menuGeral .conteudoMenu {
 border-left:1px solid #D4D4D4;
 border-right:1px solid #D4D4D4;
 padding:5px;
 background-color:#F7F7F7;
 }
 ul#menuGeral .conteudoMenu a {
 background-color:#F7F7F7;
 padding-left:25px;
 margin-bottom:0px;
 border:0px;
 }
 ul#menuGeral .conteudoMenu a:hover {
 background-color:#DADADA;
 }
 -->
 </style>

</head>
<body>


 <ul id="menuGeral">
 <li><a href="#" class="itemMenu">MENU</a>
 <div class="conteudoMenu">
 	<a href="#">ITEM</a>
 <a href="#">OUTRO ITEM</a>
 </div>
 </li>


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

GabrielFerrari    41

GabrielFerrari
Postado

é mais simples do que parece

Você só precisa entender melhor sobre o next

no site do Jquery existe uma boa documentação que você pode aprender -> http://api.jquery.com/next/

 

Mas enfim

para resolver seu problema você primeiramente precisa inverter a ordem dos <li>

(na verdade antes você deveria fechar a tag ul </ul>)

 

mas enfim

Ele ficaria assim:

 

<ul id="menuGeral">
	<li>
		<div class="conteudoMenu">
			<a href="#">ITEM</a>
			<a href="#">OUTRO ITEM</a>
		</div>
	</li>
	<li><a href="#" class="itemMenu">MENU</a></li>
</ul>

depois é que vem a parte do next

Se você deixar seu código como está ele irá fazer o efeito itemMenu e não onde queremos

então você altera dessa forma:

 

$(document).ready(function(){
	$(".conteudoMenu").hide();
	$(".itemMenu").click(function(){
		$(".conteudoMenu").slideToggle(300);
	});
})

E pronto :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gutto Faria    0

Gutto Faria
Postado

Ok. Entendi agora.

E consegui também fazer outras coisas que eu queria, ficou perfeito!

 

Obrigado pela ajuda. =)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito