Das Layout weiterer Kategoriebenen definieren
Author: Ing. Michael Fürst (m.fuerst@bluegate.at)
Web: http://www.bluegate.at
Publiziert: April 2007
Problemstellung
Wenn man eine dritte oder vierte Menüebene anlegt, sind diese Punkte nicht mehr an das restliche Layout des Templates angepasst.
Lösung
Das Kategoriemenü unserer Templates wird immer bis in die zweite oder dritte Kategorieebene designed. Dementsprechend gibt es auch nur für diese Ebenen eine passende Klassendefinition im Stylesheet.
Das Kategoriemenü ist so aufgebaut, dass die Selektoren der einzelnen Ebenen fortlaufend durchnummeriert werden (level1, level2, level3...).
Selektoren im Stylesheet
Parallel zu den Selektoren gibt es die Klassen im Stylesheet. Um das Menü um eine weitere Ebene zu ergänzen, öffnen Sie das Stylesheet und suchen Sie folgenden Abschnitt:
/* 1st TIER */
ul#categorymenu li.level1 {list-style-type:none; background-image:url(img/category_listitem_1.gif); background-repeat:no-repeat; background-position:0; background-color:#DCD7C1; padding:3px 0px 4px 30px; border: solid #fff; border-width:1px 0px 0px 0px;}
ul#categorymenu li.level1 a {font-size:11px; text-decoration:none; color:#575547; font-weight:normal;}
/* 2nd TIER */
ul#categorymenu li.level2 {list-style-type:none; background-image:url(img/category_listitem_2.gif); background-repeat:no-repeat; background-position:0; background-color:#EAE6D2; padding:3px 0px 4px 35px; border: solid #fff; border-width:1px 0px 0px 0px;}
ul#categorymenu li.level2 a {font-size: 11px; text-decoration:none; color:#6F6D5C; font-weight:normal;}
Dieser Abschnitt definiert die Kategorien erster und zweiter Ebene (1st Tier und 2nd Tier). Für eine dritte Ebene kopieren Sie den Abschnitt "Tier 2" und fügen Sie den Code nach dem 2nd Tier ein. Anschließend ändern Sie in diesem Bereich den Wert 2 auf 3:
/* 3nd TIER */
ul#categorymenu li.level3 {list-style-type:none; background-image:url(img/category_listitem_2.gif); background-repeat:no-repeat; background-position:0; background-color:#EAE6D2; padding:3px 0px 4px 35px; border: solid #fff; border-width:1px 0px 0px 0px;}
ul#categorymenu li.level3 a {font-size: 11px; text-decoration:none; color:#6F6D5C; font-weight:normal;}
Nun haben Sie bereits das Layout der dritten Ebene definiert. Allerdings sieht es nun identisch wie Ebene 2 aus.
Layout der neuen Ebene anpassen
Nun können Sie im Abschnitt 3rd Tier über die CSS Definitionen (wie background-color, border, margin etc.) beliebig verändern.
Zum Abschluss speichern Sie das Stylesheet und laden Sie es auf Ihren Shop Server hoch. Mit weiteren Ebenen (4. Ebene, 5. Ebene etc.) können Sie nach dem gleichen Prinzip verfahren.