Menü

Das Symbol für das Menü-Element in der Objektpalette

Um eine WebYep-Seite - wie zB. eine Produktinfoseite - mehrfach verwenden zu können (also zB. zur Präsentation mehrerer Produkte), wird das WebYep-Menü-Element eingesetzt. Dadurch muss nicht für jedes Produkt eine eigene HTML-Seite erstellt werden.

Es genügt eine Seite, für die WebYep mit Hilfe des Menü-Elementes mehrere sogenannte "Instanzen" erzeugt. Somit kann die selbe WebYep-Seite mit verschiedenen Inhalten (für verschiedene Produkte) angefüllt werden und mit dem Menü-Element wird dann ausgewählt, welche "Instanz" der Seite, also mit den Inhalten welches Produktes, jeweils angezeigt werden soll.

Für jeden Menüpunkt wird dann also eine Instanz der selben Zielseite, sozusagen eine "virtuelle Kopie", erzeugt. Alle WebYep Elemente dieser Seite können für jede Instanz unterschiedliche Inhalte haben. Ein WebYep Bild Element in der Zielseite zum Beispiel kann ein anderes Bild zeigen, je nachdem, welcher Menüpunkt angeklickt wurde.

Dieses WebYep Element wird durch folgenden PHP Code repräsentiert:

<?php webyep_menu("Feldname", false, "die_seite.php", "einFrame", "", ""); ?> Details...

Die Menüpunkte können von den BenutzerInnen direkt im Webbrowser (im Menü-Bearbeiten-Fenster) verändert, hinzugefügt, gelöscht werden und sie können auch die Reihenfolge der Menüpunkte festlegen.

Das Menü-Element in Aktion - durch Klicken auf den Bearbeiten-Knopf ("Produktmenü bearbeiten ")
öffnet sich das Menü-Bearbeiten-Fenster

Das Menü-Bearbeiten-Fenster

---

Hierarchische Menüs definieren

Die BernutzerInnen können eingerückte Menüpunkte (Untermenüpunkte) erzeugen, indem Sie dem Menüeintrag ein oder mehrere Leerzeichen (oder Unterstriche "_") vornstellen. Sie können auch Untermenütitel erzeugen (die üblicherweise ein Untermenü einleiten), indem sie einem Menüeintrag eine Raute ("#") vornstellen.

Ein typisches hierarchisches Menü könnte also folgendermaßen aussehen:

Erster Hauptmenüeintrag
Zweiter Hauptmenüeintrag
#Ein Untermenütitel
_Erster Untermenüeintrag
_Zweiter Untermenüeintrag
Dritter Hauptmenüeintrag

Zusätzlich kann das Verhalten der Menüpunkte noch beeinflusst werden, indem Sie nach dem Text eines Menüeintrags eine Raute anfügen oder vor den Text ein Prozentzeichen stellen:

Untermenütitel mit einer Seite verknüpfen

Normalerweise öffnet ein Untermenütitel keine Seite – er fungiert lediglich als Überschrift für die Untermenüpunkte. Wenn Sie aber an den Text des Untermenütitels eine Raute anfügen, dann wird bei einem Klick darauf ebenso eine Seite geöffnet, wie bei einem normalen Menüpunkt:

#Ein Untermenütitel, der auch eine Seite öffnet#

Einzelnen Menüpunkten individuelle URLs zuweisen

Normalerweise öffnen alle Menüpunkte die selbe Seite – die Zielseite des Menü Elementes. Sie können aber einzelne Menüpunkte auch andere Seiten öffnen lassen. Dazu muss der URL der gewünschten Seite nach einer Raute an den Text des Menüeintrags angehängt werden. Wenn die Seite im selben Ordner wie die normale Zielseite des Menü Elementes liegt, muss nur der Dateiname angegeben werden, ansonsten muss der vollständige URL angegeben werden:

Ein Menüeintrag, der eine alternative Seite öffnet#andere_seite.php
Auch so ein Menüeintrag#/anderer_ordner/andere_seite.php

Wichtig: Nachdem die alternative Zielseite ja üblicherweise auch das selbe Menü anzeigen soll, muss das Menü Element in dieser Seite ebenfalls platziert werden. Damit das Menü Element aber in allen Seiten die selben Menüeinträge zeigt, muss seine "Inhalte"-Eigenschaft auf "für alle Seiten" gestellt werden (global=true). Wenn die alternative Zielseite in einem anderen Ordner liegt, müssen außerdem alle Seiten (die normale Zielseite des Menü Elements und alle alternativen Zielseiten) als absolute URLs (inkl. voller Pfadangabe) angegeben werden.

Menüpunkte ausblenden

Um einen Menüpunkt auszublenden, muss nur dem Text des Menüpunkts ein Prozentzeichen ("%") vorangestellt werden:

%Ein ausgeblendeter Menüpunkt

Manuelle Zeilenumbrüche in Menüpunkten

Fügen Sie einen Backslash (umgekehrter Schrägstrich, "\") in den Text des Menüpunktes ein, um einen Zeilenumbruch zu erzeugen.

Dynamische oder statische Menüs

Ein WebYep Menü wird durch die HTML Tags <ul> und <li>, also eine Aufzählungsliste, repräsentiert. Untermenüzweige werden durch Verschachteln solcher Listen generiert. Diese Untermenüs können dynamisch auf- und zugeklappt werden, indem auf einen Untermenütitel geklickt wird, wenn in der WebYep Konfiguration (konfiguration.php) die Verwendung von JavaScript aktiviert ist (was die Standardeinstellung ist):

$webyep_sMenuType = "listJS";

Tragen Sie hier den Wert "list" ein, um nur statische Menüs ohne JavaScript zu erzeugen.

Beachten Sie, dass das Menü-Element JavaScript im "listJS"-Modus lediglich defensiv einsetzt: Wenn JavaScript nicht zur Verfügung steht, wird automatisch ein statisches Menü (in dem alle Menübäume eingeblendet sind) erzeugt. Dies stellt auch einen barrierefreien Zugang zum Menü sicher.

Wenn die Konfigurationseinstellung

$webyep_bAutoCloseMenus

in der konfiguration.php auf true gestellt wird, werden beim Öffnen eines Menüzweiges alle anderen automatisch geschlossen.

Wenn die Konfigurationseinstellung

$webyep_bRememberOpenMenus

in der konfiguration.php auf false gestellt wird, werden die geöffneten Menüzweige nicht gespeichert – sobald eine neue Seite geöffnet wird, werden alle Zweige automatisch geschlossen, außer der, zu dem die aktuelle Seite gehört.

Gestalten des Menüs

WebYep vergibt beim generieren des HTML-Codes für jeden Menüeintrag einen oder mehrere CSS-Klassen, je nachdem welcher Art der Eintrag ist (normaler Menüeintrag oder Untermenütitel) bzw. in welchem Status er sich befindet (selektiert, aufgeklappt). Indem Sie in Ihrem Stylesheet oder direkt in Ihrer Seite CSS-Stile für diese Klassen definieren, können Sie das Aussehen des Menüs detailliert beeinflussen.

Liste der CSS-Klassen:

Jeder Menüeintrag besteht aus einem <li>-Tag der einen <a>-Tag (Link) enthält. Die CSS-Klassen werden beiden Tags zugewiesen. Manchmal werden auch mehr als nur eine CSS-Klasse zugewiesen. Der Titel eines ausgeklappten Untermenüs wird z.B. die beiden Klassen "WebYepMenuTitle" und "WebYepMenuTitleExpanded" zugewiesen bekommen.

Hinweis: Auf unserer Website gibt es Beispiele für die Verwendung von CSS zum Gestalten von Menüs: http://www.obdev.at/webyep/

---

Eigenschaften des Menü-Elementes

Das Eigenschaftsfenster für das Menü-Element

Menüname

Eine Bezeichnung für das Menü-Element. Der Menüname wird in der Webseite im "Bearbeiten"-Modus angezeigt, damit die BenutzerInnen bei der Eingabe die verschiedenen Menü-Elemente unterscheiden können.

Inhalte

Ist hier "für diese Seite" eingestellt, so ist dieses Menü von den Menüs anderer Seiten unabhängig, auch wenn diese den gleichen Menünamen aufweisen. Wenn Sie das Menü auf mehreren Seiten platzieren möchten, ist diese Einstellung auf "für alle Seiten" zu setzen.

Seite (URL)

Name (bzw. vollständiger URL) der Seite, die beim Klick auf einen Menüeintrag angezeigt werden soll (die Zielseite). Meist wird das der Name der Seite sein, in der sich das Menü-Element befindet (die Seite verweist also sozusagen auf sich selbst).

Ziel (frame) - bei Verwendungen von Rahmen (target frame)

Wenn die unter der Eigenschaft "Seite (URL)" angegebene Seite beim Klick auf einen Menüeintrag in einem anderen Rahmen dargestellt werden soll, ist bei der Eigenschaft "Ziel (frame)" der Name des betreffenden Rahmens anzugeben.

---