✔ onMouseOver & onMouseOut

Status
Nicht offen für weitere Antworten.
B

Bitzi

Grünschnabel
Hi
Ich hab mir ein kleines Menü gebastelt, nach dem Prinzip vom "Basic DHTML Menü" Tutorial. Dieses öffnet sich, wenn man mit der Maus über den Link fährt und schliesst sich beim Wegfahren wieder. Funktioniert eigentlich gut, nur dass nur anhand des Hauptlink entschieden wird, ob die Unterlinks noch zu sehen sind oder nicht.

Hier mal die JS-Funktionen:

Code: 
function menu_show(divid)
{
  document.getElementById(divid).style.display="inline";
}
var ti;
function menu_close(divid, now)
{
  if(now==1)
  {
    document.getElementById(divid).style.display="none";
    clearTimeout(ti);
  }
  else
    ti=setTimeout("menu_close(\""+divid+"\", 1)", 1000);
}

Und hier der Abschnitt für das Menü:

Code: 
<div onMouseOver="javascript:menu_show('Administration')" onMouseOut="javascript:menu_close('Administration',0)">
  <a href="index.php?sec=1">Administration</a><br />
  <span id="Administration" style="display:none">
    <a href="index.php?sec=2">&nbsp;&nbsp;&nbsp;:Adminbereich</a><br />
  </span>
</div>

In diesem Beispiel also: Wenn ich über "Administration" fahre und dort bleibe, geht alles gut. Wenn ich dann aber zu "Adminbereich" gehe, bleibt das Menu noch kurz offen, schliesst sich dann aber.

Hoffe das mir jemand helfen kann :)

Edit: Irgendwie wird hier im Forum "javascript" immer in "java script" umgewandelt, also nicht wundern.
 
Das macht dein eigener Code :)
Code: 
ti=setTimeout("menu_close(\""+divid+"\", 1)", 1000);
.... die 1000 im Aufruf bewirkt, dass das Menu nach 1000 Tausendstel-Sekunden geschlossen wird.... wenn du den Wert geringer einstellst, gehts auch schneller
 
Hmm ohne das Timeout geht es. Allerdings wird das Menü dann irgendwie nur in einigen Fällen geschlossen :(
Ausserdem wird das Menü dann sofort geschlossen. Ich würd es aber gerne so haben, dass es erst 1sek später geschlossen wird ;)
 
Ahso.. ich dachte, dein Problem wäre, dass es einen Moment dauert :)

Da feuert im <div> der mouseout-Event, wenn du über :Adminbereich kommst...
Du musst dort also auch die beiden Events abfangen:
Code: 
<html>
<head>
<script type="text/javascript">
<!--
menuStatus=new Array();
function menu_show(divid)
{
    menuStatus[divid]=true;
    document.getElementById(divid).style.display="inline";
}

function menu_close(divid, now)
{

    if(now==1)
        {
        if(!menuStatus[divid])
            {
            document.getElementById(divid).style.display="none";
            }
        }

    else
        {
        menuStatus[divid]=false;
        setTimeout("menu_close(\""+divid+"\", 1)", 1000);
        }
}
//-->
</script>
</head>
<body>
<div>
<a href="index.php?sec=1"onMouseOver="menu_show('Administration')"onMouseOut="menu_close('Administration',0)">
Administration</a><br />
<span id="Administration" style="display:none">
<a href="index.php?sec=2">
:Adminbereich</a><br />
</span>
</div>
</body>
</html>

Ich habs nen bisserl geändert und die Events auf die Links gelegt.
Beim Mouseover wird für das entsprechende Element ein "status" gespeichert....welcher beim Mouseover abgefragt wird.
Auf die Art bleibt das Menu sichtbar, wenn du innerhalb der einen Sekunde raus-und dann wieder hereingehst.
Nur wenn innerhalb dieser Zeit kein erneutes mouseover erfolgte, wird der Menupunkt versteckt.

BTW:statt mit "display" wäre es vielleicht besser, mit "visibility" zu arbeiten, da bspw. Opera erst ab V7 in der Lage ist,
die Änderung von "display" zu handlen.
 
Supi!
Jetzt gehts wunderbar! Danke! :)

Ein kleines Problem ist aber noch, dass beim Laden der Seite, das Menü offen ist. Zwar ist display:none definiert, allerdings bringt das irgendwie nichts :(
Woran könnte das leigen?
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück