Ir para conteúdo

Arquivado

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

Rodrigo7777

[Resolvido] Menu accordion, deixando aberto após o click

Por , em Javascript

Recommended Posts

Rodrigo7777    0

Rodrigo7777
Postado

Fala galera, é o seguinte, to começando a usar jquery baixei um Menu accordion e configurei ao meu gosto, problema é o seguinte.

 

Quando clica no menu abre os sub-menu logo abaixo, até ai ta tudo ok, mas eu gostaria que quando clica-se no sub-menu e abri-se a pagina o accordion não se fecha-se.

 

Por exemplo:

 

Clico no menu "FRUTA" o accordion se abre e la tem as opção do sub-menu ( banana, maça...) e quando eu clicar em banana, gostaria que na pagina seguinte continua-se aberto o sub menu referente a "FRUTA" indicando que o usuario está na pagina fruta, e não simplesmente fecha-se forçando o usuario a clicar novamente em "FRUTA" para escolher a maçã...

 

Deu pra entender??

 

Vo postar aki como ta o codigo

 

<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
	//slides the element with class "menu_body" when paragraph with class "menu_head" is clicked 
	$("#firstpane p.menu_head").click(function()
    {
		$(this).css({backgroundImage:""}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
       	$(this).siblings().css({backgroundImage:""});
	});
});
</script>



<style type="text/css">
<!--
body {
	margin: 10px auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 75%;
	line-height: 120%;
}
.menu_list {
	width: 180px;
}
.menu_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
	background: center right no-repeat;
	font-size: 10px;
	color: #FFF;
	background-image: url(menutest.jpg);
	font-weight: bold;
	text-align: center;
}
.menu_body {
	display:none;
}
.menu_body a{
	display:block;
	color:#FFF;
	background-color:#BB4038;
	padding-left:10px;
	font-weight:bold;
	text-decoration:none;
}
.menu_body a:hover{
	color: #000000;
	text-decoration:none;
	background-color: #E5F3FC;
  }
-->
</style>

É isso pessoal o accordion ta funfando perfeitamente, só queria que continua-se aberto quando abri-se uma nova pagina, acredito que é só acrescentar algo no JS do inicio nas paginas que serão abertas, mas como sou leigo ta complicado.

Se alguem puder me da uma luz agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Cara, não é 'tão simples' assim...

 

você precisa testar oque está na URL, e então deixar aberto o menu correspondente..

esse tipo de serviço, é mais simples de ser realizado com linguagens server-side.. mas tudo bem..

alert( document.location.href );
fazer um 'search' apartir da URL do sub-menu, e ver a qual menu pertence, para poder setar o display:block*

 

 

 

como está o HTML ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo7777    0

Rodrigo7777
Postado

Meu html ta assim:

 

<div style="float:left" > <!--inicio-->
  <p><strong>Menu testando</strong></p>
  <div id="firstpane" class="menu_list"> <!--menu-->
		<p class="menu_head">Header-1</p>
		<div class="menu_body">
		<a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>	
		</div>
		<p class="menu_head">Header-2</p>
		<div class="menu_body">
			<a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>	
		</div>
		<p class="menu_head">Header-3</p>
		<div class="menu_body">
          <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>			
       </div>
  </div>  <!--fim-->
</div>

Poxa eu realmente achei que era algo simples.

Por exemplo, não teria como deixa o "sub-menu" do accordion já aberto na sua respectiva pagina, mesmo se a pessoa não clica-se no menu accordion para abri-la?

 

Por exemplo, vo la e digito "www.teste.com.br/FRUTA/banana.html"

 

E o sub-menu da FRUTA já estaria aberto, normalmente. Creio que assim seria mais trabalhoso pois eu teria que fazer isso em cada pagina, indicando qual já estaria aberta em cada pagina, mas seria mais simples para mim.

 

Agradeço qualquer ajuda

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Então, como o accordion é feito com Javascript, não adianta, nem tentarmos fazer esse 'if' via css. (setando id no body e tal..)

 

Cara, esse efeito de 'deixar aberto, mesmo se a pessoa entrar diretamente', você vai conseguir fazer, se realizar o teste que eu falei.

 

Oque eu queria ver principalmente, qndo pedi o teu HTML, era em qual 'esquema' eram as tuas URLS..

se eram do tipo:

 

pagina.html

ou:

?pg=pagina

ou

/pagina

....

 

Tenta implementar com o método que mostrei para 'descobrir' oque está na URL.

A lógica que pensei e sei que vai resolver, é esta.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo7777    0

Rodrigo7777
Postado

Entendi, mas infelizmente não to sabendo onde aplicar o alert, seria dentro do script? ou faço outro script?

Sou muito leigo no assunto, estou me aventurando apenas, se souber um bom tutorial para eu seguir e aprender agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo7777    0

Rodrigo7777
Postado

Opa então, minha pagina se apresenta da seguinte maneira :

 

www.teste.com.br/teste1.html

www.teste.com.br/teste2.html

 

seria a pagina.html que ele descreveu, que acredito ser a mais simples para um iniciante.

 

Acredito possa usar PHP sim.

 

Caso a solução envolva o uso do PHP eu teria que reformular todo o accordion? ou seria apenas "acrescentar" algo?

 

sobre o 

alert( document.location.href );
poderiam me da um exemplo dessa sugestão?

 

Obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Fiz aqui a função:

 

var url = window.location.href.split("/"); // Pega a URL e separa, em elementos de array, cada pedaço que tenha "/" (não incluindo-o)
var link = url[url.length - 1]; // cria uma variável pegando o último elemento do array criado na variável url

function openMenu(menu){ // função recebe como parâmetro ID do menu
    var as = document.getElementById(menu).getElementsByTagName('a'); // pega todos os <a> do menu
    for(var i = 0; i < as.length; i++){ // faz um loop neles
        var a = as.item(i); // cria uma variável com o <a> que o loop está
        var href = a.href.split("/"); // pega o atributo href dele e faz o mesmo que foi feito na variável url
        var hrefL = href[href.length - 1]; // faz o mesmo que foi feito na variável link
        if(hrefL == link){ // verifica se o href do <a> é igual ao trecho retirado da url
            var ul = a.parentNode.parentNode; // pega o <ul> através de .parentNode
            if(ul.nodeName == "UL") // vê se a variável acima criada tem nome "UL"
                ul.style.display = "block"; // se tiver, deixa ele com display:block
        } // fecha if
    } // fecha loop for 
} // fecha função
window.onload = function(){ // ao documento ser carregado
    openMenu('mainnav'); // executa esse função
}; // fecha window.onload
Exemplo:

 

 

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var url = window.location.href.split("/"); // Pega a URL e separa, em elementos de array, cada pedaço que tenha "/" (não incluindo-o)
var link = url[url.length - 1]; // cria uma variável pegando o último elemento do array criado na variável url

function openMenu(menu){ // função recebe como parâmetro ID do menu
    var as = document.getElementById(menu).getElementsByTagName('a'); // pega todos os <a> do menu
    for(var i = 0; i < as.length; i++){ // faz um loop neles
        var a = as.item(i); // cria uma variável com o <a> que o loop está
        var href = a.href.split("/"); // pega o atributo href dele e faz o mesmo que foi feito na variável url
        var hrefL = href[href.length - 1]; // faz o mesmo que foi feito na variável link
        if(hrefL == link){ // verifica se o href do <a> é igual ao trecho retirado da url
            var ul = a.parentNode.parentNode; // pega o <ul> através de .parentNode
            if(ul.nodeName == "UL") // vê se a variável acima criada tem nome "UL"
                ul.style.display = "block"; // se tiver, deixa ele com display:block
        } // fecha if
    } // fecha loop for 
} // fecha função
window.onload = function(){ // ao documento ser carregado
    openMenu('mainnav'); // executa esse função
}; // fecha window.onload
</script>
<style type="text/css">
li{ list-style: none; float: left; }
a{ padding: 0 5px; background: green; color: white; }
</style>
</head>
<body>
    <ul id="mainnav">
        <li><a href="index.php">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
    </ul>
</body>
</html>

 

Deixei todo comentado para você entender como funciona. ^_^

 

Agora se quiser fazer em PHP, só falar, que eu movo o tópico.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo7777    0

Rodrigo7777
Postado

Opa, então funfo direitinho! Muito obrigado pela força.

 

Unico problema é quando o sub-menu fica aberto ele fica totalmente fora de ordem, todo embaralhado... Mas o que eu queria mesmo fico perfeito.

 

Tentei mexer no CSS pra deixar alinhado como estava antes, mas infelizmente não funciona, alinhar na horizontal até consegui, mas na vertical não vai, fica sempre um espaço, e no IE6 esse espaço é multiplicado por 2.

 

Acho que pra ficar 100% sem embaralhar o menu eu teria que recomeçar do zero mesmo.

 

agradeço a atenção

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Acho que pra ficar 100% sem embaralhar o menu eu teria que recomeçar do zero mesmo.

Também acho. xD Não sei como está o negócio aí... Mas você pode estudar o código e adaptar ao que precisa.

 

Tente colocar o ul como inline-block.

 

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rodrigo7777    0

Rodrigo7777
Postado

Opa então, tava aki mexendo na CSS do menu um poco e consegui ajeitar ela em todos os navegadores botando um margin-left -39 na li e na ul botei margin-top 1px e margin-bottom 1px.

 

Fico perfeito, mas como sempre me acontece, no IE6 mudo praticamente nada rsrs

 

 

Em todos navegadores accordion fico assim :

 

FRUTA

Banana

Maçã

etc

 

Agora no IE6

 

FRUTA

 

Banana

 

Maçã

 

etc

 

 

deu pra entender? rsrsrs

 

Fiz oque você pediu, botei inline-block na ul mas n teve resultado, agora se eu por essa inline-block na "li" no IE6 fica perfeito, mas nos outros navegadores fica tudo todos os sub-menu em uma unica linha um em cima do outro.

 

Agradeço qualquer ajuda.

Compartilhar este post

Link para o post
Compartilhar em outros sites

sacjamm    0

sacjamm
Postado

Pessoal, desculpa está tentando reabrir este tópico aqui, mais eu estou com este mesmo problema, porém o meu accordion é diferente do dele, veja o accordion deste site: www.fabricafantastica.com.br/categoria/diarias-compactas

Eu queria saber como eu faço pra deixar sempre aberto a categoria referente essa subcategoria, eu creio que possa ser feito, em php, mais eu tentei sem sucesso, e mesmo assim nao sou muito bom de integrar php com jquery, tenho uma noção, mais quando se trata de trabalhar com bibliotecas prontas eu tomo um pau.

 

Então alguém pode ajudar?

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