Implementation eines kompletten Hauptmenüs

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:

<?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. 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.

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:

<?php
	$DynPG->SetParam_A_Anytime(true);		//nur anzeigen, wenn es der Kontext (also Position im Menü) vorgibt!
	$DynPG->SetParam_A_Article(15);
	$DynPG->Write_Article();
?>

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.

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:

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

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:

/*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 das ganze sogar schon ausgeführt werden und sieht bei mir folgendermaßen aus:

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.

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.

Implementation eines kompletten Hauptmenüs

Einleitung

Navigationsmenü

Meine Werkzeuge

Namensräume

Varianten

Ansichten

Aktionen

Suche

Navigation

Andere Wikis

Werkzeuge