• Super User

    Menù a comparsa (JS)

    Salve!
    Sto realizzando un menù a comparsa tramite l'uso di JS e javascript.
    Il link x mostrarvelo è questo:
    www.easysystem/PROVE/menu/menu.html

    Tramite questa funzione mi si apre il submenù:

    window.onload=function(){
        opMenu();
    
    }
    function opMenu(){
        var menuID=document.getElementById('menuSX');
        var hn=menuID.getElementsByTagName("h3");
        for(var i=0;i<hn.length;i++){
            var hLi=hn*.nextSibling;
            hn*.onmouseover=function(){
                this.parentNode.className="menuUL_show";
            }
            hn*.onmouseout=function(){
            }
        }
    }
    

    Senza entrare nel dettaglio , apre con l'evento "onmouseover" il sottomenù attribuendo una classe sovrascrivendo gli attributi precedenti che impostavano il sottomenù su "visibility:hidden" cambiando così in "visibility:visible".

    Adesso come potete subito vedere il problema è semplicemente uno:
    se vado su un sottomenù esso si richiude.

    come posso fare? Questo succede naturalmente perchè non ho impostato nessun evento sulla lista interna però sinceramente le ho provate tutte ma non so come risolvere questo problema.
    Se mi aiutate mi fate un grande piacere ciao!


  • Super User

    Allora scusate sempre per i miei ritardi , ho la colpa di scrivere il problema e poi risolverlo subito dopo:

    function opMenu(){
        var menuID=document.getElementById('menuSX');
        var hn=menuID.getElementsByTagName("h3");
        for(var i=0;i<hn.length;i++){
            var hLi=hn*.nextSibling;
            hn*.onmouseover=function(){
                this.parentNode.className="menuUL_show";
            }
            hn*.onmouseout=function(){
                this.parentNode.className="menuUL_hide"; 
                }
            hn*.nextSibling.nextSibling.onmouseout=function(){
                this.parentNode.className="menuUL_hide";
            }
            hn*.nextSibling.nextSibling.onmouseover=function(){
                this.parentNode.className="menuUL_show";
            }
        }
    }
    

    Ok così funziona MA non mi piace la forma scritta.
    Mi pare un'inutile ripetizione che potrebbe essere sostituita in una forma più corretta.
    Se mi aiutate comunque mi fa piacere ^^


  • Super User

    ok nextsibling nn funziona con internet explorer nn so xkè -.-


  • Super User

    Ciao 🙂

    Premesso che il link non funziona quindi non ho visto nulla, perchè non usi solo i css e la pseudoclasse hover?

    Cerca qualcosa qui

    :ciauz: