Shop-Software CP::Shop - Eröffnen Sie Ihren eigenen Online-Shop!Shop-Software CP::Shop - Eröffnen Sie Ihren eigenen Online-Shop!

Spezialisten mit langjähriger Erfahrung

Schnelle Projektumsetzungen

sandoba.takeoff - Komplettpaket für Ihr Internetprojekt Kontakt mit sandoba.de aufnehmen

Hinweis zur Bestellung
Haben Sie Fragen zur Bestellung im Online-Shop? In den "Hilfen für die Bestellung" werden Ihre Fragen beantwortet. Auch der Support hilft Ihnen gerne weiter (Kontaktformular).


Landesverkehrswacht Mecklenburg-Vorpommern setzt auf Contentpapst

Eigene Navigationen in Contentpapst anlegen

Neben den Standardnavigationen, die vor allem dem einfachen Einstieg in die Thematik der {cp:tags} gedacht sind, bietet Contentpapst fast unbegrenzte Möglichkeiten zur Gestaltung individueller Navigationen. Dies ist besonders wichtig, denn die Navigationen sind es, die dem Benutzer die Struktur einer Website näherbringen und diesen anleiten, weitere Bereiche zu erkunden.

Wichtig für das Verständnis der Funktionsweise der {cp:tags} ist das Prinzip der Rekursivität. Über die {cp:tags} können Inhalte wie z.B. ein Navigationspunkt aufgerufen werden, die über eine Vorlage gestaltet werden. In dieser Vorlage können wiederum {cp:tags} enthalten sein, die eine eigene Vorlage aufrufen usw. Dies kann beliebig fortgeführt werden, bis in einer Vorlage keine {cp:tags} mehr vorhanden sind bzw. das Ergebnis leer ist. In einer Vorlage können beliebig viele {cp:tags} enthalten sein.

Wir werden uns dieses Prinzip der Rekusivität beim Aufbau einer Navigation zu nutze machen. Nach Vollendung werden Sie über eine Navigation verfügen, die frei an die eigenen Bedürfnisse angepasst werden kann. Mit dem Wissen über den Aufbau von Navigationen können Sie dann auch komplett eigene Navigationen konzipieren und verwirklichen.

Zuerst muss festgestellt werden, dass in der Navigation jeder Navigationspunkt eine eindeutige ID besitzt. Im Navigations-Modul von Contentpapst ist diese ID direkt in der Übersicht sichtbar. Wenn Sie eine Navigation auf Ihrer Website aufbauen wollen, müssen Sie jetzt wählen, welcher Navigationspunkt der Ursprung Ihrer Navigation sein soll. Der allgemeine Ursprung hat die ID "0".

Im nächsten Schritt wählen Sie die Vorlage aus, in welchem die Navigation platziert werden soll. Generell ist dies die Vorlage "main.htm" aus Ihrem verwendeten Vorlagen-Set. Dort wird ein {cp:tag} platziert, der Contentpapst über verschiedene Parameter Anweisungen gibt, welche Navigationspunkte angezeigt werden sollen. Welche Parameter dies genau sind, erfahren Sie im Punkt "{cp:container="navigation"}" (siehe Anleitung für {cp:container}).

Beginnen wir mit der konkreten Umsetzung, indem dieser {cp:tag} in die Vorlage eingebaut wird:

{cp:container module="navigation" category="0" template="hauptkategorien.htm" template_selected="aktuellerpunkt.htm" selected_field="nav_url"}

Der Tag bewirkt folgendes: Contentpapst ruft intern die Navigationspunkte auf, die in der ersten Ebene unterhalb der Kategorie/ID "0" liegen, d.h. die Hauptpunkte. Diese werden über die Vorlage "hauptkategorien.htm" gestaltet oder über die Vorlage "aktuellerpunkt.htm", wenn die URL des Navigationspunktes mit der aktuellen URL übereinstimmt (also wenn der Navigationspunkt ausgewählt ist). Die Vorlagen bauen sich wie folgt auf:

Vorlage "hauptkategorien.htm":

<div class="navigation_hauptkategorie">» <a href="{cp:navigation:nav_url}" title="{cp:navigation:nav_title}">{cp:navigation:nav_title}</a></div> {cp:container module="navigation" category="{cp:navigation:nav_id}" template="unterkategorien.htm"}

Vorlage "aktuellerpunkt.htm":

<div class="navigation_aktuell">{cp:navigation:nav_title}</div> {cp:container module="navigation" category="{cp:navigation:nav_id}" template="unterkategorien.htm"}

Über die Tags {cp:navigation:nav_id}, {cp:navigation:nav_title}, {cp:navigation:nav_url}, {cp:navigation:nav_base}, {cp:navigation:nav_status} und {cp:navigation:nav_pos} werden die einzelnen Inhallte eines Navigationspunktes wie z.B. der Titel und die ID eingefügt. Die ID ("{cp:navigation:nav_id}") dient in beiden Vorlagen gleichzeitig dazu, die nächste Ebene der Navigationspunkte aufzurufen, die direkt darunter liegen. Für diese Punkte wird die Vorlage "unterkategorien.htm" verwendet:

Vorlage "unterkategorien.htm":

<div class="navigation_unterkategorie"><a href="{cp:navigation:nav_url}" title="{cp:navigation:nav_title}">{cp:navigation:nav_title}</a></div>

Jetzt haben Sie bereits eine fertige Navigation, die sich selbstständig aktualisiert und mittels HTML und CSS gestaltet ist. Die notwendigen CSS-Regeln sind folgende:

.navigation_hauptkategorie {
width: 180px;
background: #728E92;
padding: 3px;
font-weight: bold;
font-family: Tahoma;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

.navigation_unterkategorie a {
width: 180px;
background: #F5F5F5;
padding: 3px;
padding-left: 14px;
font-family: Tahoma;
color: #000000;
border-bottom: 1px solid #FFFFFF;
}

.navigation_aktuell {
width: 180px;
background: #557479;
padding: 3px;
padding-left: 14px;
font-weight: bold;
font-family: Tahoma;
color: #FFFFFF;
border-bottom: 1px solid #FFFFFF;
}

.navigation_unterkategorie a:hover {
color: #000000;
}

.navigation_hauptkategorie a:hover, .navigation_aktuell a:hover {
text-decoration: none;
}

.navigation_hauptkategorie a:link, .navigation_hauptkategorie a:hover, .navigation_hauptkategorie a:visited {
color: #FFFFFF;
}

.navigation_unterkategorie a:hover {
background: #F1F1F1;
text-decoration: none;
}

Auf der linken Seite sehen Sie ein Beispiel der fertigen Navigation mit den Navigationspunkten einer Website zum Thema Abenteuer-Reisen, die mittels der obenstehenden CSS-Regeln gestaltet wurde. Die einzelnen Haupt- und Unterpunkte können klar voneinander unterschieden werden, ebenso ist die aktuelle Seite anders eingefärbt. Die Navigationspunkte besitzen zusätzlich einen Mouseover-Effekt.

Jetzt wissen Sie, wie Sie eine Navigation mit Contentpapst aufbauen. Dieses Beispiel kann beliebig angepasst und leicht z.B. um eine dritte und vierte Ebene oder weitere Vorlagen ergänzt werden. Prinzipiell kann alles realisiert werden, was mittels CSS, (X)HTML, DHTML, Javascript und Co. möglich ist. Sie können sogar XML erzeugen und dies als Grundlage für eine Flash-Navigation verwenden.

Noch ein Tipp: Um die Ladezeit für das Navigationsmenü erheblich zu senken, sollten Sie in der Hauptvorlage (z.B. der "main.htm") den zusätzlichen Parameter "cache" integrieren. Geben Sie für diesen z.B. "86400" als Wert an, dann wird die gesamte Navigation für einen Tag zwischengespeichert.

Bitte geben Sie eine Bewertung ab: nicht lesenswert  -2 -1 0 +1 +2  lesenswert


Weitere Artikel in der Knowledge Base:

Hier finden Sie die eBusiness-/eCommerce-Spezialisten von sandoba.de:
https://www.sandoba.de/support/knowledge-base/cms/eigene-navigationen-in-contentpapst-anlegen.html