Homepagebau
Dateiversion:
diesen Beitrag diskutieren,
ergänzen, eine Frage stellen
Menü einblenden
 

ausklappbare Menüs

Schwierigkeit: für Fortgeschrittene

 

Menü ein- und ausblenden:

Skript ausprobieren (hier klicken)

"Slide" - Seitenmenü: ermöglicht sanftes einschweben

Skript ausprobieren (hier klicken)


Beschreibung:

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.

<INPUT type="button" value="ein/ausblenden" onclick="document.menue.style.visibility = (document.menue.style.visibility == 'hidden') ? '' : 'hidden'">

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:

Hinweis:
Als Ergänzung zu diesem Skript bieten wir auch passende Navigationsskripte für ihre Homepage. Bei Interesse klicken sie bitte hier!

Damit noch nicht genug: wer den größeren Aufwand nicht scheut, kann alternativ auch ein Menü "sanft" ins Bild hinein und herausfahren lassen...

Variante 2: Menü einschweben

HTML:

<FORM NAME="menue" style="position: absolute">

[Menü-Inhalt]

</FORM>

siehe oben

<INPUT type="button" value="ein/ausblenden" onclick="slideMenu()">

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.

Sitemap:

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.

Beispiel: