✔ Javascript dropdown klappt sich zu früh zu

N

Nord-Süd-Richtung

Erfahrenes Mitglied
Hi
ich habe vor ein eigentlich simples dropdown navigationsmenü zu bauen. Nur klappen sich die Menüpunkte ein, bevor ich sie anklicken kann:
HTML: 
<div style="position:absolute;width:100px;height: 30px; background-color:#ffff33;" id="c1" onmouseover="document.getElementById('s1').style.display ='block';">
Hallo
</div>
<div style="position:absolute;width:100px;height:130px; background-color:#ffff33;display:none;" id="s1" onmouseout="this.style.display ='none';">
  <div style="height: 30px;">Hallo</div>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</div>
 
Kenne nun dein JavaScript nicht aber ich vermute einfach mal der onmouseevent feuert genau dann wenn Du über den DIV gehst wo "Hallo" steht oder über die Liste.
Weil deine Maus nun nicht mehr über den eigentlichen übergeordneten DIV ist sondern eben in einen der Kindelemente.

Da müsstest eben abfragen wohin bin ich nun mit der maus gegangen.

Event.relatedTarget oder für den IE window.event.toElement.

Damit bekommst raus zu welchen Element du gewechselt bist , sollte es sich dabei um einen Kindknoten handeln kannst das zuklappen wieder abbrechen wenn nicht dann naja dann eben nicht.

Bei einen Mouseover wäre es ebenfalls

Event.relatedTarget oder eben im IE window.event.fromElement um rauszufinden von welchen Element Du kommst.
 
Hi,
der javascriptcode steht im mouseover/out drin ;)
Die Idee ist eigentlich recht einfach (und nur entstanden weil vorherige Versuche auch gescheitert sind). Wenn ich über den ersten Div fahre, in dem Hallo steht, wird ein zweiter div sichtbar, der an genau der gleichen Stelle steht, nur halt größer ist. Und auf diesem triggert ja das onMouseOut, doch obwohl ich mich auf dem zweiten div befinde, funktioniert es nicht.

edit: Ich habe noch ein wenig weiter getestet: Wenn ich in den zweiten div Textschreibe, bleibt er solange offen, bis ich über ein weiteres html Element wie einen div, oder ul fahre. Kann man das umgehene, außer mit einer Mauskoordinaten abfrage?
 
Zuletzt bearbeitet:
Hi.
Nord-Süd-Richtung hat gesagt.:
ich habe vor ein eigentlich simples dropdown navigationsmenü zu bauen. Nur klappen sich die Menüpunkte ein, bevor ich sie anklicken kann:
HTML: 
<div style="position:absolute;width:100px;height: 30px; background-color:#ffff33;" id="c1" onmouseover="document.getElementById('s1').style.display ='block';">
Hallo
</div>
<div style="position:absolute;width:100px;height:130px; background-color:#ffff33;display:none;" id="s1" onmouseout="this.style.display ='none';">
  <div style="height: 30px;">Hallo</div>
  <ul>
    <li>1</li>
    <li>2</li>
  </ul>
</div>
Zum Vergrößern anklicken....
Mit einem Dropdown-Menü assoziiere ich ein verschachteltes Listenelement, in dem sich das Submenü keineswegs vorzeitig verabschiedet, bevor es mit der Maus erreicht wurde ;-)

HTML: 
<ul>
    <li onmouseover="document.getElementById('s1').style.display ='block';" onmouseout="document.getElementById('s1').style.display ='none';">Hallo
        <ul id="s1" style="width:100px;height:130px; background-color:#ffff33;display:none;">
            <li>Hallo
                <ul>
                    <li>1</li>
                    <li>2</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>


Das Ganze lässt sich mit dieser Markup-Struktur nun anstelle von JS auch mit einer kleinen Prise CSS umsetzen - das nur mal so nebenbei erwähnt :)

mfg Maik
 
Hi, ich bins doch nochmal, jetzt bewundere ich mich selbst, wie ich Probleme herbeizaubere. Wenn ich den Menücode isoliert teste, funktioniert er, nur hier schmiert er wieder ab. Es liegt warscheinlich am position absolute bei den anderen divs. Nur wenn ich das weglasse zerschießt es mir das Layout:
HTML: 
<body>
    <div id="c01">
      <div id="c02">
        <ul id="ml01">
          <li onmouseover="execute(1,'sml01',true);" onmouseout="execute(1,'sml01',false);">Link
            <ul id="sml01">
              <li>
                <ul>
                    <li><a href="#">Lalalink</a></li>
                    <li><a href="#">foobarfoo</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="c03"></div>
    </div>
  </body>
CSS: 
*{
  color: #fff;
}
html,body{
  background-color: #000;
  z-index: 1;
}
a:link, a:active, a:visited{
  text-decoration: none;
}
ul{
  padding: 0px;
  margin: 0px;
  list-style: none;
}
#c01{
  position: absolute;
  margin-left: 200px;
  margin-top: 200px;
  width: 800px;
  height: 400px;
  border: 1px #ddd solid;
  z-index: 1;
}
#c02{
  position: absolute;
  width: 800px;
  height: 30px;
  border-bottom: 1px #ddd solid;
  z-index: 1;
}
#c03{
  position: absolute;
  margin-top: 30px;
  width: 150px;
  height: 370px;
  border-right: 1px #ddd solid;
  z-index: 1;
}
#ml01{
  height: 30px;
  width: 50px;
  z-index: 2;
}
#sml01{
  display: none;
  width: 50px;
  height: 200px;
  z-index: 2;
}
 
Damit wird bei mir das Layout überhaupt nicht zerschossen:
CSS: 
#c01{
  /*position: absolute;*/
  margin-left: 200px;
  margin-top: 200px;
  width: 800px;
  height: 400px;
  border: 1px #ddd solid;
  z-index: 1;
}
#c02{
  /*position: absolute;*/
  width: 800px;
  height: 30px;
  border-bottom: 1px #ddd solid;
  z-index: 1;
}
#c03{
  /*position: absolute;*/
  /*margin-top: 30px;*/
  width: 150px;
  height: 370px;
  border-right: 1px #ddd solid;
  z-index: 1;
}
Aber das Submenü ist wieder erreichbar :)

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück