Navigation mit Beschreibung

Robert Windisch edited this page Jul 25, 2015 · 1 revision

Deutsch / German

Clone this wiki locally

Eine solche Navigation ist kein Problem mit Xtreme One. Allerdings ist sie nur mit den seit WordPress 3.0 eingeführten Menüs möglich.

Einrichtung der Navigation

Um die Beschreibung der Menüeinträge nutzen zu können, ist im WordPress Administrationsbereich eine Einstellung zu aktivieren. Gehe zu Design->Menüs und blende die Optionen ein. Dort muß bei Erweiterte Menüeigenschaften anzeigen <> aktiviert werden. Falls noch kein Menü existiert, wird es mit einem aussagekräftigen Namen angelegt und die gewünschten Elemente hineingezogen. Die Beschreibung steht jetzt zur Verfügung. Eine Sache ist etwas ärgerlich: Bei Artikeln oder Seiten ist die Beschreibung mit dem Inhalt der Seite/Artikel gefüllt und muß erst von Hand entfernt werden. Tipp: Das Feld CSS-Klassen kann man zB. dafür nutzen, dem Menüelement zusätzlich ein Icon voranzustellen. [[/bilder/xtreme-one-navigation-settings.jpg Nach dem Speichern des Menüs gehst du zu Design->Xtreme One und klappst die Metabox Navigation/Suche auf. Entscheide dich für primäre oder sekundäre Navigation (die Einstellungen sind identisch) und wähle die Position der Navigation. Bei Stylesheet wählst du descriptive und bei Inhalt das zuvor gespeicherte Menü. Mit Seiten oder Kategorien funktioniert die Ausgabe der Beschreibung nicht. Die Menü-Beschreibung benutzen muß aktiviert werden, da dadurch ein extra für diese Art der Navigation programmierter Walker gestartet wird. Anschließend Theme generieren und die Navigation steht an gewünschter Stelle im Childtheme zur Verfügung.

Das Markup

Das generierte Markup ist bis auf den zusätzlichen Span mit der Beschreibung identisch mit dem Markup der Menüs ohne Beschreibung, den Seiten oder Kategorien.

<div id='primarynav' class='xf-container clearfix descriptive'>
    <div>
        <ul id="menu-desc">
            <li id="menu-item-83"><a href="#">Home<span>My Home</span></a></li>
            <li id="menu-item-82"><a href="#">Blog<span>My Blog</span></a></li>
            <li id="menu-item-80"><a href="#">Content<span>My Content</span></a></li>
        </ul>
    </div>
</div>

Das CSS

Der Hauptcontainer der Navigation bekommt als Klasse immer den kleingeschriebenen Dateinamen des ausgewählten Stylesheets zugewiesen, in diesem Fall descriptive. Dadurch ist es möglich, mehrere Navigationen mit unterschiedlichen Stylesheets in einem Theme zu verwenden und anzusprechen:

#primarynav.descriptive .hlist { background: red }
#secondarynav.shinybuttons .hlist { background: green }

Zusätzlich erzeugt Xtreme One per Javascript in der obersten Ebene der Navigationsliste dem ersten Listenelement die Klasse first und dem letzten die Klasse last. Ausserdem erhalten die Listenelemente bei der Navigation mit Beschreibung noch die Klasse desc. Im “descriptive” Stylesheet werden die Listenelemente nach links gefloatet und das letzte Listenelemet nach rechts. Die Navigation nimmt immer die volle, ihr zur Verfügung stehende Breite ein. Die Breite der Listenelemente ist identisch und muß im theme.css des Childthemes in Abhängigkeit der Anzahl der Listenelemente angepasst werden.

.descriptive ul li {
    width: 16.667%; /* 6 Elemente */
}

Das Stylesheet befindet sich im Framework unter xtreme-one/css/navigation/descriptive.css und wird vom Framework automatisch geladen. Das finale Styling wird im theme.css des Childthemes vorgenommen, in dem die entsprechenden Anweisungen überschrieben bzw. hinzugefügt werden. Es gibt noch eine zweite Variante, die sich vom Aussehen etwas unterscheidet: Die Verwendung des Stylesheets shinybuttons. Hier floaten alle Listenelemente links und die Breite der Listenelemente richtet sich nach dem Inhalt. Im Stylesheet xtreme-one/css/navigation/shinybuttons.css habe ich eine Grundformatierung für diesen Fall vorgenommen, die im theme.css des Childtheme gerne erweitert werden kann:

/** Menu with description **/
.shinybuttons .desc a { font-weight: bold }
.shinybuttons .desc a span { font-weight: normal; display:block; }
```css