Mobile First: Kann ich Navigationspunkte mit einem Untertitel versehen?

04. Mai 2017

Ja, Navigationspunkte können rein über CSS mit Untertitel versehen werden.

Ja, Navigationspunkte können entweder durch Anpassen der Navigations-Templates oder auch rein über CSS angepasst werden. Im Folgenden wird die CSS-Only Variante beschrieben.

Untertitel unter Hauptnavigationspunkten
Untertitel unter Hauptnavigationspunkten

Folgende Schritte sind notwendig, um Hauptnavigationspunkte um Untertitel ergänzen zu können:

  1. Erweitern Sie die Pflegemaske für die Navigation um das Feld data-subline bzw. machen Sie dieses Feld pflegbar, falls es bereits existiert. Hier können Sie dann auch angeben, ob das Feld nur für das erste Level pflegbar sein soll.
  2. Erweitern Sie das CSS so, dass das Data-Attribut data-subline unter dem Navigationstext ausgegeben wird.

Gibt das Attribut data-subline innerhalb des A-Tags des Hauptnavigationspunktes aus

/* Level 1 */

> ul {

-w-add-data:'adaptlayer=1';

> li {
float:left;

> a {
font-size:$fontSizeNavigationMainLevel1;
color:$fontColorNavigationMainLevel1;
background-color:$backgroundColorNavigationMainLevel1;
padding:$paddingNavigationMainLevel1;
line-height:$lineHeightNavigationMainLevel1;

&:active {
color:$fontColorNavigationMainLevel1Active;
background-color:$backgroundColorNavigationMainLevel1Active;
}

&:after {
font-size:0.9rem;
content:attr(data-subline);
display:block;
line-height:1.2rem;
margin-top:-0.7rem;
color:$fontColorSub;
}