 |
Animierte Menüs
Kompatibilität: Ms Internet
Explorer, Netscape
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
