[JavaScript] Drop Down Menu problem

Dieses Thema im Forum "Webentwicklung" wurde erstellt von encud, 6. Mai 2009 .

  1. 6. Mai 2009
    Drop Down Menu problem

    hallo zusammen.

    Hab mir mal nen animiertes dropdown menu gebastelt, funktioniert auch bis auf eine sache:
    Ich habe einen menupunkt, wenn dieser mit der maus überfahren wird fahren unterpunkte per animation aus. alles ist mit einem div ummantelt, die funktionen werden per onmouseout und onmouseover ausgeführt.
    wenn ich jetzt aber den menupunkt verlasse und löst das gleich die onmouseout funktion aus, obwohl sich die maus eigentlich noch im div befinden sollte. wenn ich schneller als die animation bin, und auf einen der unterpunkte gelange, geht das menu nicht zu, erst wenn ich von diesem wieder herunter gehe oder aber auch, wenn ich versuche einen anderen punkt im untermenupunkt auszuwählen.

    Bsp.: http://encud.kilu.de/navibsp/

    hier der code:
    Html:
    HTML:
    <div class="haupt" onmouseout="up('design')" onmouseover="down('design')">
     <p id="design_p"><a href="">Menupunkt</a></p>
     <div class="teil_abs">
     <div class="teil_rel" id="design_drop_div">
     <p><a href="">1. Unterpunkt</a> <a href="">2. Unterpunkt</a> <a href="">3. Unterpunkt</a></p>
     </div>
     </div>
    </div>
    JS:
    Code:
    x = -20;
    z = 0;
    zu = false;
    runtime = 30;
    
    function down(id) {
     document.getElementById(id + "_drop_div").style.display = "block";
     if(x < 0 && zu == false) {
     x += 0.5;
     z += 0.05;
     document.getElementById(id + "_drop_div").style.top = x + "px";
     document.getElementById(id + "_drop_div").style.opacity = z;
     }
     if(zu == false && x >= 0) {
     zu = true;
     document.getElementById(id + "_p").style.color = "#303";
     }
     if(zu == false) window.setTimeout("down('" + id + "')",runtime);
    }
    
    function up(id) {
     if(x > -20 && zu == true) {
     x -= 0.5;
     z -= 0.05;
     document.getElementById(id + "_drop_div").style.top = x + "px";
     document.getElementById(id + "_drop_div").style.opacity = z;
     }
     if(zu == true && x <= -20) {
     document.getElementById(id + "_drop_div").style.display = "none";
     document.getElementById(id + "_p").style.color = "#909";
     zu = false;
     }
     if(zu == true) window.setTimeout("up('" + id + "')",runtime);
    }
    css:
    Code:
    .haupt {
     float:left;
    }
    
    .header_menu_middle .teil_abs {
     position:absolute;
    }
    
    .header_menu_middle .teil_rel {
     position:relative;
     display:none;
     left:-60px;
     top:-20px;
    }
    hoffe mir kann wer von euch weiter helfen!!

    gruß encud
     
  2. 6. Mai 2009
    AW: Drop Down Menu problem

    sperr die funktion halt einfach^^ set bei onmouseover bei der funktion zb "var locked = true;" und guck dann bei onmouseout bei dem ding if(locked==true) { return false; }
     
  3. 6. Mai 2009
    AW: Drop Down Menu problem

    wenn ich das mache fann fährt die navi doch aber garnicht mehr ein?! das ja auch nicht ziel der übung xD
    hätte wenn dann eher an sowas wie eine reaktionszeit gedacht, aber da wüsste ich nicht wie das umzusetzten ist...
     
  4. 8. Mai 2009
    AW: Drop Down Menu problem

    if(noch nicht ganz ausgefahren) lock = true
    else // wenn navi ganz ausgefahren und der user solls wieder einfahren dürfen
    lock = false

    Oo
     
  5. 8. Mai 2009
    AW: Drop Down Menu problem

    hmm ich glaube du hast mein problem noch nicht ganz erfasst, weil auch wenn die navi ganz ausgefahren ist und ich dann nach unten auf die unterpunkte will, funktioniert es nicht...

    oder versteh ich dich vllt nicht?^^

    hab mal ne datei hochgeladen damit das vllt besser verständlich ist

    http://encud.kilu.de/navibsp/
     
  6. 8. Mai 2009
    AW: Drop Down Menu problem

    den onmouseout-event am besten im ausgeklappten menu definieren, dann sollte das klappen.
     
  7. 8. Mai 2009
    AW: Drop Down Menu problem

    wenn ich das mache, klappt es erstens nicht ein wenn ich mit der maus nach oben gehe und was noch dazu kommt, wenn ich mit der maus auf den text gehe fährt er trotzdem sofort wieder ein?! mir kommt das fast vor als ob ich anstatt onmouseout ein onmouseover-event hätte?!

    zum verrücktwerden hier xD

    edti: merke gerade das da anscheinend noch ein padding drin war, wenn dieser weg ist zwischen ober und untermenu dann fährt es zunächst nicht ein, wenn ich den unterpunkt aber wechseln will schon
     
  8. 8. Mai 2009
    AW: Drop Down Menu problem

    dann definier das ausklappmenu als child des handlers, dann feuert mouseout nur wenn du beide elemente verlässt.

    ich schreib dir da mal was
     
  9. 9. Mai 2009
    AW: Drop Down Menu problem

    wäre echt geil, weiß zwar was du mit dem child meinst aber hab kp wie man das macht...
     
  10. 9. Mai 2009
    AW: Drop Down Menu problem

    ne sorry, hab keine zeit dafür.

    hatte schon angefangen aber dann das selbe problem wie du:
    das <li>-element verliert den focus wenn das <ul>-element drüber fliegt => mouseout wird gefeuert.

    mit standard css funktioniert es aber ohne probleme, ohne den effekt auch.
     
  11. 11. Mai 2009
    AW: Drop Down Menu problem

    ok kein problem, rl geht natürlich vor^^

    was meinst du mit standard css?! nur mit css bekomm ich doch dann aber keine animation hin oder etwa doch?!?! ich meine an sonsten wäre das sogar noch besser, css kann man so schlecht abstellen
     
  12. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.