Anpassen des Navigationsmenüs: Unterschied zwischen den Versionen

Version vom 30. Oktober 2010, 10:58 Uhr

In diesem Artikel erfahren Sie, wie Sie das dynamische Navigationsmenü anpassen können.

Achtung: Die hier beschriebenen Funktionen müssen vor der Ausgabe des Menüs aufgerufen werden.

Einträge sortieren

Sie können die Einträge des Navigationsmenüs nach verschiedenen Werten sortieren lassen. Dazu gibt uns DynPG zwei Funktionen zur Hand:

$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));

Die erste Anweisung legt den Sortierschlüssel fest (hier: der Index der Gruppe / des Artikels). Mögliche Sortierschlüssel sind:

• INDEX: Sortierindex des Eintrages
• NAME: Name des Eintrages
• CREATEDATE: Erstellungsdatum

Die zweite Anweisung sortiert die Einträge. Dabei hat man die Wahl zwischen auf- (ASC) und absteigend (DESC). In diesem Beispiel können sie nachvollziehen, wie der Aufruf funktioniert.

Grafiken für Menüpunkte

Eine Grafik für alle Gruppen

Um allen Gruppen, die im Navigationsmenü angezeigt werden eine Grafik zuzweisen, können wir die folgende CSS Angabe verwenden:

/* Alle <p>-Elemente innerhalb des Navigationsmenüs mit der Klasse groups*/
div#course_categories_menu p.groups
{
	background: url("menu_item.jpg") no-repeat left top;
}*/

Mit dem CSS-Selektor p.groups werden alle Menüpunkte erfasst, die im Backend eine Gruppe sind. Durch die CSS Angabe background wird diesen Elementen die Grafik menu_item.jpg als Hintegrundbild zugewiesen.

Eine Grafik für eine Gruppenebene

Um ein und dieselbe Grafik einer Ebene von Gruppen (z.B. Gruppen der obersten Ebene) zuzweisen, müssen wir das Stylesheet um folgenden Code erweitern:

/*===========================Hauptkategorien==============================*/
/*Hintergrundbilder für die Menüeinträge setzen*/
#navigation .level_0_r_i_exp, #navigation .level_0_r_i_exp_hover, 
#navigation .level_0_r_a_exp_hover, #navigation .level_0_r_a_exp
{
	background: url("menu_item.jpg") no-repeat left top;
	padding: 0px 0px 5px 0px;
}
/*Bezeichnungen für die Menüeinträge nach rechts verschieben*/
#navigation .level_0_r_i_exp p, #navigation .level_0_r_i_exp_hover p, 
#navigation .level_0_r_a_exp_hover p, #navigation .level_0_r_a_exp p
{
	position: relative;
	left: 40px;
}

Dieser Code liest sich folgendermaßen: Jedem Menüpunkt wird von DynPG automatisch eine CSS-Klasse zugeordnet, mit der wir in die Lage versetzt werden die einzelnen Eigenschaften zu setzen. Folgende Gruppen werden hier referenziert:

• level_0_r_i_exp: inaktiver(noch nicht geklickter) Menüpunkt
• level_0_r_i_exp_hover: inaktiver(noch nicht geklickter) Menüpunkt auf dem die Maus steht
• level_0_r_a_exp: aktiver(geklickter) Menüpunkt
• level_0_r_a_exp_hover: aktiver(geklickter) Menüpunkt auf dem die Maus steht

Hinweis: Mehr zu den verschiedenen CSS Klassen dieser Art erfahren Sie in der Moduldokumentation zur dynamischen Navigation im Abschnitt CSS.

Verschiedene Grafiken für einzelne Menüpunkte

Nun soll jeder Menüpunkt eine eigene Grafik erhalten und diese soll sich zudem ändern, wenn man mit der Maus daraufzeigt. Dazu müssen wir wieder das Stylesheet abändern:

#group_fold_1 .level_0_r_i_exp 
{
	background: url("images/menu_item1.jpg") no-repeat left top;
}
 
#group_fold_1 .level_0_r_i_exp_hover, 
#group_fold_1 .level_0_r_a_exp_hover, #group_fold_1 .level_0_r_a_exp
{
	background: url("images/menu_item2.jpg") no-repeat left top;
}

Auch hier wird jedem Menüpunkt eine Klasse zugeordet. Gruppen im Navigationsmenü werden von divs mit dem Namen group_fold_ID (wobei "ID" die ID der Gruppe ist) umschlossen. Da die Namen (bzw. IDs) dieser divs eindeutig sind, können wir mit ihrer Hilfe jedem Menüpunkt eine eigene Grafik zuordnen. Hier ist der Menüpunkt eine Gruppe mit der ID "1". Mit .level_0_r_i_exp beziehen wir uns auf den Menüpunkt, der nicht aktiv (nicht angeklickt oder mit dem Mauszeiger berührt) ist. In diesem Zustand soll ihm die Grafik menu_item1.jpg zugewiesen werden.

Wenn er aktiv ist (also angeklickt oder mit dem Mauszeiger berührt wird), dann soll er die Grafik menu_item2.jpg erhalten. Auf diese Weise können Sie Grafiken für weitere Menüpunkte festlegen.

Hier finden Sie das CSS-Codebeispiel dafür.

Artikel bei einem Klick auf einen Menüpunkt anzeigen

→ Hauptartikel: Gruppeninhalte

Standardmäßig wird bei einem Klick auf eine Gruppe im Hauptmenü immer eine Artikelliste (sowohl im Menü als auch im Anzeigefenster) dargestellt. Nun wollen wir erreichen, dass bei einem Klick ein bestimmter Artikel angezeigt wird. Dazu müssen wir lediglich im Backend den Gruppeninhalt der Gruppe festlegen. Navigieren Sie dazu im Backend zu der betreffenden Gruppe und klicken Sie auf das Editieren-Symbol. Geben Sie bei Gruppeninhalt nun den Artikel an, der in der Webseite bei einem Klick auf den Gruppennamen angezeigt werden soll.

Auf andere Dateien verlinken

Sie haben auch die Möglichkeit, aus dem Navigationsmenü heraus auf eine andere Datei zu verlinken. Dazu existieren die folgenden zwei Befehle:

$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../index2.php');
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_subpages', array(1 => '../details.php{query}'));

Funktion 1 legt die PHP-Datei fest, die zum Anzeigen sämtlicher Menüpunkte verwendet werden soll (hier: index2.php). Wird diese Funktion nicht augerufen, so wird standarmäßig die gleiche Datei verwendet, in der sich auch der Code mit dem dynamischen Menü befindet.

Funktion 2 legt die Datei fest, die zum anzeigen der Gruppe mit der ID 1 verwendet werden soll. Somit überschreibt Funktion 2 die Einstellungen von Funktion 1 für die Gruppe mit der ID 1. Wenn man nun im Navigationsmenü auf die Gruppe mit der ID 1 klickt, wird statt dem Code von index.php, der von details.php aufgerufen. Sie können natürlich auch für mehrere Gruppen ein Verlinkungsziel angeben. Geben Sie dazu innerhalb der Klammern der array Anweisung die Gruppen in der Form ID => 'ZIELDATEI{query}' an, wobei ID die ID der Gruppe ist und ZIELDATEI der Pfad zur Zieldatei. Die Endung {query}ist dabei wichtig, damit DynPG den Link zur Datei richtig erstellt.

Achtung: Bei dem Pfad für die anzugebenen Dateien wird von dem Standard-Pfad von DynPG ausgegangen (dem in dem die getcontent.php liegt), nicht von dem der Datei in dem die Funktion aufgerufen wird.

Achtung: Hat man für eine Gruppe eine andere Datei festgelegt, dann wird diese Datei nicht zwingend auch für die Untergruppen verwendet! Man muss auch explizit für die Untergruppen die zu verwendenden Dateien angeben.

Beispiel

Auf eine externe Seite verlinken

Um einen Menüpunkt auf eine externe Seite verlinken zu lassen, können Sie den folgenden Code verwenden:

$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_subpages', array(1 => 'counter.php?inc=http://www.dynpg.org'));

Ersetzen Sie hier einfach den Wert von inc durch die Webseite, auf die Sie verlinken möchten.