Ir para conteúdo
Fórum Script Brasil
  • 0

Dúvida Com Menu


Guest Menu Sanfona

Pergunta

Guest Menu Sanfona

Olá galera...

Seguinte eu fiz um menu sanfona aqui, ele ta funcionando perfeito, só que eu queria colocar

mais um detalhe nele, por exemplo a pessoa clica no link pai e assim abre os links

filhos executando a função abre(), só que quando clico no link pai de novo eu queria que fechasse o mesmo.

Função abre()

function abre(e){
l=getSource(e);
fecharTudo();

    if(l.parentNode.className=='escondido'){ // ao clicar no link pai mostra os filhos que estao escondidos
        l.parentNode.className='';
    } else if(l.parentNode.className=='') { // se ao clicar a class do link pai estiver vazia esconde os filhos
        l.parentNode.className='escondido';
    }
}
Segue código:
<html>
<head>
    <title>Menu Sanfona</title>
<style>
*,html,body {
    border:0px;
    margin:0px;
    padding:0px;
    font-family:Tahoma;
    font-size:13px;
    font-weight:normal;
}
body {
    margin:5px;
}
div {
    margin:10px;
    width:200px;
    background:#a1bbd2;
}
ul#menu, ul#menu li ul {
    list-style:none;
    padding:0;
    margin:0;
}
ul#menu li {
    border-bottom:1px solid black;
}
ul#menu li ul li {
    border-bottom:0;
}
ul#menu li ul {
    background:#DDEAF5;
}
ul#menu li a {
    display:block;
    padding:2px;
    text-decoration:none;
    color:#fff;
}
ul#menu li.escondido ul {
    display:none;
}
</style>
<script>
function addEvent(o,evtype,fn){
    if(o.addEventListener){
        o.addEventListener(evtype,fn,true)
    }else{
        o.attachEvent("on"+evtype,fn)
    }
}

function getSource(e){
    if(typeof e=="undefined")e=window.event
    var target=e.target ? e.target : e.srcElement
    if(target.nodeType==3)target=target.parentNode
    return target
}

function fecharTudo() {
var menu=document.getElementById('menu');
    for(var i=0;i<menu.childNodes.length;i++){
        if(menu.childNodes[i].nodeType==1){
            menu.childNodes[i].className='escondido';
        }
    }
}

function abre(e){
l=getSource(e);
fecharTudo();

    if(l.parentNode.className=='escondido'){
        l.parentNode.className='';
    } else {
        l.parentNode.className='escondido';
    }
}

function init() {
fecharTudo();
var menu=document.getElementById("menu");
    for(var i=0;i<menu.childNodes.length;i++){
        if(menu.childNodes[i].nodeType==1){
            addEvent(menu.childNodes[i].childNodes[0],"click",abre);
        }
    }
}

addEvent(window,'load',init);
</script>
</head>

<body>
    <div>
        <ul id="menu">
            <li><a href="java script:void(0);">Página Principal</a>
                <ul>
                    <li>Link 01</li>
                    <li>Link 02</li>
                </ul>
            </li>
            <li><a href="java script:void(0);">Página Principal</a>
                <ul>
                    <li>Link 01</li>
                    <li>Link 02</li>
                </ul>
            </li>
            <li><a href="java script:void(0);">Página Principal</a>
                <ul>
                    <li>Link 01</li>
                    <li>Link 02</li>
                </ul>
            </li>
            <li><a href="java script:void(0);">Página Principal</a>
                <ul>
                    <li>Link 01</li>
                    <li>Link 02</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

Desde já agradeço;

GnomO

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,7k
×
×
  • Criar Novo...