3.6 Navigationselemente gestalten

Nachdem nun das Grundgerüst mit Breiten-, Abstands- und Farbangaben bestens ausgestattet ist, sollten wir uns nun den Navigationselementen widmen. Speziell geht es hierbei um die Gestaltung der Haupt- und ggf. weiterer besonders gestalteter Navigationsebenen.

Dem Baukastenprinzip folgend ist die Gestaltung der Navigationselemente ein weiterer austauschbarer Baustein und wird daher und über das zentrale Stylesheet eingebunden.

Innerhalb des YAML-Frameworks stehen im Verzeichniscss/navigation folgende fertige Hauptnavigationen zur Verfügung:

  • Sliding Door - nav_slidingdoor.css
  • Shiny Buttons - nav_shinybuttons.css

Beide Varianten stellen eine horizontale Navigationsleiste dar. Die Anwendung wird nachfolgend kurz erläutert. Generell lässt sich jedoch jede beliebige Navigation in das YAML-Framework integrieren.

Sliding Door Navigation

A List Apart Logo Für dieses Tutorial wurde eine Reiternavigation nach dem Vorbild Sliding Door von A-List-Apart gewählt. Mittlerweile gibt es auch eine zweite, verbesserte Version Sliding Door II, welche die Kompatibilität weiter verbessert und einen Hover-Effekt für die einzelnen Reiter einführt. Wem diese Navigationsart gefällt, dem empfehle ich, sich die Überarbeitung anzuschauen. Zu beiden ALA-Artikeln gibt es deutsche Übersetzungen (Teil 1 und Teil 2) von Klaus Langenberg.

Die Anwendung ist denkbar einfach. Die Menüpunkte werden als ungeordnete Liste organisiert. Der aktive Menüpunkt wird durch id="current" des zugehörigen Listenelementes.

<div id="nav_main" >
  <ul>
    <li id="current"><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
  </ul>
</div>

Beispiel: layout-storage/example.hml

Shiny Buttons Navigation

A List Apart Logo Die Shiny Buttons habe ich vor einiger Zeit für ein kleines Projekt erstellt. Sie baut auf das gleiche XHTML-Grundgerüst auf, welches auch die zuvor erläuterte Sliding Door Navigation verwendet. Der Wechsel zwischen beiden Gestaltungsvarianten erfolgt daher einfach durch die Wahl der entsprechenden Datei innerhalb des zentralen Stylesheets der Website.

Die Menüpunkte werden als ungeordnete Liste organisiert. Der aktive Menüpunkt wird durch id="current" des zugehörigen Listenelementes.

Zusätzlich muss bei der Shiny Buttons Navigation als erster und letzter Menüpunkt ein Dummy-Listeneintrag gesetzt werden, der für die korrekte Darstellung der vertikalen zweifarbigen Trennlinien sorgen. Über die Breitenangabe width: 48px der ID first wird zudem die Einrückung des Menüs vom linken Rand gesteuert (Details, siehe css/navigation/nav_shinybuttons.css).

<div id="nav_main" >
  <ul>
    <li id="first">&nbsp;</li>
    <li id="current"><a href="#">Button 1</a></li>
    <li><a href="#">Button 2</a></li>
    <li><a href="#">Button 3</a></li>
    <li><a href="#">Button 4</a></li>
    <li><a href="#">Button 5</a></li>
    <li id="last">&nbsp;</li>
  </ul>
</div>

Beispiel: artikel/css/mnu_shinybutton.html

»»» Abschnitt 3.7: Formatierung der Inhalte