Ir para conteúdo

POWERED BY:

Arquivado

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

eu_Nana

Menu estilo Arvore

Por , em Javascript

Recommended Posts

eu_Nana    0

eu_Nana
Postado

Olá pessoal,

 

Bom tenho um menu estilo arvore....esta funcionando....porém preciso colocar a imagem de um "mais" qnd o menu estiver fechado e "menos" qnd o menu estiver aberto....alguém pode me ajudar c esse JS...

 

Uma outra coisa.qnd carrego esse menu...o menu aparece aberto.....só dps q clico nas opções q ele fecha.....queria carregar e o menu ser exibo com todas as opções fechado....para pessoa poder visualizar melhor.....como posso resolver essas duas coisas....se alguém puder me ajudar....

 

<div id="menu">
<div onclick="abrir_menu('submenu1')"><a href="#">Menu 1</a></div>
<span id="submenu1" class="submenu">
<a href="#">Opção A - menu 1</a><br />
<a href="#">Opção B - menu 1</a><br />
</span>
<div onclick="abrir_menu('submenu2')"><a href="#">Menu 2</a></div>
<span id="submenu2" class="submenu">
<a href="#">Opção A - menu 2</a><br />
<a href="#">Opção B - menu 2</a><br />
</span>
<div onclick="abrir_menu('submenu3')"><a href="#">Menu 3</a></div>
<span id="submenu3" class="submenu">
<a href="#">Opção A - menu 3</a><br />
<a href="#">Opção B - menu 3</a>
</span>
</div>


var persistmenu = "sim";
var persisttype = "site";

if(document.getElementById) {
        document.write('<style type="text/css">\\n')
        document.write('.submenu{display: none;}\\n')
        document.write('</style>\\n')
}

function abrir_menu(obj) {
        if(document.getElementById) {
                var el = document.getElementById(obj);
                var ar = document.getElementById("menu").getElementsByTagName("span");
                if(el.style.display != "block") {
                        for(var i=0; i<ar.length; i++) {
                                if(ar[ i ].className=="submenu") {
                                        ar[ i ].style.display = "none";
                                }
                        }
                        el.style.display = "block";
                }
                else {
                        el.style.display = "none";
                }
        }
}

function get_cookie(Name) {
        var search = Name + "="
        var returnvalue = "";
        if(document.cookie.length > 0) {
                offset = document.cookie.indexOf(search)
                if(offset != -1) {
                        offset += search.length
                        end = document.cookie.indexOf(";", offset);
                        if(end == -1) end = document.cookie.length;
                        returnvalue = unescape(document.cookie.substring(offset, end))
                }
        }
        return returnvalue;
}

function onloadfunction() {
        if(persistmenu=="sim") {
                var cookiename = (persisttype=="site")? "abrir_menu" : window.location.pathname
                var cookievalue = get_cookie(cookiename)

                if(cookievalue!="") {
                        document.getElementById(cookievalue).style.display="block"
                }
        }
}

function savemenustate() {
        var inc=1, blockid=""
        while(document.getElementById("submenu"+inc)) {
                if(document.getElementById("submenu"+inc).style.display=="block") {
                        blockid="submenu"+inc
                        break
                }
        inc++
        }
        var cookiename = (persisttype=="site")? "abrir_menu" : window.location.pathname
        var cookievalue = (persisttype=="site")? blockid+";path=/" : blockid
        document.cookie = cookiename+"="+cookievalue
}

if(window.addEventListener) {
        window.addEventListener("load", onloadfunction, false)
}
else if(window.attachEvent) {
        window.attachEvent("onload", onloadfunction)
}
else if(document.getElementById) {
        window.onload = onloadfunction
}

if(persistmenu=="sim" && document.getElementById) {
        window.onunload = savemenustate
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tentou fazer? como ?

onde está o teu script ?

 

para fazer a troca do menos para mais, você só precisa de uma trocar a imagem em cada clique.

-> começa fechado, então imagem do sinal de menos

-> usuario clique, então você troca para a imagem de sinal de mais

-> usuario clica de novo, então você troca para a imagem de sinal de menos, pois se tava aberto antes, agora vai fechar.

 

Dentro do IF/ELSE(acredito que você ja tenha feito isso, para controlar se abre ou fecha), você adiciona essa instrução de trocar de imagem.

 

Para o segundo caso, talvez seja mais fácil controlar na linguagem server-side, pois você precisa ler o valor da página aberta em questão da URL, e setar algo como: display: block(depende de como teu script trabalha), para deixar o menu aberto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

eu_Nana    0

eu_Nana
Postado

Tentou fazer? como ?

onde está o teu script ?

 

para fazer a troca do menos para mais, você só precisa de uma trocar a imagem em cada clique.

-> começa fechado, então imagem do sinal de menos

-> usuario clique, então você troca para a imagem de sinal de mais

-> usuario clica de novo, então você troca para a imagem de sinal de menos, pois se tava aberto antes, agora vai fechar.

 

Dentro do IF/ELSE(acredito que você ja tenha feito isso, para controlar se abre ou fecha), você adiciona essa instrução de trocar de imagem.

 

Para o segundo caso, talvez seja mais fácil controlar na linguagem server-side, pois você precisa ler o valor da página aberta em questão da URL, e setar algo como: display: block(depende de como teu script trabalha), para deixar o menu aberto.

 

Eu tentei fazer ...mais não deu certo...o meu código esta acima....no post anterior

Compartilhar este post

Link para o post
Compartilhar em outros sites

Henrique Barcelos    290

Henrique Barcelos
Postado

Pra que reinventar a roda?

 

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif http://jqueryui.com/demos/accordion/

Compartilhar este post

Link para o post
Compartilhar em outros sites

eu_Nana    0

eu_Nana
Postado

Ok...não vou tentar reiventar a roda.....consegui um menu accordion q usa jQuery.....porém estou tendo problemas.....qnd carrego somente a home.php onde esta o menu....funciona corretamente....agora qnd carrego via ajax dentro da div conteudo.....o menu para de funcionar....oq pode ser.....o home.php segue abaixo:

 

 

<link href="css/estilos.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="js/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:"url(minus.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
       	$(this).siblings().css({backgroundImage:"url(plus.png)"});
	});
	//slides the element with class "menu_body" when mouse is over the paragraph
	$("#secondpane p.menu_head").mouseover(function()
    {
	     $(this).css({backgroundImage:"url(minus.png)"}).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
         $(this).siblings().css({backgroundImage:"url(plus.png)"});
	});
});
</script>
<style type="text/css">
body {
	margin: 10px auto;
	font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list {	
	width: 150px;
}
.menu_head {
	padding: 5px 10px;
	cursor: pointer;
	position: relative;
	margin:1px;
    font-weight:bold;
    background: #eef4d3 url(plus.png) center right no-repeat;
}
.menu_body {
	display:none;
}
.menu_body a{
  display:block;
  color:#006699;
  background-color:#EFEFEF;
  padding-left:10px;
  font-weight:bold;
  text-decoration:none;
}
.menu_body a:hover{
  color: #000000;
  text-decoration:underline;
  }
</style>



   <div id="geral">     
		<div id="conteudo">
        	<div class="page_tile">DÚVIDAS</div>
            
            
                <div style="float:left" > 
  				<p><strong>MENU</strong></p>
  				<div id="firstpane" class="menu_list"> 
				<p class="menu_head">Menu-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">Menu-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">Menu-3</p>
		<div class="menu_body">
          <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>			
       </div>
  </div>  
</div>                

 
             
		</div>

</div>

Alguém pode me ajudar....?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Javascript carregado por AJAX realmente não funciona.

 

-> não traga script via ajax

-> deixe todos os arquivos externos que precisar, já 'linkados' na página previamente carregada

-> se precisar atrelar eventos em tempo de execução, use o método live() do jQuery

Compartilhar este post

Link para o post
Compartilhar em outros sites

eu_Nana    0

eu_Nana
Postado

Javascript carregado por AJAX realmente não funciona.

 

-> não traga script via ajax

-> deixe todos os arquivos externos que precisar, já 'linkados' na página previamente carregada

-> se precisar atrelar eventos em tempo de execução, use o método live() do jQuery

 

 

Eu passo os arquivos .js na página index.php....onde tenho a div q carrego todas as outras páginas....

 

no index passo os seguintes .js

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

e no home.php.....o código do menu.....

<div style="float:left" > 
  				<p><strong>MENU</strong></p>
  				<div id="firstpane" class="menu_list"> 
				<p class="menu_head">Menu-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">Menu-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">Menu-3</p>
		<div class="menu_body">
          <a href="#">Link-1</a>
         <a href="#">Link-2</a>
         <a href="#">Link-3</a>			
       </div>
  </div>  
</div>

Alguém pode me ajudar ...como faço carregar uma página que contém um menu estilo arvore dentro de uma div.....qnd carrego...o menu para de funcionar

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