Anpassen des Navigationsmenüs: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
K
 
(7 dazwischenliegende Versionen des gleichen Benutzers werden nicht angezeigt)
Zeile 2: Zeile 2:
 
{{Dynamische Navigation}}
 
{{Dynamische Navigation}}
  
−
In diesem Artikel, wie Sie das dynamische Navigationsmenü anpassen können.
+
In diesem Artikel erfahren Sie, wie Sie das dynamische Navigationsmenü anpassen können.
−
== Grafiken für die Menüpunkte ==
+
−
Da nun bereits ein fertiges Menü-Grundgerüst steht, ist es ein leichtes, Grafiken für die einzelnen Menüpunkte einzufügen. Sazu müssen wir lediglich die Stylesheet-Datei '''style.css''' um folgenden Code erweitern:
+
−
<code>[css,N]
+
−
/*===========================Hauptkategorien==============================*/
+
−
/*Hintergrundbilder für die Menüeinträge setzen*/
+
−
#hauptmenue .level_0_r_i_exp, #hauptmenue .level_0_r_i_exp_hover,
+
−
#hauptmenue .level_0_r_a_exp_hover, #hauptmenue .level_0_r_a_exp
+
−
{
+
−
background: url("images/note.gif") no-repeat left top;
+
−
padding: 0px 0px 5px 0px;
+
−
}
+
−
/*Bezeichnungen für die Menüeinträge positionieren*/
+
−
#hauptmenue .level_0_r_i_exp p, #hauptmenue .level_0_r_i_exp_hover p,
+
−
#hauptmenue .level_0_r_a_exp_hover p, #hauptmenue .level_0_r_a_exp p
+
−
{
+
−
position: relative;
+
−
left: 40px;
+
−
}
+
−
/*===========================Sub-Kategorien==============================*/
+
−
/*Bezeichnungen für die Menüeinträge positionieren*/
+
−
#hauptmenue .level_1_r_i_exp p, #hauptmenue .level_1_r_i_exp_hover p,
+
−
#hauptmenue .level_1_r_a_exp_hover p, #hauptmenue .level_1_r_a_exp p
+
−
{
+
−
position: relative;
+
−
left: 60px;
+
−
}
+
−
/*===========================Sub-Sub-Kategorien==============================*/
+
−
/*Bezeichnungen für die Menüeinträge positionieren*/
+
−
#hauptmenue .level_2_r_i_exp p, #hauptmenue .level_2_r_i_exp_hover p,
+
−
#hauptmenue .level_2_r_a_exp_hover p, #hauptmenue .level_2_r_a_exp p
+
−
{
+
−
position: relative;
+
−
left: 60px;
+
−
}
+
−
</code>
+
−
Um diesen Code zu verstehen, müssen wir zunächst ein paar Dinge klären. Jedem Menüpunkt wird von DynPG in CSS automatisch eine Klasse zugeordnet mit der wir in die Lage versetzt werden die einzelnen Eigenschaften zu setzen. Folgende Gruppen gibt es:
+
  
−
* '''level_0_r_i_exp:''' inaktiver(noch nicht geklickter) Menüpunkt
+
{{Caution
−
* '''level_0_r_i_exp_hover:''' inaktiver(noch nicht geklickter) Menüpunkt auf dem die Maus steht
+
|Die hier beschriebenen Funktionen müssen '''vor''' der Ausgabe des Menüs aufgerufen werden.}}
−
* '''level_0_r_a_exp:''' aktiver(geklickter) Menüpunkt
+
−
* '''level_0_r_a_exp_hover:''' aktiver(geklickter) Menüpunkt auf dem die Maus steht
+
  
−
All diese Klassen beziehen sich auf Menüpunkte des Typs ''Level 0'', also die Hauptpunkte / Punkte der obersten Kategorie. Für Menüpunkte des Typs ''Level X'' gibt es natürlich auch Klassen:  
+
== 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:  
  
−
* '''level_X_r_i_exp:''' inaktiver(noch nicht geklickter) Menüpunkt
+
<code>[php,Y]
−
* '''level_X_r_i_exp_hover:''' inaktiver(noch nicht geklickter) Menüpunkt auf dem die Maus steht
+
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
−
* '''level_X_r_a_exp:''' aktiver(geklickter) Menüpunkt
+
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
−
* '''level_X_r_a_exp_hover:''' aktiver(geklickter) Menüpunkt auf dem die Maus steht
+
</code>
  
−
Wobei X im Bereich von 0 bis 3 liegt! Ist ein Menüpunkt eine Gruppe werden alle seine Untergruppen bzw. Unterartikel in einem Div mit dem Namen
+
Die erste Anweisung legt den Sortierschlüssel fest (hier: der Index der Gruppe / des Artikels). Mögliche Sortierschlüssel sind:
  
−
* '''''group_fold_ID'''''
+
* <tt>INDEX</tt>: [[Artikel erstellen#Weitere Einstellungen|Sortierindex]] des Eintrages
 +
* <tt>NAME</tt>:  Name des Eintrages
 +
* <tt>CREATEDATE</tt>: Erstellungsdatum
  
−
zusammengefasst, wobei <tt>ID</tt> für die ID der Gruppe steht (diese wird beim Erstellen generiert und kann im Backend bzw. im generierten Html-Code (Browser) nachgelesen werden). Jetzt wird sicher auch klar wie der Code in style.css zu verstehen ist, in der nur Menüeinträge bis Level2 formatiert werden. Den vollständigen Code und ein laufendes Beispiel kann man sich [[CSS Einfaches Hauptmenü mit Bildern|hier]] anschauen.
+
Die zweite Anweisung sortiert die Einträge. Dabei hat man die Wahl zwischen auf- (<tt>ASC</tt>) und absteigend (<tt>DESC</tt>).
  
−
== Verschiedene dynamische Grafiken für Menüpunkte ==
+
== Grafiken für Menüpunkte ==
−
Im vorherigen Beispiel haben wir Grafiken für die Menüpunkte eingefügt, nun soll jeder Menüpunkt seine eigene Grafik erhalten und diese soll sich zudem ändern, wenn man mit der Maus daraufzeigt. Das hört sich zwar schon etwas komplizierter an, tatsächlich müssen wir aber wieder "nur" die ''style.css'' ändern, der eigentliche Code für das Menü bleibt so bestehen.
+
  
−
[[CSS Einfaches Hauptmenü mit verschiedenen Bildern und Hovereffekt|Hier]] können der CSS-Code und das ausführbare Beispiel betrachtet werden.
+
=== 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:
−
''Erklärung:'' Im vorigen Beispiel stellten wir bereits fest, dass jedem Menüpunkt eine Klasse zugeordet wird und das Menüpunkte die Gruppen sind von divs mit dem Namen <tt>group_fold_ID</tt> (wobei "ID" die ID der Gruppe ist) umschlossen werden. Da die Namen (bzw. IDs) dieser divs eindeutig sind, können wir mit ihrer Hilfe jedem Menüpunkt eine eigene Grafik zuordnen:  
+
  
 
<code>[css,N]
 
<code>[css,N]
−
#group_fold_6 .level_0_r_i_exp
+
/* Alle <p>-Elemente innerhalb des Navigationsmenüs mit der Klasse groups*/
 +
div#course_categories_menu p.groups
 
{
 
{
−
background: url("images/warning1.gif") no-repeat left top;
+
  background: url("menu_item.jpg") no-repeat left top;
−
}
+
}*/
 
</code>
 
</code>
  
−
Bei mir ist der erste Menüpunkt eine Gruppe welche die Id "6" trägt, daher '''''group_fold_6'''''! Mit '''''.level_0_r_i_exp''''' beziehe ich mich auf die Eigenschaften des Menüpunktes die er hat, wenn er nicht aktiv (nicht angeklickt oder mit dem Mauszeiger berührt) ist. In diesem Zustand soll ihm die Grafik '''''warning1.gif''''' zugewiesen werden.  
+
Mit dem CSS-Selektor <tt>p.groups</tt> werden alle Menüpunkte erfasst, die im Backend eine Gruppe sind. Durch die CSS Angabe <tt>background</tt> wird diesen Elementen die Grafik <tt>menu_item.jpg</tt> 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:
 
<code>[css,N]
 
<code>[css,N]
−
#group_fold_6 .level_0_r_i_exp_hover,  
+
/*===========================Hauptkategorien==============================*/
−
#group_fold_6 .level_0_r_a_exp_hover, #group_fold_6 .level_0_r_a_exp
+
/*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
 
{
 
{
−
background: url("images/warning2.gif") no-repeat left top;
+
  position: relative;
 +
  left: 40px;
 
}
 
}
 
</code>
 
</code>
 +
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:
  
−
Wenn er aktiv ist (also angeklickt oder mit dem Mauszeiger berührt wird), dann soll er die Grafik '''''warning2.gif''''' erhalten. Nun kann man so für alle weiteren Hauptpunkte vorgehen und erhält den im [http://www.dynpg.ch/doku/examples/css/menu_with_different_images/index.php ausfürbaren Beispiel] vorgestellten Effekt.
+
* '''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
  
−
== Direktklick auf Gruppen ==
+
{{Note
−
[[Image:special_group.jpg|thumb|Abbildung 2.5. Spezielle Gruppe]]
+
|Mehr zu den verschiedenen CSS Klassen dieser Art erfahren Sie in der Moduldokumentation zur [[Dynamische Navigation#CSS|dynamischen Navigation]] im Abschnitt CSS.}}
−
Bis jetzt wurde bei einem Klick auf eine Gruppe im Hauptmenü immer eine Artikelliste (sowohl im Menü als auch im Anzeigefenster) dargestellt. Was aber wenn wir wollen, dass direkt und ohne jeden Umweg ein Artikel angezeigt werden soll? Nun, die Lösung ist einfach und erfordert noch nicht einmal Quellcode, denn das [[:Category:Bedienung des Backends|Backend]] erledigt all dies schon für uns. Für das Beispiel haben wir dort eine Gruppe namens "spezielle Gruppe" erstellt. In der Gruppe haben wir dann einen Artikel mit dem Namen "spezieller Artikel" erstellt und ihm einen beliebiegen Artikeltext zugewiesen. Ist dies einmal geschehen kann man in der Gruppenliste bei "spezielle Gruppe" auf das "Bearbeiten"-Symbol klicken (das, welches wie ein Kugelschreiber aussieht) und bei "Gruppeninhalt" die ID von "spezieller Artikel" eintragen. Und schon erhält man im [http://www.dynpg.org/doku/examples/css/menu_with_different_images/index.php ausfürbaren Beispiel] den beschriebenen Effekt.
+
  
−
== Unterschiedliche Stile für Seiten ==
+
=== Verschiedene Grafiken für einzelne Menüpunkte ===
−
Angenommen Sie haben einen Menüpunkt Kontakt und einen namens Startseite und Sie wollen, dass beide z.B. verschiedene Hintergrundfarben zur Darstellung verwenden. Dafür gibt es einige Menüfunktionalitäten die einem die Arbeit abnehmen. Dabei sei auf [[Code-Schnipsel Unterschiedliche Stile für unterschiedliche Seiten|dieses Beispiel]] verwiesen.  
+
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:
  
−
Im Beispiel werden die folgenden beiden Funktionen verwendet:  
+
<code>[css,N]
 +
#group_fold_1 .level_0_r_i_exp
 +
{
 +
  background: url("images/menu_item1.jpg") no-repeat left top;
 +
}
  
−
<code>[php,Y]
+
#group_fold_1 .level_0_r_i_exp_hover,  
−
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../index.php');
+
#group_fold_1 .level_0_r_a_exp_hover, #group_fold_1 .level_0_r_a_exp
−
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_subpages', Array(1 => '../details.php'));
+
{
 +
  background: url("images/menu_item2.jpg") no-repeat left top;
 +
}
 
</code>
 
</code>
  
−
Funktion 1 legt die PHP-Datei fest, die zum anzeigen sämtlicher Menüpunkte verwendet werden soll (hier: index.php). Funktion 2 legt die Datei fest, die zum anzeigen der "Startseite"-Gruppe verwendet werden soll. Somit überschreibt Funktion 2 die Einstellungen von Funktion 1 für "Startseite". Dabei muss wieder die ID der Gruppe angegeben werden (kann im Backend nachgelesen werden). Jedesmal wenn man jetzt auf die Startseiten-Gruppe klickt, wird statt dem Code von index.php, der von details.php zum anzeigen verwendet. Man kann natürlich auch mehr als eine Datei angeben:
+
Auch hier wird jedem Menüpunkt eine Klasse zugeordet. Gruppen im Navigationsmenü werden von divs mit dem Namen <tt>group_fold_ID</tt> (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 <tt>.level_0_r_i_exp</tt> 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 <tt>menu_item1.jpg</tt> zugewiesen werden.  
  
−
<code>[php,N]
+
Wenn er aktiv ist (also angeklickt oder mit dem Mauszeiger berührt wird), dann soll er die Grafik <tt>menu_item2.jpg</tt> erhalten. Auf diese Weise können Sie Grafiken für weitere Menüpunkte festlegen.
−
$DynPG->SetParam_PlugIn_Param('DPGdynmenu',
+
−
                              'href_subpages',
+
−
                              Array(
+
−
                                    5 => '../details.php',
+
−
                                    7 => '../beliebige_datei.php'
+
−
                                    )
+
−
                            );
+
−
</code>
+
  
−
[[Image:caution.png]] '''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!
+
[[CSS Einfaches Hauptmenü mit verschiedenen Bildern und Hovereffekt|Hier]] finden Sie das CSS-Codebeispiel dafür.
  
−
[[Image:caution.png]] '''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!!
+
== Artikel bei einem Klick auf einen Menüpunkt anzeigen ==
 +
→ Hauptartikel: [[Gruppeninhalte]]
  
−
== Einträge sortieren ==
+
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 anstelle der Artikelliste ein bestimmter Artikel direkt angezeigt wird. Dazu müssen wir lediglich im Backend den [[Gruppeninhalte|Gruppeninhalt]] der Gruppe festlegen. Navigieren Sie dazu im Backend zu der betreffenden Gruppe und klicken Sie auf das [[Image:Imgbtn_edit.jpg]] ''Editieren''-Symbol. Geben Sie bei ''Gruppeninhalt'' nun den Artikel an, der in der Webseite bei einem Klick auf den Gruppennamen angezeigt werden soll.
−
Wir wollen hier die Einträge im Menü sortieren, und zwar nach verschiedenen Schlüsseln, wie z.B. dem Index der Gruppe / des Artikels oder dem Namen. Dazu gibt uns DynPG zwei Funktionen zur Hand:  
+
 
 +
== 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:
  
 
<code>[php,Y]
 
<code>[php,Y]
−
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
+
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../index2.php');
−
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'sort', Array('ASC'));
+
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_subpages', array(1 => '../details.php{query}'));
 
</code>
 
</code>
  
−
Die erste der beiden legt den Sortierschlüssel fest (hier: der Index der Gruppe / des Artikels). Mögliche Sortierschlüssel sind:
+
Funktion 1 legt die PHP-Datei fest, die zum Anzeigen sämtlicher Menüpunkte verwendet werden soll (hier: <tt>index2.php</tt>). Wird diese Funktion nicht augerufen, so wird standarmäßig die gleiche Datei verwendet, in der sich auch der Code mit dem dynamischen Menü befindet.
  
−
* <tt>INDEX</tt>: Index des Eintrages
+
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 <tt>index.php</tt>, der von <tt>details.php</tt> aufgerufen. Sie können natürlich auch für mehrere Gruppen ein Verlinkungsziel angeben. Geben Sie dazu innerhalb der Klammern der <tt>array</tt> Anweisung die Gruppen in der Form <tt>ID => 'ZIELDATEI{query}'</tt> an, wobei <tt>ID</tt> die ID der Gruppe ist und <tt>ZIELDATEI</tt> der Pfad zur Zieldatei. Die Endung <tt>{query}</tt>ist dabei wichtig, damit DynPG den Link zur Datei richtig erstellt.
−
* <tt>NAME</tt>:  Name des Eintrages
+
−
* <tt>CREATEDATE</tt>: Erstellungsdatum
+
  
−
Die zweite sortiert schließlich die Einträge. Dabei hat man die Wahl zwischen auf- (<tt>ASC</tt>) und absteigend (<tt>DESC</tt>). [[Code-Schnipsel Menüeinträge sortieren|In diesem Beispiel]] können sie nachvollziehen, wie der Aufruf funktioniert.  
+
{{Caution
 +
|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.}}
 +
 
 +
{{Caution
 +
|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.}}
 +
 
 +
=== Auf eine externe Seite verlinken ===
 +
Um einen Menüpunkt auf eine externe Seite verlinken zu lassen, können Sie den folgenden Code verwenden:
 +
 
 +
<code>[php,Y]
 +
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_subpages', array(1 => 'counter.php?inc=http://www.dynpg.org'));
 +
</code>
  
−
[[Image:caution.png]] '''Achtung:''' Die Funktionen müssen '''vor''' der Ausgabe des Menüs aufgerufen werden.
+
Ersetzen Sie hier einfach den Wert von <tt>inc</tt> durch die Webseite, auf die Sie verlinken möchten.

Aktuelle Version vom 26. September 2011, 15:28 Uhr

Note.png Dieser Artikel ist Teil einer Reihe von Artikeln über die dynamische Navigation von DynPG

Dynamisches Navigationsmenü und Inhaltsanzeige | Der Navigationskontext | Implementation eines kompletten Hauptmenüs | Anpassen des Navigationsmenüs | Moduldokumentation: Dynamische Navigation | Einführungsartikel ...

zurück zu Kategorie:Integration in eine Webseite

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

Caution.png 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: 

  1. $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
  2. $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).

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
Note.png Bemerkung: 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 anstelle der Artikelliste ein bestimmter Artikel direkt 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 Imgbtn edit.jpg 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: 

  1. $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../index2.php');
  2. $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.

Caution.png 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.
Caution.png 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.

Auf eine externe Seite verlinken

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

  1. $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.

Von „http://wiki-de.dynpg.org/wiki_de/index.php?title=Anpassen_des_Navigationsmenüs&oldid=3400“