Weitere Informationen zum Relaunch von Rostock.de
Weitere Informationen zum Relaunch von Rostock.de Weiter zu rostock.de

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


Test des CMS Contentpapst in der Internet World

Unabhängige Haupt- und Unternavigationen erzeugen

Oftmals ist es notwendig, dass die Haupt- und Unternavigation auf einer Seite optisch voneinander getrennt auf einer Seite dargestellt werden, z.B. wenn ein typisches 3-spaltiges Portallayout realisiert werden soll mit einer horizontalen Hauptnavigation sowie einer daran angepassten vertikalen Unternavigation in der linken Spalte.

Auch derartige Navigationen lassen sich direkt über Contentpapst erzeugen. Lesen Sie sich dazu bitte zuerst den Artikel "Eigene Navigationen in Contentpapst anlegen" durch, welcher den allgemeinen Aufbau einer eigenen Navigation beschreibt und setzen Sie diese Navigation auf Ihrer Website um.

Anschließend sind die im folgenden beschriebenen Anpassungen vorzunehmen:

Bei der optischen Trennung der beiden Navigationen arbeiten wir direkt mit CSS (Cascading Style Sheets, weitere Informationen z.B. unter www.css4you.de). Über eine spezielle CSS-Klasse wird die Unternavigation getrennt von der Hauptnavigation im Layout positioniert, ohne dass an der bisherigen Navigation große Änderungen vorgenommen werden müssen. Die Pflege der Navigationspunkte kann dabei auch weiterhin direkt über die Oberfläche von Contentpapst erfolgen.

Zuerst öffnen Sie bitte die Datei "standard.css" aus dem für das Layout genutzten Vorlagenset. Ganz am Ende dieser Datei fügen Sie dann die folgende neue CSS-Klasse mit ein:

.navigation_submenu {
    position: absolute;
    left: 100px;
    top: 100px;
}

Diese CSS-Klasse positioniert später die Unternavigation. Die Werte der Parameter "left" und "top" geben dabei die Position im Layout vor, angefangen von der linken oberen Ecke des Browserfensters. Diese Werte sind dann entsprechend Ihrem Layout anzupassen, damit die Unternavigation auch die gewünschte Position erhält.

Im nächsten Schritt passen Sie die Vorlage "hauptkategorien.htm" folgendermaßen an:

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

Dies bewirkt, dass nur noch in der Vorlage "aktuellerpunkt.htm", d.h. für den aktuell ausgewählen Hauptnavigationspunkt, die Unternavigation angezeigt wird. In dieser Vorlage "aktuellerpunkt.htm" nehmen Sie eine Anpassung wie folgend vor:

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

Wie Sie sehen, ist der Aufruf der Unternavigation jetzt innerhalb eines DIV-Containers mit der CSS-Klasse "navigation_submenu" eingeschlossen. Dadurch wird die Unternavigation an der angegebenen Position angezeigt. Jetzt müssen Sie nur noch die Vorlagen an die gewünschte Gestaltung anpassen, sowie die Position der Unternavigation entsprechend anpassen.

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


Weitere Artikel in der Knowledge Base: