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


Kunststoffland NRW setzt auf Contentpapst

Navigationen mit CSS erstellen

Die Gestaltung von Seitenelementen mit Hilfe der Cascading Style Sheets (kurz CSS) ist mittlerweile zum gängigen Standard bei der Entwicklung von Webseiten geworden, denn mit CSS lassen sich z.B. Navigationsmenüs entwickeln, die ohne CSS nur mit dem Einsatz von Javascript und zusätzlichen Grafiken, Platzhaltern usw. realisierbar wären. Dieser Knowledge Base-Artikel beschreibt die Entwicklung eines solchen Navigationsmenüs innerhalb von Contentpapst.

Zuerst ein Blick auf die finale Gestaltung des Navigationsmenüs:

Um dieses Navigationsmenü zu realisieren, muss zuerst folgender HTML-Code für den Rahmen der Navigation in eine beliebige Vorlage eingefügt werden (z.B. in die für das Hauptlayout verantwortliche Vorlage "main.htm"):

<div id="navigation">
  <ul>
   {cp:container module="navigation" category="0" template="{cp:path}navigation_normal.html" template_selected="{cp:path}navigation_selected.html" selected_field="nav_url"}
  </ul>
</div> 

Weiterhin muss eine neue Vorlage "navigation_normal.html" (für einen nicht ausgewählten Navigationspunkt) im aktuellen Vorlagenset angelegt werden mit diesem Inhalt:

<li><a href="{cp:navigation:nav_url}" title="{cp:navigation:nav_title}">{cp:navigation:nav_title}</a></li>

Sowie eine Vorlage "navigation_selected.html" (für einen ausgewählten Navigationspunkt), ebenfalls im gleichen Ordner:

<li id="selected"><a href="{cp:navigation:nav_url}" title="{cp:navigation:nav_title}">{cp:navigation:nav_title}</a></li>

Wenn anschließend diese Seite per Contentpapst aufgerufen wird, dann ist dort eine normale vertikale Auflistung der Navigationspunkte sichtbar (vorausgesetzt, es wurden bereits Navigationspunkte angelegt):

Diese Auflistung wird jetzt per CSS gestaltet. Dazu werden am Ende der standardmäßig in jedem Vorlagenset vorhandenen CSS-Datei "standard.css" folgende CSS-Regeln eingefügt:

#navigation {
 background: url('background.gif') repeat-x 50% bottom;
 float: left;
 width: 100%;
 line-height: normal;
 font-family: Arial, Verdana, Sans-Serif;
 font-size: 12px;
}

#navigation ul {
 padding-right: 10px;
 padding-left: 10px;
 padding-bottom: 0px;
 margin: 0px;
 padding-top: 10px;
 list-style-type: none
}

#navigation li {
 padding-right: 0px;
 padding-left: 9px;
 background: url('left_normal.gif') no-repeat left top;
 float: left;
 padding-bottom: 0px;
 margin: 0px;
 padding-top: 0px
}

#navigation a {
 padding-right: 15px;
 display: block;
 padding-left: 6px;
 font-weight: normal;
 background: url('right_normal.gif') no-repeat right top;
 float: left;
 padding-bottom: 4px;
 color: #909090;
 padding-top: 5px;
 text-decoration: none;
}

#navigation a {
 float: none;
}

#navigation a:hover {
 padding-bottom: 5px;
 font-weight: bold;
 color: #333333;
}

#navigation #selected {
 background-image: url('left_selected.gif');
}

#navigation #selected a {
 background-image: url('right_selected.gif');
 padding-bottom: 5px;
 font-weight: bold;
 color: #333333;
}

Diese CSS-Regeln passen die Gestaltung der einzelnen HTML-Elemente innerhalb des als "navigation" deklarierten Bereiches an. U.a. wird die Liste ("<ul>") samt der einzelnen Punkte ("<li>") neu formatiert. Auch die Gestaltung der enthaltenen Links wird verändert.

In diesen Regeln wird bspw. ein Navigationspunkt bei einem Mouseover dunkler dargestellt und der aktuelle Navigationspunkt nutzt ein anderes Hintergrundbild, so dass dieser direkt als markiert sichtbar ist. Insgesamt kommen für die Gestaltung noch 5 Bilder zum Einsatz: Ein Hintergrundbild (Datei "background.gif"), sowie je ein Bild für die linke und rechte Seite eines Navigationspunktes im normalen und aktiven Zustand ("left_normal.gif", "right_normal.gif", "left_selected.gif" und "right_selected.gif").

Wenn Sie diese CSS-Datei nun abspeichern und die Contentpapst-Seite neuladen, dann werden Sie bereits das fertig formatierte Navigationsmenü auf Ihrer Website sehen. Weitere Informationen zur Arbeit mit Cascading Style Sheets finden Sie auch unter http://www.css4you.de/.

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/navigationen-mit-css-erstellen.html