Implementation eines kompletten Hauptmenüs: Unterschied zwischen den Versionen

Aus DynPG-Wiki
Wechseln zu: Navigation, Suche
K (→‎Weitere Informationen)
(Artikel überarbeitet)
Zeile 1: Zeile 1:
 
[[Kategorie:Integration in eine Webseite]]
 
[[Kategorie:Integration in eine Webseite]]
−
{{Einführungsartikel}}
 
 
== Einleitung ==
 
== Einleitung ==
−
In den vorangegangenen Kapiteln haben Sie gelernt wie man DynPG in seine Seite integriert und es entsprechend anpasst. Ausgerüstet mit diesem Wissen wollen wir uns nun an eine wichtige Aufgabe machen: Die Erstellung eines '''''Seitenhauptmenüs'''''. Fangen wir also an. Als erstes benötigen wir eine leere '''''index.php''''', d.h. nicht ganz leer, sie enthält natürlich das Html-Grundgerüst. Außerdem erstellen wir uns eine CSS-Datei namens '''''style.css''''' mit der unser Menü optisch auf Vordermann gebracht werden soll. Das Grundgerüst könnte wie folgt aussehen:  
+
In den vorangegangenen Artikeln haben Sie gelernt wie man DynPG in seine Seite integriert und es entsprechend anpasst. Ausgerüstet mit diesem Wissen wollen wir uns nun an eine wichtige Aufgabe machen: Die Erstellung eines ''Navigationsmenüs''. Als erstes benötigen wir eine leere '''index.php''', d.h. nicht ganz leer, sie enthält natürlich das Html-Grundgerüst. Außerdem erstellen wir uns eine CSS-Datei namens '''style.css''' mit der unser Menü optisch auf Vordermann gebracht werden soll. Das Grundgerüst könnte wie folgt aussehen:  
 
<code>[php,N]
 
<code>[php,N]
 
<?php
 
<?php
Zeile 41: Zeile 40:
 
</code>
 
</code>
  
−
In den Spalten '''''hauptmenue''''' und '''''anzeige''''' sollen das Hauptmenü bzw. die eigentlichen Artikel, Artikellisten und Gruppenlisten angezeigt werden. Bevor wir nun den eigentlichen Code schreiben, müssen wir in das DynPG Backend und einen Artikel erstellen, nämlich den Artikel der das Hauptmenü tragen soll. Ja richtig, das Hauptmenü ist nämlich auch ein Artikel, nur eben ein etwas spezieller! Loggen Sie sich mit ihrem Account in das DynPG-Backend ein und gehen Sie in die Sektion '''''Artikelbezogene Texte'''''. Nun haben Sie schon einen neuen Artikeltext vor sich und müssen nur noch auf das '''''Dynamisches Menü einfügen''''' - Symbol über dem Textfeld klicken und just in diesem Moment müsste eine blaue Grafik mit der Bezeichnung "dynamisches Menü" im Textfeld erscheinen. Nun, das war es auch schon fast, drücken Sie nun den Knopf '''''Erstellen'''''.  
+
In den Spalten <tt>hauptmenue</tt> und <tt>anzeige</tt> sollen das Hauptmenü bzw. die eigentlichen Artikel, Artikellisten und Gruppenlisten angezeigt werden. Bevor wir nun den eigentlichen Code schreiben, müssen wir in das DynPG Backend und einen Artikel erstellen, nämlich den Artikel der das Hauptmenü tragen soll. Das Hauptmenü ist nämlich auch ein Artikel, nur eben ein etwas spezieller. Loggen Sie sich mit ihrem Account in das DynPG-Backend ein und gehen Sie in die Sektion ''Artikelbezogene Texte''. Nun haben Sie schon einen neuen Artikeltext vor sich und müssen nur noch auf das ''Dynamisches Menü einfügen'' - Symbol über dem Textfeld klicken und just in diesem Moment müsste eine blaue Grafik mit der Bezeichnung "dynamisches Menü" im Textfeld erscheinen. Klicken Sie nun auf den Button ''Erstellen''.  
  
 
[[Image:create_article.jpg|thumb|Abbildung 2.3. Artikel für das Hauptmenü erstellen]]
 
[[Image:create_article.jpg|thumb|Abbildung 2.3. Artikel für das Hauptmenü erstellen]]
  
−
Der Hauptmenü-Artikel müsste nun darunter in der Liste '''''"Texte / Text-Gruppen"''''' angezeigt werden. Schauen Sie wo er sich dort befindet und merken Sie sich die '''''ID'''''. Mit der werden wir den Artikel nämlich jetzt anzeigen lassen. Gehen wir also wieder in unsere "index.php" und fügen in der '''''Spalte hauptmenue''''' folgendes ein:  
+
Der Hauptmenü-Artikel müsste nun darunter in der Liste ''"Texte / Text-Gruppen"'' angezeigt werden. Schauen Sie wo er sich dort befindet und merken Sie sich die ''ID''. Mit der werden wir den Artikel nämlich jetzt anzeigen lassen. Gehen wir also wieder in unsere "index.php" und fügen in der Spalte <tt>hauptmenue</tt> folgendes ein:  
−
{{-}}
+
 
 
<code>[php,Y]
 
<code>[php,Y]
 
<?php
 
<?php
−
   //nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt!
+
   //nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt
 
   $DynPG->SetParam_A_Anytime(true);
 
   $DynPG->SetParam_A_Anytime(true);
 
   $DynPG->SetParam_A_Article(15);
 
   $DynPG->SetParam_A_Article(15);
Zeile 56: Zeile 55:
 
</code>
 
</code>
  
−
Was genau passiert da? Nun in der 1. Zeile sagen wir DynPG, dass es den folgenden Artikel immer anzeigen soll, kontextunabhängig also. Das macht auch Sinn, denn es handelt sich hier schließlich um unser Hauptmenü und das ist sozusagen omni-präsent. Bei mir wurde dem Menü-Artikel die ID 15 zugewiesen, deshalb verwende ich beim Setzen des Artikels in Zeile 2 auch diese Nummer. Mit Zeile 3 wird dann das Menü angezeigt.  
+
In der 1. Zeile sagen wir DynPG, dass es den folgenden Artikel immer anzeigen soll, kontextunabhängig also. Es handelt sich hier schließlich um unser Hauptmenü welches immer sichtbar sein soll. In diesem Beispiel wurde dem Menü-Artikel die ID 15 zugewiesen. Dher verwenden wir beim Setzen des Artikels in Zeile 2 auch diese ID. Mit Zeile 3 wird schließlich das Menü angezeigt.  
  
−
Nun müssen wir uns noch um die anzuzeigenden Artikel kümmern die man über das Menü erreichen kann, dazu fügen wir in der '''''Spalte anzeige''''' folgendes ein:  
+
Nun müssen wir uns noch um die anzuzeigenden Artikel kümmern, die man über das Menü erreichen kann. Dazu fügen wir in der Spalte <tt>anzeige</tt> folgendes ein:  
  
 
<code>[php,Y]
 
<code>[php,Y]
 
<?php
 
<?php
−
   //nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt!
+
   //nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt
 
   $DynPG->SetParam_A_Anytime(false);
 
   $DynPG->SetParam_A_Anytime(false);
 
   $DynPG->SetParam_AA_Maxview(10);  //Maximal zehn Einträge in Artikellisten
 
   $DynPG->SetParam_AA_Maxview(10);  //Maximal zehn Einträge in Artikellisten
Zeile 72: Zeile 71:
 
Zeile 1 funktioniert analog zu obigem Code. Die Zeilen 3 und 4 bewirken, dass sowohl Artikellisten (wenn im Menü auf eine Gruppe geklickt wird) als auch einzelne Artikel (wenn auf einen Artikel geklickt wird) angezeigt werden. Zeile 2 gibt an wie lang die Artikellisten sein dürfen, bevor sie der Übersicht halber auf mehreren Seiten (mit Navigation) dargestellt werden.  
 
Zeile 1 funktioniert analog zu obigem Code. Die Zeilen 3 und 4 bewirken, dass sowohl Artikellisten (wenn im Menü auf eine Gruppe geklickt wird) als auch einzelne Artikel (wenn auf einen Artikel geklickt wird) angezeigt werden. Zeile 2 gibt an wie lang die Artikellisten sein dürfen, bevor sie der Übersicht halber auf mehreren Seiten (mit Navigation) dargestellt werden.  
  
−
Für das Beispiel werden wir die style.css wie folgt füllen:  
+
Für das Beispiel werden wir die style.css wie folgt erstellen:  
  
 
<code>[css,N]
 
<code>[css,N]
Zeile 95: Zeile 94:
 
Hier werden die Artikel-Navigation (dynpg_A_breadcrumb), der Artikel- Printbutton (dynpg_A_btnprint) sowie der Artikelkopf (dynpg_A_header) ausgeblendet.  
 
Hier werden die Artikel-Navigation (dynpg_A_breadcrumb), der Artikel- Printbutton (dynpg_A_btnprint) sowie der Artikelkopf (dynpg_A_header) ausgeblendet.  
  
−
Nun kann das ganze sogar schon ausgeführt werden und sieht bei mir folgendermaßen aus:  
+
Nun kann die Seite bereits angezeigt werden und sieht dann folgendermaßen aus:  
  
 
[[Image:first_look.jpg|200px|Abbildung 2.4. ein erstes funktionierendes Hauptmenü]]
 
[[Image:first_look.jpg|200px|Abbildung 2.4. ein erstes funktionierendes Hauptmenü]]
  
−
Freilich variiert diese Ansicht, denn es werden natürlich immer die Gruppen und Artikel angezeigt die man im Backend definiert hat. Hier habe ich größtenteils alles so gelassen wie man es nach der Installation von DynPG mit den Beispieldaten vorfindet. Nun kann man daran gehen eigene Artikel/Gruppen zu erzeugen, die dann natürlich auch im Menü auftauchen werden.  
+
Natürlich variiert diese Ansicht, denn es werden natürlich immer die Gruppen und Artikel angezeigt die man im Backend definiert hat. Hier habe ich größtenteils alles so gelassen wie man es nach der Installation von DynPG mit den Beispieldaten vorfindet. Nun kann man daran gehen eigene Artikel/Gruppen zu erzeugen, die dann natürlich auch im Menü auftauchen werden.  
  
 
Das Menü, so wie es jetzt erscheint, ist rein optisch noch etwas rudimentär, daher werden wir nun daran gehen das ganze ein bisschen aufzupeppen indem wir Grafiken für die einzelnen Menüpunkte einfügen.
 
Das Menü, so wie es jetzt erscheint, ist rein optisch noch etwas rudimentär, daher werden wir nun daran gehen das ganze ein bisschen aufzupeppen indem wir Grafiken für die einzelnen Menüpunkte einfügen.
  
 
== Grafiken für die Menüpunkte ==
 
== Grafiken für die Menüpunkte ==
−
Da nun bereits ein fertiges Menü-Grundgerüst steht, sollte es ein leichtes sein Grafiken für die einzelnen Menüpunkte einzufügen, denn dazu müssen wir lediglich die Stylesheet-Datei '''''style.css''''' um folgenden Code erweitern:  
+
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]
 
<code>[css,N]
 
/*===========================Hauptkategorien==============================*/
 
/*===========================Hauptkategorien==============================*/
Zeile 138: Zeile 137:
 
}
 
}
 
</code>
 
</code>
−
Um diesen Code zu verstehen müssen wir zunächst ein paar Sachen 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:  
+
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:''' 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_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:''' aktiver(geklickter) Menüpunkt
−
* '''''level_0_r_a_exp_hover''''' (aktiver(geklickter) Menüpunkt auf dem die Maus steht)
+
* '''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:  
+
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:''' 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_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:''' aktiver(geklickter) Menüpunkt
−
* '''''level_X_r_a_exp_hover''''' (aktiver(geklickter) Menüpunkt auf dem die Maus steht)
+
* '''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  
 
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  
Zeile 156: Zeile 155:
 
* '''''group_fold_ID'''''
 
* '''''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 [[CSS Einfaches Hauptmenü mit Bildern|hier]] anschauen.
+
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.
  
 
== Verschiedene dynamische Grafiken für verschiedene Menüpunkte ==
 
== Verschiedene dynamische Grafiken für verschiedene 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.  
+
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 bewundert werden.  
+
[[CSS Einfaches Hauptmenü mit verschiedenen Bildern und Hovereffekt|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:  
+
''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]
Zeile 186: Zeile 185:
 
== Direktklick auf Gruppen ==
 
== Direktklick auf Gruppen ==
 
[[Image:special_group.jpg|thumb|Abbildung 2.5. Spezielle Gruppe]]
 
[[Image:special_group.jpg|thumb|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 habe ich dort nämlich eine Gruppe namens '''''spezielle Gruppe''''' erstellt. In der Gruppe habe ich 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.ch/doku/examples/css/menu_with_different_images/index.php ausfürbaren Beispiel] den beschriebenen Effekt.
+
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 habe ich dort nämlich eine Gruppe namens "spezielle Gruppe" erstellt. In der Gruppe habe ich 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.ch/doku/examples/css/menu_with_different_images/index.php ausfürbaren Beispiel] den beschriebenen Effekt.
−
{{-}}
+
 
 
== Unterschiedliche Stile für unterschiedliche Seiten ==
 
== Unterschiedliche Stile für unterschiedliche Seiten ==
 
Angenommen Sie haben einen Menüpunkt Kontakt und einen namens Startseite und Sie wollen, dass beide z.B. verschiedene Hintergrundfarben zur Darstellung verwenden. Was tun? Glücklicherweise gibt es dafür Menüfunktionalitäten die einem die Arbeit abnehmen. Dabei sei auf [[Code-Schnipsel Unterschiedliche Stile für unterschiedliche Seiten|dieses Beispiel]] verwiesen.  
 
Angenommen Sie haben einen Menüpunkt Kontakt und einen namens Startseite und Sie wollen, dass beide z.B. verschiedene Hintergrundfarben zur Darstellung verwenden. Was tun? Glücklicherweise gibt es dafür Menüfunktionalitäten die einem die Arbeit abnehmen. Dabei sei auf [[Code-Schnipsel Unterschiedliche Stile für unterschiedliche Seiten|dieses Beispiel]] verwiesen.  
Zeile 210: Zeile 209:
 
</code>
 
</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!
+
[[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!
  
−
[[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!!
+
[[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!!
  
 
== Einträge sortieren ==
 
== Einträge sortieren ==
−
Der Titel sagt bereits alles: 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 nämlich:  
+
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:  
  
 
<code>[php,Y]
 
<code>[php,Y]
Zeile 228: Zeile 227:
 
* '''''CREATEDATE''''' (Erstellungsdatum)
 
* '''''CREATEDATE''''' (Erstellungsdatum)
  
−
Die zweite sortiert schließlich die Einträge. Dabei hat man die Wahl zwischen auf- ('''''ASC''''') und absteigend ('''''DESC'''''). [[Code-Schnipsel Menüeinträge sortieren|In diesem Beispiel]] sieht man die Funktionen in Aktion.  
+
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]] sieht man die Funktionen in Aktion.  
  
−
[[Image:caution.png]] '''Achtung''' Die Funktionen müssen natürlich '''''vor''''' der Ausgabe des Menüs aufgerufen werden.
+
[[Image:caution.png]] '''Achtung:''' Die Funktionen müssen '''vor''' der Ausgabe des Menüs aufgerufen werden.
  
−
==Weitere Informationen==
+
== Weitere Informationen ==
  
 
[[Bild:Tip.png]] Mehr Informationen zum Einbinden von Hauptmenüs in Ihre Seite erhalten Sie im Artikel [[Modul Dynamische Navigation]], der Beschreibungsseite des DynPG-Plugins, dass in obigem Artikel Verwendung fand.
 
[[Bild:Tip.png]] Mehr Informationen zum Einbinden von Hauptmenüs in Ihre Seite erhalten Sie im Artikel [[Modul Dynamische Navigation]], der Beschreibungsseite des DynPG-Plugins, dass in obigem Artikel Verwendung fand.

Version vom 9. Mai 2010, 13:33 Uhr

Einleitung

In den vorangegangenen Artikeln haben Sie gelernt wie man DynPG in seine Seite integriert und es entsprechend anpasst. Ausgerüstet mit diesem Wissen wollen wir uns nun an eine wichtige Aufgabe machen: Die Erstellung eines Navigationsmenüs. Als erstes benötigen wir eine leere index.php, d.h. nicht ganz leer, sie enthält natürlich das Html-Grundgerüst. Außerdem erstellen wir uns eine CSS-Datei namens style.css mit der unser Menü optisch auf Vordermann gebracht werden soll. Das Grundgerüst könnte wie folgt aussehen: 

<?php
  require 'cms/getcontent.php';  //DynPG-Funktionalität einbinden
  $DynPG->SetParam_PathToRoot('cms/');  //DynPG-Pfad setzen
?>
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
  <head>
    <title>Hauptmenue-Tutorial</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <?php $DynPG->Write_CSS_JS_Header(); ?>  <!--Standard-Css von DynPG einbinden-->
    <link rel="stylesheet" type="text/css" href="style.css" />  <!--eigene style.css einbinden-->
  </head>
  <body>
    <h1>Hauptmenue-Tutorial</h1>
    <table  border="0">
      <tr valign="top">
      <th align="left" style="width:230px" id="hauptmenue">
      <div style="border: 3px black solid">
      <?php
        //hier soll das Hauptmenü hin
      ?>
      </div>
      </th>
      <th id="anzeige">
      <div style="border: 3px black solid">
      <?php
        //hier sollen die anzuzeigenden Artikel und Gruppen hin
      ?>
      </div>
      </th>
      </tr>
    </table>
  </body>
</html>

In den Spalten hauptmenue und anzeige sollen das Hauptmenü bzw. die eigentlichen Artikel, Artikellisten und Gruppenlisten angezeigt werden. Bevor wir nun den eigentlichen Code schreiben, müssen wir in das DynPG Backend und einen Artikel erstellen, nämlich den Artikel der das Hauptmenü tragen soll. Das Hauptmenü ist nämlich auch ein Artikel, nur eben ein etwas spezieller. Loggen Sie sich mit ihrem Account in das DynPG-Backend ein und gehen Sie in die Sektion Artikelbezogene Texte. Nun haben Sie schon einen neuen Artikeltext vor sich und müssen nur noch auf das Dynamisches Menü einfügen - Symbol über dem Textfeld klicken und just in diesem Moment müsste eine blaue Grafik mit der Bezeichnung "dynamisches Menü" im Textfeld erscheinen. Klicken Sie nun auf den Button Erstellen.

Abbildung 2.3. Artikel für das Hauptmenü erstellen

Der Hauptmenü-Artikel müsste nun darunter in der Liste "Texte / Text-Gruppen" angezeigt werden. Schauen Sie wo er sich dort befindet und merken Sie sich die ID. Mit der werden wir den Artikel nämlich jetzt anzeigen lassen. Gehen wir also wieder in unsere "index.php" und fügen in der Spalte hauptmenue folgendes ein: 

  1. <?php
  2.   //nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt
  3.   $DynPG->SetParam_A_Anytime(true);
  4.   $DynPG->SetParam_A_Article(15);
  5.   $DynPG->Write_Article();
  6. ?>

In der 1. Zeile sagen wir DynPG, dass es den folgenden Artikel immer anzeigen soll, kontextunabhängig also. Es handelt sich hier schließlich um unser Hauptmenü welches immer sichtbar sein soll. In diesem Beispiel wurde dem Menü-Artikel die ID 15 zugewiesen. Dher verwenden wir beim Setzen des Artikels in Zeile 2 auch diese ID. Mit Zeile 3 wird schließlich das Menü angezeigt.

Nun müssen wir uns noch um die anzuzeigenden Artikel kümmern, die man über das Menü erreichen kann. Dazu fügen wir in der Spalte anzeige folgendes ein: 

  1. <?php
  2.   //nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt
  3.   $DynPG->SetParam_A_Anytime(false);
  4.   $DynPG->SetParam_AA_Maxview(10);  //Maximal zehn Einträge in Artikellisten
  5.   $DynPG->Write_AllArticles();
  6.   $DynPG->Write_Article();
  7. ?>

Zeile 1 funktioniert analog zu obigem Code. Die Zeilen 3 und 4 bewirken, dass sowohl Artikellisten (wenn im Menü auf eine Gruppe geklickt wird) als auch einzelne Artikel (wenn auf einen Artikel geklickt wird) angezeigt werden. Zeile 2 gibt an wie lang die Artikellisten sein dürfen, bevor sie der Übersicht halber auf mehreren Seiten (mit Navigation) dargestellt werden.

Für das Beispiel werden wir die style.css wie folgt erstellen: 

/*alle Links schwarz*/
a{color: black;}
 
#hauptmenu p{
	text-align: left;
}
 
/*Navigation, Print-Button und Artikelheader unsichtbar machen*/
#dynpg_A_breadcrumb{display: none;}
 
#dynpg_AA_breadcrumb_navi{display: none;}
#dynpg_AA_breadcrumb_pages{display: none;}
 
#dynpg_A_btnprint{display: none;}
 
#dynpg_A_header{display: none;}

Hier werden die Artikel-Navigation (dynpg_A_breadcrumb), der Artikel- Printbutton (dynpg_A_btnprint) sowie der Artikelkopf (dynpg_A_header) ausgeblendet.

Nun kann die Seite bereits angezeigt werden und sieht dann folgendermaßen aus:

Abbildung 2.4. ein erstes funktionierendes Hauptmenü

Natürlich variiert diese Ansicht, denn es werden natürlich immer die Gruppen und Artikel angezeigt die man im Backend definiert hat. Hier habe ich größtenteils alles so gelassen wie man es nach der Installation von DynPG mit den Beispieldaten vorfindet. Nun kann man daran gehen eigene Artikel/Gruppen zu erzeugen, die dann natürlich auch im Menü auftauchen werden.

Das Menü, so wie es jetzt erscheint, ist rein optisch noch etwas rudimentär, daher werden wir nun daran gehen das ganze ein bisschen aufzupeppen indem wir Grafiken für die einzelnen Menüpunkte einfügen.

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 verschiedene 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 habe ich dort nämlich eine Gruppe namens "spezielle Gruppe" erstellt. In der Gruppe habe ich 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 unterschiedliche Seiten

Angenommen Sie haben einen Menüpunkt Kontakt und einen namens Startseite und Sie wollen, dass beide z.B. verschiedene Hintergrundfarben zur Darstellung verwenden. Was tun? Glücklicherweise gibt es dafür Menüfunktionalitäten die einem die Arbeit abnehmen. Dabei sei auf dieses Beispiel verwiesen.

Im Beispiel werden die folgenden beiden Funktionen verwendet: 

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

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

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: 

  1. $DynPG->SetParam_PlugIn_Param('DPGdynmenu', 'order', Array('INDEX'));
  2. $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 sieht man die Funktionen in Aktion.

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

Weitere Informationen

Tip.png Mehr Informationen zum Einbinden von Hauptmenüs in Ihre Seite erhalten Sie im Artikel Modul Dynamische Navigation, der Beschreibungsseite des DynPG-Plugins, dass in obigem Artikel Verwendung fand.

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