Animierte Menüs
Die Tatsache, dass Stile andere Seiteninhalte überdecken können,
ist für Menüs von grossem Vorteil: So lassen sich aufklappbare Menüleisten
programmieren, deren Unterpunkte nur dann zu sehen sind, und damit
Platz auf der Seite beanspruchen, wenn der Benutzer auf die Menüpunkte
klickt. Im folgenden entwerfen für eine Beispielanwendung für ein
solches Menü. Als zusätzlicher Effekt "klappen" die Menüs
nicht einfach auf, sondern "rollen" weich von oben herein.
Nach der üblichen HTML-Einleitung
<html><head><title>Rollmenue</title>
folgen wieder die entsprechenden Stil-Definitionen:
<style>
#essenmenu
{
positeon: absolute;
top: 0;
left: 0;
z-index: 1;
}
#essen
{
positeon: absolute;
top: -120;
left: 0;
z-index: 0;
}
#trinkenmenu
{
positeon: absolute;
top: 0;
left: 60;
z-index: 1;
}
#trinken
{
positeon: absolute;
top: -92;
left: 60;
z-index: 0;
}
</style>
Wir haben vier verschiedene Stile definiert: Je einen für das
Hauptmenü und je einen für das Untermenü. Die Lage, der
"z-index" der Hauptmenüs ist dabei eine Ebene über den
Untermenüs, so dass die Untermenüs von den Hauptmenüs überdeckt
werden. Dann, noch im "<head>..</head"-Teil,
folgen wieder die Javascript-Funktionen:
<script
language="JavaScript">
var eypos=-124, ejump=-4;
var typos=-92, tjump=-4;
var delay=2;
function do_essen()
{
if(typos>-92)
{
tjump=-4;
if(typos>=30)
trinken_fahren();
}
ejump=-ejump;
if(eypos<=-122 || eypos>=30)
essen_fahren();
}
function essen_fahren()
{
if(document.layers) document.essen.top=eypos; else
document.all.essen.style.top=eypos;
eypos+=ejump;
if(eypos>-122 && eypos<30)
setTimeout("essen_fahren()", delay);
}
function do_trinken()
{
if(eypos>-122)
{
ejump=-4;
if(eypos>=30)
essen_fahren();
}
tjump=-tjump;
if(typos<=-92 || typos>=30)
trinken_fahren();
}
function trinken_fahren()
{
if(document.layers) document.trinken.top=typos; else
document.all.trinken.style.top=typos;
typos+=tjump;
if(typos>-92 && typos<30)
setTimeout("trinken_fahren()", delay);
}
</script>
</head>
Die Hauptfunktionen "do_essen()" und
"do_trinken()" aktivieren erst die Funktionen, die die
Bewegung ausführen, "essen_fahren()" und
"trinken_fahren()". Die erste "if"-Abfrage
testet dabei, ob vielleicht das andere Untermenü ausgefahren ist -
da wir immer nur eines auf einmal sichtbar haben wollen, aktivieren
wir die entsprechende Routine, die es zurückfahren lässt. Dann
drehen wir vom eigenen Untermenü die Fahrtrichtung um -- wenn es
nicht sichtbar ist, soll es ausfahren und wenn es ausgefahren ist,
soll es zurückfahren. Da Javascript in der Lage ist, mehrere
Funktionen gleichzeitig laufen zu lassen, müssen wir sicher gehen,
dass die Fahr-Routine nicht schon läuft, sonst würden wir, wenn
ein Benutzer mehrmals schnell hintereinander klickt, mehrmals die
Funktion starten. Beim Zuweisen der Positeon müssen wir auf die
beiden Browser-Typen testen und entsprechende Befehle verwenden.
Jetzt folgt der Rest der HTML-Seite:
<body link=ffffff>
<div id=essenmenu>
<table width=60 height=30 bgcolor=ff0000 cellspacing=0>
<tr><td align=middle><a
href="javascript:do_essen()"><b>Essen</b></a>
</table>
</div>
<div id=trinkenmenu>
<table width=60 height=30 bgcolor=ff0000 cellspacing=0>
<tr><td align=middle><a
href="javascript:do_trinken()"><b>Trinken</b></a>
</table>
</div>
<div id=essen>
<table bgcolor=ff8000 width=80 height=120 cellspacing=0>
<tr><td>Brot
<tr><td>Butter
<tr><td>Wurst
<tr><td>Käse
</table>
</div>
<div id=trinken>
<table bgcolor=ff8000 width=80 height=90 cellspacing=0>
<tr><td>Wasser
<tr><td>Bier
<tr><td>Limonade
</table>
</div>
Hier definieren wir der Reihe nach die beiden Hauptmenüs und
dann die beiden Untermenüs. Da die Untermenüs zu Beginn eine
negative Positeon (-92, resp. -122) haben, sind sie erstmal nicht zu
sehen. Die Tabellen sind nur zur Verschönerung da, damit auch alle
Einträge dieselbe Grösse haben. Dann kommt ganz normal der Inhalt
der Seite:
<br><br>
<h2>Willkommen im Wirtshaus zum Eber.</h2>
Bitte wählen Sie aus unserem reichhaltigen Menü die Speisen und
Getränke, mit denen wir Ihren Gaumen verwöhnen dürfen. Unser
freundliches Personal wird Ihnen sogleich jeden Ihrer Wünsche erfüllen.
</body>
</html>
Zuerst lassen wir 2 Zeilen für das Menü frei. Der nun folgende
Text ist ganz normaler HTML-Text. Das Schöne ist: Er wird zwar,
wenn ein Menü ausgefahren ist, überlappt, aber ist danach wieder
ganz normal sichtbar.
| 
DIENSTE
