nicht angemeldet
sticky menu
Ich möchte ein sticky menu erzeugen, also eins, das beim scrollen immer im
sichtbaren Bereich bleibt. Dazu beutze ich folgendes css und folgendes JavaScript:
<script language="JavaScript">
function setVariables()
{
if (navigator.appName == "Netscape")
{
dS="document.";
sD="";
v=".top=";
y="window.pageYOffset+10";
}
else
{dS="";
sD=".style";
v=".pixelTop=";
y="document.body.scrollTop+10";}
}
function checkLocation()
{
object="Navi";
yy=eval(y);
if (navigator.appName == "Netscape"){eval(dS+object+v+yy);}
else {eval(object+sD+v+yy);}
setTimeout("checkLocation()",100)
}
</script>
<style type="text/css">
.rot {background-color:#F82800;}
.textnavi {color:#505050;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
a.textnavi:hover
{color:#505050;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
text-decoration: underline;
}
a.textnavi:active
{color:#505050;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
a.textnavi:visited
{color:#505050;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
text-decoration: none;
}
.textnavi1
{color:#FFFFFF;
font-family: Arial,Helvetica,sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
text-indent:2px;
text-decoration: none;
}
.text {color:#202020;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
font-style: normal;
text-indent: 10px;
text-align: justify;
}
</style>
Die JS-Funktionen werden im body durch onLoad aufgerufen. Das geht alles.
Aber Netscape 4.x interpretiert dann auf einmal die class-Zuweisungen für
die einzelnen Tags nicht mehr. Ich hab also ein sticky menu, das voll mies
aussieht. Ohne das Script werden die css-classes wieder interpretiert.
Was sollte ich anders machen?
Hier noch der Code für das menu:
<script language="JavaScript">
if (navigator.appName == "Netscape")
{document.write("<layer id="Navi" style="position:absolute;top:10px;left:10px;z-index:2;">")}
else
{document.write("<div id="Navi" style="position:absolute;visibility:show;top:10px;left:570px;z-index:2;">")}
</script>
<table width="100" cellspacing="0" cellpadding="0" border="0">
<tr><td class="rot" rowspan="11"><img src="images/spacer.gif" width="1" height="150" border="0" alt=""></td>
<td class="rot" colspan="3"><img src="images/spacer.gif" width="118" height="1" border="0" alt=""></td>
<td class="rot" rowspan="11"><img src="images/spacer.gif" width="1" height="150" border="0" alt=""></td></tr>
<tr><td rowspan="10"><img src="images/spacer.gif" width="2" height="1" border="0" alt=""></td>
<td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td>
<td rowspan="10"><img src="images/spacer.gif" width="2" height="1" border="0" alt=""></td></tr>
<tr><td style="background-image:url(images/gelb.gif);" class="navi1">
<a href="#top" class="textnavi1">Mittwoch:</a></td></tr>
<tr><td class="textnavi">
<a href="#screen1" class="textnavi">DIY Revisited</a><br>
<a href="#screen2" class="textnavi">Twisted Love Stories</a><br>
<a href="#inter" class="textnavi">Interactive Art</a></td></tr>
<tr><td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td></tr>
<tr><td style="background-image:url(images/gruen.gif);">
<a href="#d2" class="textnavi1">Donnerstag:</a></td></tr>
<tr><td class="textnavi">
<a href="#public" class="textnavi">Public Space Invaders</a><br>
<a href="#strange" class="textnavi">Strange Guys</a></td></tr>
<tr><td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td></tr>
<tr><td style="background-image:url(images/blau.gif);">
<a href="#d3" class="textnavi1">Freitag:</a></td></tr>
<tr><td class="textnavi">
<a href="#ctrl" class="textnavi">CTRL Space</a><br>
<a href="#awimage" class="textnavi">Award:Image</a><br>
<a href="#nybble" class="textnavi">NYBBLE Engine</a><br>
<a href="#soft" class="textnavi">Software Speculations</a></td></tr>
<tr><td><img src="images/spacer.gif" width="1" height="3" border="0" alt=""></td></tr>
<tr><td class="rot" colspan="5"><img src="images/spacer.gif" width="120" height="1" border="0" alt=""></td></tr>
</table>
<script language="JavaScript">
if (navigator.appName == "Netscape")
{document.write("</layer>")}
else {document.write("</div>")}
</script>
-
Moin!
Die JS-Funktionen werden im body durch onLoad aufgerufen. Das geht alles.
Aber Netscape 4.x interpretiert dann auf einmal die class-Zuweisungen für
die einzelnen Tags nicht mehr. Ich hab also ein sticky menu, das voll mies
aussieht. Ohne das Script werden die css-classes wieder interpretiert.
Was sollte ich anders machen?Achtung, die Antwort löst dein Problem nicht direkt, zeigt aber die Richtung auf, in die die Zukunft geht:
Ein ordentlicher, standardkonformer Browser braucht für so ein "sticky menu" kein Javascript, sondern nur eine "passende" CSS-Angabe: position:fixed.
Das funktioniert prima in allen neuen Browsern wie Opera und Mozilla/Netscape 6. Netscape 4 kann das natürlich nicht, und auch die Entwickler des Internet Explorer waren zu doof, es endlich in Version 6 einzubauen. Für diese Browser solltest du eine Doppel-Anweisung im CSS definieren: position:absolute; position:fixed; Dann wissen diese dummen Browser zumindest, daß sie den Layer (das Menü muß unbedingt in einen DIV-Layer) fest positioniern müssen - und er scrollt eben aus dem Bild raus, was ich weniger nervig finde, als das ständige Gezittere, weil das Menü alle Zehntelsekunde neu positioniert werden muß.
Da du den Bereich "DESIGN" gewählt hast, also mein guter Tipp: Designe so, daß ein fest positionierter Layer ganz gut aussieht, und ein mitscrollender Layer nicht allzu böse aussieht. Dann hast du am wenigsten Probleme.
- Sven Rautenberg