Menü-Script um einen Timeout-Befehl erweitern

P

PaulKik

Grünschnabel
Hallo,

nachfolgend findet Ihr einen Quellcode, der zu einem Menü gehört und eigentlich gut funktioniert. Da ich aber nun meine Seite um eine Flashanimation erweitert habe, gibt es neuerdings ein Problem damit. Dieses ist, dass sich das Menü hinter der Flashanimation ausklappt. Bezüglich der Sichtbarkeit habe ich bereits die Einstellung „transparent“ verwendet, klappt auch einwandfrei. Problematisch ist jedoch das Ausblenden, so bleibt lediglich ein kleiner Raum, um den Befehl „onmouseover“ auszulösen (nur im Internetexplorer! Firefox nutzt den gesamten, von mir definierten Raum, auch im Bereich der Flashanimation). Als Lösung wollte ich nun zusätzlich einen Timeout-Befehl einbauen, was mir aufgrund meines laienhaften Fummlerstatus nicht gelungen ist. Nun hoffe ich, dass Ihr mit sagen könnt, wie der Befehl genau aussehen soll und wo ich ihn platzieren muss?

Übrigens meine Seite besteht aus zwei Frames (oben ist der Frame mit der Navi und unten ist der Frame mit dem Inhalt (in diesem klappt auch das Menü auf) und der Javacode ist in eine Datei ausgelagert.

Für Eure Tipps möchte ich mich bereits jetzt bedanken.



--------------------------------------------------------------------
--------------------------------------------------------------------




<!--%%Datei:menu.js%%-->
function init() {
if (ie4up) {
document.write("<div id=\"m1\" style=\"position:absolute; top:-200px; left:-1203px; background-color:#FFFFFF; z-index:2\"><\/div>\n");
document.write("<div id=\"m2\" style=\"position:absolute; top:-200px; left:512px; background-color:#FFFFFF; z-index:2\"><\/div>\n");
document.write("<div id=\"m3\" style=\"position:absolute; top:-200px; left:627px; background-color:#FFFFFF; z-index:2\"><\/div>\n");
document.write("<div id=\"m4\" style=\"position:absolute; top:-200px; left:758px; background-color:#FFFFFF; z-index:2\"><\/div>\n");
document.write("<div id=\"m5\" style=\"position:absolute; top:-200px; left:872px; background-color:#FFFFFF; z-index:2\"><\/div>\n");
document.write("<div id=\"st\" onmouseover=\"wegalle()\" style=\"position:absolute; top:-300px; left:0px; background-color:transparent; height:300px; width:1000px; z-index:1\"><\/div>\n");
}
if (ns4up) {
document.write("<layer id=\"m1\" top=\"-200\" left=\"-1203\" bgcolor=\"#FFFFFF\" z-index=\"2\"><\/layer>\n");
document.write("<layer id=\"m2\" top=\"-200\" left=\"515\" bgcolor=\"#FFFFFF\" z-index=\"2\"><\/layer>\n");
document.write("<layer id=\"m3\" top=\"-200\" left=\"631\" bgcolor=\"#FFFFFF\" z-index=\"2\"><\/layer>\n");
document.write("<layer id=\"m4\" top=\"-200\" left=\"762\" bgcolor=\"#FFFFFF\" z-index=\"2\"><\/layer>\n");
document.write("<layer id=\"m5\" top=\"-200\" left=\"875\" bgcolor=\"#FFFFFF\" z-index=\"2\"><\/layer>\n");
document.write("<layer id=\"st\" onmouseover=\"wegalle\" top=\"-300\" left=\"0\" height=\"300\" width=\"1000\" z-index=\"1\"><\/layer>\n");
}
if (ns6) {
document.write("<div id=\"m1\" style=\"position:fixed; top:-200px; left:-1203px; background-color:#FFFFFF; z-index:2\"><\/div>\n");
document.write("<div id=\"m2\" style=\"position:fixed; top:-200px; left:515px; background-color:#FFFFFF; z-index:2\"><\/div>\n");
document.write("<div id=\"m3\" style=\"position:fixed; top:-200px; left:631px; background-color:#FFFFFF; z-index:2\"><\/div>\n");
document.write("<div id=\"m4\" style=\"position:fixed; top:-200px; left:762px; background-color:#FFFFFF; z-index:2\"><\/div>\n");
document.write("<div id=\"m5\" style=\"position:fixed; top:-200px; left:875px; background-color:#FFFFFF; z-index:2\"><\/div>\n");
document.write("<div id=\"st\" onmouseover=\"wegalle()\" style=\"position:fixed; top:-300px; left:0px; background-color:transparent; height:300px; width:1000px; z-index:1\"><\/div>\n");
}
}

function erzeugen() {
var teil1="<table width=\"100\" bgcolor=\"#FFFFFF\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">";
teil1+="<tr><td><center><a class=\"menupunkt\" href=\"java.html\">-<\/a><\/td><\/tr>";
teil1+="<tr><td><a class=\"menupunkt\" href=\"java.html\">-<\/a><\/td><\/tr>";
teil1+="<tr><td><a class=\"menupunkt\" href=\"java.html\">-<\/a><\/td><\/tr>";
teil1+="<tr><td><a class=\"menupunkt\" href=\"java.html\">-<\/a><\/td><\/tr><\/table>";
var teil2="<table width=\"117\" bgcolor=\"#FFFFFF\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">";
teil2+="<tr><td><center><a class=\"menupunkt\" href=\"fussball.html\">Fussball<\/a><\/td><\/tr>";
teil2+="<tr><td><center><a class=\"menupunkt\" href=\"computer.html\">Computer<\/a><\/td><\/tr>";
teil2+="<tr><td><center><a class=\"menupunkt\" href=\"foto.html\">Foto<\/a><\/td><\/tr>";
teil2+="<tr><td><center><a class=\"menupunkt\" href=\"bl.html\">BL<\/a><\/td><\/tr><\/table>";
var teil3="<table width=\"132\" bgcolor=\"#FFFFFF\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">";
teil3+="<tr><td><center><a class=\"menupunkt\" href=\"winter.html\" >Winter<\/a><\/td><\/tr>";
teil3+="<tr><td><center><a class=\"menupunkt\" href=\"sommer.html\" >Sommer<\/a><\/td><\/tr>";
teil3+="<tr><td><center><a class=\"menupunkt\" href=\"fest.html\" >Fest<\/a><\/td><\/tr>";
teil3+="<tr><td><center><a class=\"menupunkt\" href=\"kind.html\" >Kind<\/a><\/td><\/tr>";
teil3+="<tr><td><center><a class=\"menupunkt\" href=\"auto.html\" >Auto<\/a><\/td><\/tr>";
teil3+="<tr><td><center><a class=\"menupunkt\" href=\"auto1.html\" >Auto1<\/a><\/td><\/tr><\/table>";
var teil4="<table width=\"117\" bgcolor=\"#FFFFFF\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">";
teil4+="<tr><td><center><a class=\"menupunkt\" href=\"oldies.html\">Oldies<\/a><\/td><\/tr>";
teil4+="<tr><td><center><a class=\"menupunkt\" href=\"quellen.html\">Quellen<\/a><\/td><\/tr>";
teil4+="<tr><td><center><a class=\"menupunkt\" href=\"schneiden.html\">Schneiden<\/a><\/td><\/tr>";
teil4+="<tr><td><center><a class=\"menupunkt\" href=\"sonstiges.html\">sonstiges<\/a><\/td><\/tr><\/table>";
var teil5="<table width=\"115\" bgcolor=\"#FFFFFF\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">";
teil5+="<tr><td><center><a class=\"menupunkt\" href=\"ftipp.html\" >Freizeittipps<\/a><\/td><\/tr>";
teil5+="<tr><td><center><a class=\"menupunkt\" href=\"vtipp.html\" >Versicherungen<\/a><\/td><\/tr>";
teil5+="<tr><td><center><a class=\"menupunkt\" href=\"stipp.html\" >Surftipps<\/a><\/td><\/tr>";
teil5+="<tr><td><center><a class=\"menupunkt\" href=\"links.html\" >Links<\/a><\/td><\/tr><\/table>";


if (ie4up) {
m1.innerHTML=teil1;
m2.innerHTML=teil2;
m3.innerHTML=teil3;
m4.innerHTML=teil4;
m5.innerHTML=teil5;
}
if (ns4up) {
document.m1.document.write (teil1);
document.m1.document.close();
document.m2.document.write (teil2);
document.m2.document.close();
document.m3.document.write (teil3);
document.m3.document.close();
document.m4.document.write (teil4);
document.m4.document.close();
document.m5.document.write (teil5);
document.m5.document.close();
}
if (ns6) {
document.getElementById("m1").innerHTML = teil1;
document.getElementById("m2").innerHTML = teil2;
document.getElementById("m3").innerHTML = teil3;
document.getElementById("m4").innerHTML = teil4;
document.getElementById("m5").innerHTML = teil5;
}
}

function zeige1() {
wegalle();
if (ie4up) {m1.style.pixelTop=document.body.scrollTop; st.style.pixelTop=document.body.scrollTop}
if (ns4up) {document.m1.top=document.pageYOffset; document.st.top=document.pageYOffset}
if (ns6) {document.getElementById("m1").style.top=0;document.getElementById("st").style.top=0}
}

function zeige2() {
wegalle();
if (ie4up) {m2.style.pixelTop=document.body.scrollTop; st.style.pixelTop=document.body.scrollTop}
if (ns4up) {document.m2.top=document.pageYOffset; document.st.top=document.pageYOffset}
if (ns6) {document.getElementById("m2").style.top=0;document.getElementById("st").style.top=0}
}

function zeige3() {
wegalle();
if (ie4up) {m3.style.pixelTop=document.body.scrollTop; st.style.pixelTop=document.body.scrollTop}
if (ns4up) {document.m3.top=document.pageYOffset; document.st.top=document.pageYOffset}
if (ns6) {document.getElementById("m3").style.top=0;document.getElementById("st").style.top=0}
}

function zeige4() {
wegalle();
if (ie4up) {m4.style.pixelTop=document.body.scrollTop; st.style.pixelTop=document.body.scrollTop}
if (ns4up) {document.m4.top=document.pageYOffset; document.st.top=document.pageYOffset}
if (ns6) {document.getElementById("m4").style.top=0;document.getElementById("st").style.top=0}
}

function zeige5() {
wegalle();
if (ie4up) {m5.style.pixelTop=document.body.scrollTop; st.style.pixelTop=document.body.scrollTop}
if (ns4up) {document.m5.top=document.pageYOffset; document.st.top=document.pageYOffset}
if (ns6) {document.getElementById("m5").style.top=0;document.getElementById("st").style.top=0}
}


function wegalle() {
if (ie4up) {
m1.style.pixelTop=-1200;
m2.style.pixelTop=-1200;
m3.style.pixelTop=-1200;
m4.style.pixelTop=-1200;
m5.style.pixelTop=-1200;
st.style.pixelTop=-1300;
}
if (ns4up) {
document.m1.top=-1200;
document.m2.top=-1200;
document.m3.top=-1200;
document.m4.top=-1200;
document.m5.top=-1200;
document.st.top=-1300;
}
if (ns6) {
document.getElementById("m1").style.top=-1200;
document.getElementById("m2").style.top=-1200;
document.getElementById("m3").style.top=-1200;
document.getElementById("m4").style.top=-1200;
document.getElementById("m5").style.top=-1200;
document.getElementById("st").style.top=-1300;
}
}


var ns4up = (document.layers)?1:0;
var ie4up = (document.all)?1:0;
var ns6 = (document.getElementById && !document.all)?1:0;
init();
erzeugen();



-------------------------------------------------------------------------
-------------------------------------------------------------------------
-------------------------------------------------------------------------
-------------------------------------------------------------------------




<!--%%Datei:oben.html%%-->
<html>
<head>
<title>oben - Frame mit Navi</title>



<head>

<body background="hi-bi.jpg" topmargin="100" leftmargin="463">

<table border="0" cellpadding="0" cellspacing="0" width="500">
<tr>

<td width="62"><img src="home.jpg"
border="0" width="00" height="20"></td>
<td> <img src="wb.gif" width="1" height="18"></td>
<td width="100"><img src="Hobbies.jpg"
border="0" width="100" height="20"></td>
<td> <img src="wb.gif" width="1" height="18"></td>
<td width="100"><img src="Bilder.jpg"
border="0" width="120" height="20"></td>
<td> <img src="wb.gif" width="1" height="18"></td>
<td width="100"><img src="Super8.jpg"
border="0" width="100" height="20"></td>
<td> <img src="wb.gif" width="1" height="18"></td>
<td width="70"><img src="tipps.jpg"
border="0" width="80" height="20"></td>


<td width="200" onmouseover="parent.unten.wegalle()">Javamenue</td>
</tr>
</table>
</body>
</html>



-------------------------------------------------------------------------
-------------------------------------------------------------------------
-------------------------------------------------------------------------
-------------------------------------------------------------------------


<!--%%Datei:unten.html%%-->
<html>

<head>

<title>unten - Frame mit Inhalt</title>


</head>


<body background="bi-hi.jpg">
<script type="text/javascript" src="menu.js"></script>



</body>
</html>
 
Also erstmal würde ich dir raten, dir ein besseres Menü runterzuladen oder zu machen (das wirst du nicht selbst gemacht haben), denn Cross-Browser-Dropdown-Menüs funktionieren sogar ohne JavaScript (+ ein paar Zeilen JS für IE 6).
Dieses Skript, welches du da verwendest, ist reinste Vergewaltigung.
Da in jedem Browser ein anderes HTML erzeugt wird ist es außerdem unmöglich das irgendwie zu debuggen und die Darstellungsfehler auszumerzen.
 
Bitte packe nächstes mal deinen Code in die sogenannten Code-Tags.
Bei deinem Code z.B: [code=html]Hier Code einfügen[/code]

Ich stimme CPoly zu, ein besseres Menü ist empfehlenswert ;)
Ich habe mal eine sehr tolle Website gefunden, die pure CSS-Menüs (mit Dropdowneffekt) kostenlos anbietet: cssmenumaker.com
Habe ich auch schon oft benutzt!
 
PaulKik hat gesagt.:
Problematisch ist jedoch das Ausblenden, so bleibt lediglich ein kleiner Raum, um den Befehl „onmouseover“ auszulösen (nur im Internetexplorer! Firefox nutzt den gesamten, von mir definierten Raum, auch im Bereich der Flashanimation).
Zum Vergrößern anklicken....
Wo versteckt sich denn diese Definition in deiner aufgetischten Code-Wurst?

Den Code für den Bereich (Frame) mit der Flashanimation such ich hier auch vergebens :p

Aber wie es meine Vorredner schon angedeutet haben: Es gibt weitaus zeitgemäßere Praxislösungen für Dropdown-Menüs, die (abgesehen von IE5.x u. IE6) ohne jegliches JavaScript auskommen.
 
Zuletzt bearbeitet:
Hallo,

erst einmal herzlichen Dank für Eure Antworten.

Ja, den Quelltext des Menüs habe ich nicht selbst geschrieben, sondern vor einigen Jahren auf einer Kostenlos-CD (Zeitungsbeilage) gefunden. Da die komplette Seite (bis auf die Flashanimation) bereits seit 6 Jahren existiert, hatte bzw. habe ich die Hoffnung, dass ich das bestehende Menü einfach erweitern kann, ohne die gesamte Seite überarbeiten zu müssen.

spicelab, den von mir definierten Bereich findest Du im obersten Quelltext
(<!--%%Datei:menu.js%%--> ) und hier in den Zeilen

ie4up:
document.write("<div id=\"st\" onmouseover=\"wegalle()\" style=\"position:absolute; top:-300px; left:0px; background-color:transparent; height:300px; width:1000px; z-index:1\"><\/div>\n"); .

ns4up:
document.write("<layer id=\"st\" onmouseover=\"wegalle\" top=\"-300\" left=\"0\" height=\"300\" width=\"1000\" z-index=\"1\"><\/layer>\n");

ns6:
document.write("<div id=\"st\" onmouseover=\"wegalle()\" style=\"position:fixed; top:-300px; left:0px; background-color:transparent; height:300px; width:1000px; z-index:1\"><\/div>\n");

Die Flashanimation befindet sich normalerweise im Quelltext <!--%%Datei:unten.html%%-->. Diesen habe ich aber bis auf den Menü-Verweis geleert, da ich dachte, es wäre übersichtlicher.

Viele Grüße


PS: Sorry für das erneute „einfache“ Einfügen von Codeteilen, aber aus irgendeinem Grund reagiert mein Firefox nicht auf das drücken der Code-Schaltfläche.
 
PaulKik hat gesagt.:
PS: Sorry für das erneute „einfache“ Einfügen von Codeteilen, aber aus irgendeinem Grund reagiert mein Firefox nicht auf das drücken der Code-Schaltfläche.
Zum Vergrößern anklicken....
Hast du vielleicht JavaScript geblockt, z.B. durch NoScript?
Eigentlich fügen diese Schaltflächen nur zusätzlichen Text ein, den du auch eingeben kannst. z.B. für HTML:

[code=html]Hier dein Code[/code]
 
Hallo,

nachdem ich leider mit dem Versuch einen Timeout-Befehl in das Menü einzubauen gescheitert bin, habe ich mich in nunmehr damit beschäftigt, ein neues Menü zu finden. Diesbezüglich habe ich (bisher) nicht auf den Tipp von ComFreek zurückgegriffen, da ich der Meinung bin, dass ich durch Versuch klug werde. Aus diesem Grunde habe ich mich mit dem nachfolgenden Menü (Quelle: selfhtml) auseinander gesetzt. Leider ist es mir nicht gelungen, dieses um eine dynamische sub-sub-Ebene (Seite 2b_1, Seite 2b_2 und Seite 2b_3) zu erweitern, die rechts neben der sub-Ebene aufgeht. Konkret bedeutet dies, dass meine Bemühungen bisher lediglich dazu geführt haben, dass die von mir eingefügte weitere Liste unter anstatt rechts neben dem Unterpunkt „Seite 2b“ der sub-Ebene „Seite 2“erscheint.

Für Tipps zur Lösung meines Problems möchte ich mich bereits jetzt danken!

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamisch Navigationsleisten auch im IE einblenden</title>
<style type="text/css">
  body {
    font: normal 100.01% Helvetica, Arial, sans-serif;
    color: black; background-color: #ffffe0;
  }

  div#Rahmen {
    width: 47.1em;
    padding: 0.8em;
    border: 1px solid black;
    background-color: silver;
  }
  * html div#Rahmen {  /* Korrektur fuer IE 5.x */
    width: 48.7em;
    w\idth: 47.1em;
  }
  div#Rahmen div {
     clear: left;
  }
  ul#Navigation {
    margin: 0; padding: 0;
    text-align: center;
  }

  ul#Navigation li {
    list-style: none;
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */
    position: relative;
    margin: 0.4em; padding: 0;
  }
  * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
    margin-bottom: -0.4em;
  }
  *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
    margin-bottom: -0.1em;
  }

  ul#Navigation li ul {
    margin: 0; padding: 0;
    position: absolute;
    top: 1.6em; left: -0.4em;
    display: none;  /* Unternavigation ausblenden */
  }
  * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
    left: -1.5em;
    lef\t: -0.4em;
  }
  *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
    background-color:silver; padding-bottom:0.4em;
  }
  ul#Navigation li:hover ul {
    display: block;  /* Unternavigation in modernen Browsern einblenden */
  }
  ul#Navigation li ul li {
    float: none;
    display: block;
    margin-bottom: 0.2em;
  }

  ul#Navigation a, ul#Navigation span {
    display: block;
    width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
    padding: 0.2em 1em;
    text-decoration: none; font-weight: bold;
    border: 1px solid black;
    border-left-color: white; border-top-color: white;
    color: maroon; background-color: #ccc;
  }
  * html ul#Navigation a, * html ul#Navigation span {
    width: 8.6em;   /* Breite nach altem MS-Boxmodell fuer IE 5.x */
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
  }
  ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
    border-color: white;
    border-left-color: black; border-top-color: black;
    color: white; background-color: gray;
  }
  li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
    color: maroon; background-color: silver;
  }
  ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
    background-color: maroon;
  }

</style>



<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("Navigation").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "none";
  }

  window.onload=hoverIE;
}
</script>

</head>
<body>
<h1 id="Beispiel">Dynamisch Navigationsleisten auch im IE einblenden</h1>

  <div id="Rahmen"><ul id="Navigation">
    <li><a href="#Beispiel">Seite 1</a></li>

    <li><a href="#Beispiel">Seite 2</a>
      <ul>
        <li><a href="#Beispiel">Seite 2a</a></li>
        <li><a href="#Beispiel">Seite 2b</a>
<ul>
		 <li><a href="#Beispiel">Seite 2b_1</a></li>
                 <li><a href="#Beispiel">Seite 2b_2</a></li>
                 <li><a href="#Beispiel">Seite 2b_3</a></li>
</ul>



</li>



      </ul>
    </li>

    <li><a href="#Beispiel">Seite 3</a></li>

    <li><a id="aktuell" href="#Beispiel">Seite 4</a>
      <ul>
        <li><a href="#Beispiel">Seite 4a</a></li>
	  <li><span>aktuelle Seite</span></li>
        <li><a href="#Beispiel">Seite 4c</a></li>
      </ul>
    </li>


    <li><a href="#Beispiel">Seite 5</a></li>
  </ul><div></div></div>

<p><a style="color:black" href="../navigationsleisten.htm#javascript">zurück</a></p>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück