Erro Submenu

_Lupin_ · July 9, 2011

Pessoal, peguei um código pronto sobre como fazer um sub-menu e dei uma mudada.

Minha intencao é quando eu passo o argumento 'unica' pra funcao escondediv, ela expande uma unica div, a que a pessoa clicou e fecha as outras divs expandidas. Quando passo o argumento 'multipla' ela deixa tudas as divs expandidas e expande a que ele clicou, só que nisso da erra, ela expando embaixo dos menus e não no menu certo, segue o código de tudo, espero que possam me ajudar :S

<html>
<head>
    <title>Untitled</title>
    
    <!--|||||=========== COLOQUE ENTRE AS TAGS HEAD ==========|||||||||| -->
    
    <!-- ||**||**||**||  FOLHA DE ESTILOS (CSS) ||**||**||**|| -->
    <style type="text/css">    
    /*+++++++++++++++ RELATIVO AS CATEGORIAS +++++++++++++++++++++*/
    
    /**** LINKS DOS NOMES DAS CATEGORIAS ****/
    /* Link em estado natural*/
    a.link_menu:link{color:navy;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
    /* Link depois de visitado*/
    a.link_menu:visited{color:navy;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
    /* Link ao passar o mouse*/
    a.link_menu:hover{color:#ffffff;text-decoration:underline;font-weight:bold;font-family:arial;font-size:12px}
    /**** FIM LINKS DOS NOMES DAS CATEGORIAS ****/
    
    /**** CELULAS DOS NOMES DAS CATEGORIAS ****/
    /*padding top right bottom left */
    .titulo_menu{       
       background-color:red;
        background-image:url(none);
        width:150px;
        height:25px;
        border:1px solid blue;
        padding: 5px 0px 0px 5px;
    }
    /**** FIM CELULAS DOS NOMES DAS CATEGORIAS ****/
    
    /*++++++++++++ FIM RELATIVO AS CATEGORIAS +++++++++++++++++++++*/        
    
    
    
    /*++++++++++++  RELATIVO AS SUB-CATEGORIAS +++++++++++++++++++++*/
    
    /**** LINKS DOS NOMES DAS SUB-CATEGORIAS ****/
    /* Link em estado natural*/
    a.link_smenu:link{color:#ffffff;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
    /* Link depois de visitado*/
    a.link_smenu:visited{color:#ffffff;text-decoration:none;font-weight:normal;font-family:arial;font-size:12px}
    /* Link ao passar o mouse*/
    a.link_smenu:hover{color:navy;text-decoration:underline;font-weight:bold;font-family:arial;font-size:12px}
    /**** LINKS DOS NOMES DAS SUB-CATEGORIAS ****/
        
    /**** CELULAS DOS NOMES DAS SUB-CATEGORIAS ****/
    /*padding top right bottom left */
    .itens_menu{
       background-color:blue;
        background-image:url(none);
        width:137px;
        height:25px;
        border:1px solid red;
        padding: 5px 0px 0px 5px;
    }    
    /**** FIM CELULAS DOS NOMES DAS SUB-CATEGORIAS ****/
    
    /**** CELULAS DE REVEZAMENTO DOS NOMES DAS SUB-CATEGORIAS ****/
    .itens_menu_r{
       background-color:#0099ff;
        background-image:url(none);
        width:137px;
        height:25px;
        border:1px solid red;
        padding: 5px 0px 0px 5px;        
    }    
    /**** FIM CELULAS DE REVEZAMENTO DOS NOMES DAS SUB-CATEGORIAS ****/
    
    /*++++++++++++ FIM RELATIVO AS SUB-CATEGORIAS +++++++++++++++++++++*/    
    </style>    
    <!-- ||**||**||** FIM FOLHA DE ESTILOS (CSS) ||**||**||** -->
    
    <!-- |||||||||||||||| FUNÇÕES JAVASCRIPT (NÃO EDITE) |||||||||||||||| -->
    &lt;script language="javascript">

        //Variavel que armazena qual submenu esta expandido 
        numeroSubMenuExpandido = 0;
        
        var idSubMenuObject = new Object();

        function escondediv(idSubMenu, totalSubMenus, tipoExpansao){        
        
            ArmazenaNomeNumeroDaString(idSubMenu);
            
           //Laço que percorre cada submenu e verifica seu estado de expansao
            if(tipoExpansao == "singular"){   
               for(i = 1; i <= totalSubMenus; i++){            
                   if(i == idSubMenuObject.numero ){
                       if(numeroSubMenuExpandido != idSubMenuObject.numero){
                          document.getElementById(idSubMenuObject.nome+i).style.display="inline"
                           numeroSubMenuExpandido = idSubMenuObject.numero;
                        }else{
                           numeroSubMenuExpandido = 0;
                           document.getElementById(idSubMenuObject.nome+i).style.display="none";
                        }
                    }else{
                         document.getElementById(idSubMenuObject.nome+i).style.display="none";                                  
                    }                
                }
            }else if(tipoExpansao == "multipla"){
                       if(numeroSubMenuExpandido != idSubMenuObject.numero){
                          document.getElementById(idSubMenuObject.nome+i).style.display="inline"
                           numeroSubMenuExpandido = idSubMenuObject.numero;
                        }else{
                           numeroSubMenuExpandido = 0;
                           document.getElementById(idSubMenuObject.nome+i).style.display="none";
                        }
            
                }
        }
        
        function ArmazenaNomeNumeroDaString(string)
        {            
            var numero = "";
            var nome = "";
            
            i = 0;
            while(i < string.length && verificaLetra(string[i]))
            {
                nome += string[i];
                i++;
            };
            
            idSubMenuObject.nome = nome;
            
            while(i < string.length)
            {
                numero += string[i];
                i++;
            };
            
            idSubMenuObject.numero = numero;
        }
        
        function verificaLetra(caracter)
        {
            letra = true;
            if(caracter >= "0" && caracter <= "9")
                letra = false;
            
            return letra;
        }
        
        function reveza(qualquer){
          document.getElementById(qualquer).className="itens_menu_r"
        }
        function volta(qualquer){
          document.getElementById(qualquer).className="itens_menu"
        }
    </script>
    <!-- ||||||||||||| FIM FUNÇÕES JAVASCRIPT (NÃO EDITE) |||||||||||||||| -->    
    
    <!--|||||========== FIM COLOQUE ENTRE AS TAGS HEAD =========|||||||||| -->
</head>

<body>

<!--|||||||||||||||||  COLOQUE DENTRO AS TAGS BODY||||||||||||||||||||||||||||| -->

&lt;script>
//Coloque aqui o número de itens de menu
n_divs='5'
</script>
<form name="form">
<INPUT TYPE="text" NAME="teste" VALUE=""><BR>
<INPUT TYPE="button" NAME="botao" VALUE="GERAR GUIA" onClick="Teste()">
</form>
<div class="titulo_menu"><a href="#" class="link_menu"  target="alvo">Link fixo</a></div>

<div  onclick="escondediv('mdiv1', n_divs, 'multipla')">Categoria 1</div>
<div id="mdiv1"  style="display:none">
   <table border="0">
       <tr><td id="um" class="itens_menu" ><a href="#" onmouseover="reveza('um')" onmouseout="volta('um')" class="link_smenu" target="alvo">link item1A</a></td></tr>
        <tr><td class="itens_menu" ><a href="#" class="link_smenu" target="alvo">link item2A</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3A</a></td></tr>
    </table>
</div>

<div class="titulo_menu"><a href="java script:void(escondediv('mdiv2', n_divs, 'singular'))" class="link_menu">Categoria 2</a></div>
<div id="mdiv2"  style="display:none">
   <table border="0">
       <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1B</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2B</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3B</a></td></tr>
    </table>
</div>

<div class="titulo_menu"><a href="java script:void(escondediv('mdiv3', n_divs, 'multipla'))" class="link_menu">Categoria 3</a></div>
<div id="mdiv3"  style="display:none" >
   <table border="0">
       <tr><td class="itens_menu">link item1C</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2C</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3C</a></td></tr>
    </table>
</div>

<div class="titulo_menu"><a href="java script:void(escondediv('mdiv4', n_divs, 'singular'))" class="link_menu">Categoria 4</a></div>
<div id="mdiv4"  style="display:none">
   <table border="0">
       <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item1D</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item2D</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu" target="alvo">link item3D</a></td></tr>
    </table>
</div>

<div class="titulo_menu"><a href="java script:void(escondediv('mdiv5', n_divs, 'singular'))" class="link_menu">Categoria 5</a></div>
<div id="mdiv5"  style="display:none">
   <table border="0">
       <tr><td class="itens_menu"><a href="#" class="link_smenu">link item1E</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu">link item2E</a></td></tr>
        <tr><td class="itens_menu"><a href="#" class="link_smenu">link item3E</a></td></tr>
    </table>
</div>
<!--|||||||||||||||||  COLOQUE DENTRO AS TAGS BODY||||||||||||||||||||||||||||| -->

</body>
</html>

_Lupin_ · July 9, 2011

Pessoal já descobri, era erro na funcao mesmo, hehehe.

A função deve ficar assim:

function escondediv(idSubMenu, totalSubMenus, tipoExpansao){        
        
            ArmazenaNomeNumeroDaString(idSubMenu);
            
           //Laço que percorre cada submenu e verifica seu estado de expansao
            if(tipoExpansao == "singular"){   
               for(i = 1; i <= totalSubMenus; i++){            
                   if(i == idSubMenuObject.numero ){
                       if(numeroSubMenuExpandido != idSubMenuObject.numero){
                          document.getElementById(idSubMenuObject.nome+i).style.display="inline"
                           numeroSubMenuExpandido = idSubMenuObject.numero;
                        }else{
                           numeroSubMenuExpandido = 0;
                           document.getElementById(idSubMenuObject.nome+i).style.display="none";
                        }
                    }else{
                         document.getElementById(idSubMenuObject.nome+i).style.display="none";                                  
                    }                
                }
            }else if(tipoExpansao == "multipla"){

                          document.getElementById(idSubMenuObject.nome+idSubMenuObject.numero).style.display="inline"
                           numeroSubMenuExpandido = idSubMenuObject.numero;
    
                }
        }

Sign In

Erro Submenu

Question

_Lupin_

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

_Lupin_

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity