Entwickler-Blog: Tipps & Tricks

Hier sehen Sie zunächst die fertige Navigation mit dem Mauszeiger über dem Navigationspunkt "Reiseführer":

Öffnen Sie als ersten Schritt die Vorlage "main.htm" aus Ihrem Vorlagenset. Diese ist für das grundsätzliche Layout der Webseite / des Online-Shops zuständig. Dort fügen Sie an der gewünschten Position folgenden HTML-Code ein:

<div class="colored_navigation"> <ul> {cp:container module="navigation" category="0" template="navigation_left_normal.html" template_selected="navigation_left_selected.html"} </ul> </div>

Damit die einzelnen Navigationspunkte auch ausgegeben werden können, müssen Sie in Ihrem Vorlagenset jetzt die zwei neuen Vorlagen "navigation_left_normal.html" (für normale, inaktive Navigationspunkte):

und "navigation_left_selected.html" (für aktive Navigationspunkte) anlegen:

Dies ergibt beim Aufruf der Webseite bereits eine einfache Darstellung der Navigationspunkte in Listen-Form:

Jetzt muss nur noch der für die Formatierung zuständige CSS-Code am Ende der Datei "style.css" im Vorlagenset eingefügt werden:

Dieser CSS-Code legt u.a. die maximale Breite der Navigation fest, richtet die Navigationspunkte rechtsbündig aus und legt die Darstellung der Schriften fest. Für jeden Navigationspunkt gibt es eine eigene CSS-ID im Format "colored_navigation_[ID]". D.h. Sie müssen für die IDs Ihrer Navigationspunkte eigene CSS-IDs mit den gewünschten Hintergrundfarben anlegen. Wird per Mauszeiger über einen der Navigationspunkte gefahren oder ist ein Navigationspunkt aktiv, dann wird dieser ausgegraut angezeigt.