Aktuelles / BlogAktuelles / Blog

Neueste Meldungen, Hintergrundinfos, HOW-TOs

...und vieles mehr nur hier im Blog

Weitere Informationen zu Contentpapst Weitere Informationen zum CP::Shop

Neueste Beiträge


Entwickler-Blog: Tipps & Tricks

<< zum vorherigen Eintragzum nächsten Eintrag >>

Farblich abgestufte Navigationen erstellen (Sa, 18.10.2008)

In diesem Eintrag zeigen wir Ihnen, wie Sie in wenigen Schritten eine Navigation für Contentpapst oder CP::Shop erstellen können, bei der jeder Navigationspunkt in einer eigenen Farbe dargestellt wird. Gerade in Online-Shops kann dies sinnvoll sein, um den Besuchern jederzeit klarzumachen, in welchem Bereich sich diese gerade befinden. Es kommen dabei keinerlei Grafiken zum Einsatz, sondern es werden lediglich 1 Containeraufruf, 2 Vorlagen für die Darstellung der Navigationspunkte und CSS für die Formatierung benötigt.

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:

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.


RSS-Feed abonnieren RSS-Feed abonnieren

Blog-Eintrag kommentieren

Um einen Kommentar zu diesem Beitrag zu verfassen, können Sie sich im folgenden Formular entweder manuell mit Benutzername und Email-Adresse identifizieren oder aber Sie loggen sich über ein vorhandenes Profil bei Facebook, Twitter, OpenID etc. ein. Auf Wunsch haben Sie die Möglichkeit, sich automatisch über weitere Kommentare informieren zu lassen.

<< zurück

Weitere Einträge in der Kategorie "Tipps & Tricks"

Hier finden Sie die eBusiness-/eCommerce-Spezialisten von sandoba.de:
https://www.sandoba.de/blog/tipps-und-tricks/farblich-abgestufte-navigationen-erstellen/