Anpassen des Navigationsmenüs: Unterschied zwischen den Versionen

Version vom 26. Oktober 2010, 10:22 Uhr

In diesem Artikel, 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:

/*===========================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;
}

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
• 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

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:

• level_X_r_i_exp: inaktiver(noch nicht geklickter) Menüpunkt
• level_X_r_i_exp_hover: inaktiver(noch nicht geklickter) Menüpunkt auf dem die Maus steht
• level_X_r_a_exp: aktiver(geklickter) Menüpunkt
• level_X_r_a_exp_hover: aktiver(geklickter) Menüpunkt auf dem die Maus steht

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

• group_fold_ID

zusammengefasst, wobei ID 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 hier anschauen.

Verschiedene dynamische 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.

Hier können der CSS-Code und das ausführbare Beispiel betrachtet werden.

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 group_fold_ID (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:

#group_fold_6 .level_0_r_i_exp 
{
	background: url("images/warning1.gif") no-repeat left top;
}

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.

#group_fold_6 .level_0_r_i_exp_hover, 
#group_fold_6 .level_0_r_a_exp_hover, #group_fold_6 .level_0_r_a_exp
{
	background: url("images/warning2.gif") no-repeat left top;
}

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 ausfürbaren Beispiel vorgestellten Effekt.

Direktklick auf Gruppen

Abbildung 2.5. Spezielle Gruppe

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 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 ausfürbaren Beispiel den beschriebenen Effekt.

Unterschiedliche Stile für Seiten

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 dieses Beispiel verwiesen.

Im Beispiel werden die folgenden beiden Funktionen verwendet:

$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_page_articles', '../index.php');
$DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'href_subpages', Array(1 => '../details.php'));

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:

$DynPG->SetParam_PlugIn_Param('DPGdynmenu',
                              'href_subpages',
                               Array(
                                     5 => '../details.php',
                                     7 => '../beliebige_datei.php'
                                    )
                             );

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!!

Einträge sortieren

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:

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

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

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

Die zweite sortiert schließlich 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.

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