SharePoint Menu Styles: Reihenfolge im CSS File

Heute mussten wir eine sehr fragwürdige Entdeckung machen:
Bei SharePoint/MOSS ist die Reihenfolge der styles im .css file wichtig! Ok genauer gesagt liegt es wahrscheinlich am ASP.NET Menu Control.

Wie kommt man nun zu so einer Erkenntnis?

Dazu fügt man ein neues SharePoint Menu Control zu einer MasterPage hinzu, alternativ auch das Standard ASP.NET Menu Control.
Nun die CSS Klassen für die verschiedenen Level festlegen, und auch die Selected Eigenschaft.

Die Styles liegen dabei in einem extra .css file, was etwa so aussieht:

.NavBarSelected { (…) }

.NavBarLevel1, .NavBarLevel2 { (…) }

Nun werden die MenuItems zwar korrekt dargestellt, aber nur bis man eines selektiert. Das Problem ist hier, dass SharePoint, oder eben das ASP.NET Menu, den HTML code folgendermaßen rendert:



...menuitem class=“NavBarSelected, NavBarLevel1, NavBarLevel2“

Es werden einfach alle styles in die class Eigenschaft gerendert, nur leider in der Reihenfolge in der sie auch im .css file aufgeführt sind.

Vertauscht man im .css file nun einfach die Reihenfolge der class angaben so



.NavBarLevel1, .NavBarLevel2 {}

.NavBarSelected {}

dann wird das Menu richtig gerendert und das Ergebnis sieht so aus:




…menuitem class=“NavBarLevel1, NavBarLevel2, NavBarSelected“

Dabei sollte man im Normalfall davon ausgehen können, dass wenn man schon das “selected” class property setzt, die style angabe automatisch ans Ende gesetzt wird und man nicht in einem mehrere 1000 Zeilen großen .css file auf die Reihenfolge achten muss…

Leave a comment




Loading...