Fragen sie sich nicht auch manchmal: "Okay, schickes Menü
- aber gibt's denn keine Möglichkeit es nur bei Bedarf ein- oder
auszublenden?". Doch: gibt es. Und das Schönste: es ist ganz einfach.
Menüs nachrüsten
Was die Sache besonders angenehm macht: niemand muss von seinem
alten Menü Abschied nehmen. Aber nicht nur Menüs lassen sich so nachrüsten,
das Gleiche gilt auch für Hinweistexte. Oder wie wäre es zum Beispiel mit
einer einblendbaren Onlinehilfe?
Variante 1: aus-/einblenden
HTML:
<FORM NAME="menue"
style="position: absolute">
[Menü-Inhalt]
</FORM>
Das eigentliche Menü wird mit einem Tag gekapselt,
dessen Eigenschaften wir via Skript verändern können. Sollte ihr Menü bereits einen "FORM"-Tag verwenden, wird das
nicht funktionieren - in diesem Fall wählen sie bitte "DIV" und
"ID=menue" statt "FORM" und "name=menue".
Das Attribut "style" und der Wert "position: absolute"
legen fest, dass dieses Menü über dem restlichen Text platziert werden
soll.
Fehlt noch ein Schalter zum Ein- oder Ausblenden des
Menüs Sie können statt einem "normalen" Standard-Button
natürlich auch eine Grafik verwenden. Wichtig ist nur, dass sie den
Inhalt des Attributs "onClick" übernehmen.
Beispiel:
Damit noch nicht genug: wer den größeren Aufwand nicht scheut,
kann alternativ auch ein Menü "sanft" ins Bild hinein und
herausfahren lassen...
Ein Schalter zum Ein- und Ausschalten Der Quellcode für den Schalter ist etwas länger, daher erzeugen wir
zwecks besserer Übersichtlichkeit die Funktion "slideMenu" und
kopieren den Code dort hinein.
JavaScript:
<SCRIPT language="JavaScript">
<!-- Autor: www.All-Community.de
// Hinweis auf Autor nicht entfernen!
var isOpen = false;
// gibt an, ob ausgeklappt oder nicht
var timer; // Hilfsvariable
var menu = document.menue.style; // Referenz
auf unser Menü
jetzt erzeugen wir eine Funktion für unseren Schalter:
function slideMenu() { if (!isOpen) { // wenn
Menü geschlossen
isOpen = true; slideIn(-300); //
einblenden
} else { // wenn Menü
geöffnet
isOpen = false; slideOut(0); //
ausblenden
};
};
einblenden...
function slideIn(a) {
// Zur Sicherheit wird zuerst geprüft,
// ob bereits geklickt wurde:
if (timer) { window.clearTimeout(timer); } if (a < 0) { // wenn
Menü noch eingeklappt, dann:
(menu).left = a; // lege die
Position fest
a = Math.ceil(a /1.2); //
berechne neue Position
// und jetzt rufen wir die gleiche Funktion um 10ms
// verzögert erneut auf:
timer = window.setTimeout("slideIn("+a+")", 10);
};
};
ausblenden... analog zur Funktion "slideIn"
function slideOut(a) { if (timer) { window.clearTimeout(timer); } if (a > -300) {
(menu).left = a;
a -= Math.ceil( (a+300) *0.05);
timer = window.setTimeout("slideOut("+a+")", 10);
};
};
// Ende des Skripts -->
</SCRIPT>
Tipps für Fortgeschrittene
Hinweis: Hier steht "(menu).left = a" kurz für "document.forms['menue'].style.left
= a". Für den Browser heißt dass: der Abstand vom linken
Bildschirmrand wird neu festgelegt. Würde man dies als HTML-Code
aufschreiben wollen, sollte sich ergeben: <FORM ID=menue
STYLE="left: a"> Es wird also auf die CSS-Anweisung
"left" des Attributs "style" zugegriffen und hier ein
neuer Wert, nämlich "a" übergeben. Die Einheit für
"a" ist Pixel.
Tipp:
Der "Trick" beim Einblenden besteht darin, mathematisch eine
zunächst schneller, dann langsamer gegen den Zielwert konvergierende
Zahlenreihe zu erzeugen. Rekursiv und zeitverzögert aufgerufen entsteht
so eine sanfte Bewegung. Eine solche Reihe ist zum Beispiel a = a - (a*c)
für a>0 und 0>c<1 konvergiert diese Folge gegen 0. Je kleiner der Wert c ist, umso sanfter wird
die Animation. Alle Skripte, bei denen es um "sanftes"
Einschweben von Objekten geht basieren auf diesem mathematischen Effekt.
Dateiversion:
diesen Beitrag diskutieren,
