Jump to content
Fórum Script Brasil
  • 0

Dúvida Com Menu


Guest Menu Sanfona
 Share

Question

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 to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.8k
    • Total Posts
      646.6k
×
×
  • Create New...