SELFHTML: Stylesheets / CSS-basierte Layouts / Navigationsleisten
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: CSS-basierte Navigationsleisten
Keywords: SELFHTML, CSS, Stylesheets, Cascading Stylesheets, CSS-basierte Layouts
Date: 2005-11-11T23:51:48+01:00

| # CSS-basierte Navigationsleisten
| Navigationsleiste definieren Vertikale Formatierung mit Überschriften Horizontale Formatierung Mehrere Navigationsebenen Dynamische CSS-Navigation für moderne Browser

## Navigationsleiste definieren

In den vorangegangenen Beispielen wurde für die Navigationsleiste eine Aufzählungsliste verwendet. Hiermit haben Sie nicht nur ein strukturelles Element, das dem Sinn einer Navigation, nämlich der Auflistung von Verweisen, recht gut entspricht, sondern auch gleich drei verschachtelte Elemente, die Sie über CSS formatieren können: `<ul>`, `<li>` und `<a>`.

Um eine einheitliche Darstellung zu erreichen, sind zunächst die unterschiedlichen Voreinstellungen der Browser für Listen zu überschreiben.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Navigationsleisten</title>
    <style type="text/css">
      body, a {
        font: normal 100.01% Helvetica, Arial, sans-serif;
        color: black; background-color: white;
      }

      ul#Navigation {
        margin: 0; padding: 0;
      }
      ul#Navigation li {
        list-style: none;
        margin: 0; padding: 0;
      }

    </style>
    </head>
    <body>
      <h1>Navigationsleiste ...</h1>

      <ul id="Navigation">
        <li><a href="nav_definieren.htm">Beispiel 1</a></li>
        <li><a href="nav_formatieren.htm">Beispiel 2</a></li>
        <li><a href="nav_rollover.htm">Beispiel 3</a></li>
      </ul>

    </body>
    </html>

### Erläuterung:

Die Abstände werden für `<ul>` und `<li>` auf `0` gesetzt und das Aufzählungszeichen für `<li>` wird über `list-style:none` beseitigt. So erhalten Sie eine Darstellung der Links ohne erkennbare Listenformatierung, aufgrund der blockbildenden Eigenschaft der Listenpunkte jedoch untereinander angeordnet.

Im folgenden Beispiel werden nun die Abstände neu bestimmt, eine Breite für die Liste festgelegt sowie Rahmen und Farben hinzugefügt.

### Beispiel:

Anzeigebeispiel: So sieht's aus

      ul#Navigation {
        width: 10em;
        margin: 0; padding: 0.8em;
        border: 1px solid black;
        background-color: silver;
      }
      * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
        width: 11.6em;
        w\idth: 10em;
        padding-left: 0;
        padd\ing-left: 0.8em;
      }
      ul#Navigation li {
        list-style: none;
        margin: 0.4em; padding: 0.2em;
        border: 1px solid gray;
        background-color: #eee;
      }

      ul#Navigation a {
        text-decoration: none; font-weight: bold;
        color: maroon; background-color: #ccc;
      }
      ul#Navigation a:hover {
        color: white; background-color: gray;
      }

### Erläuterung:

Die Zuweisung von Rahmen und Hintergrundfarben macht hier die Struktur sichtbar. Solche komplexen Listen-Formatierungen erfordern für den Internet Explorer (besonders für ältere Versionen) leider nicht selten Korrekturen über eine spezielle CSS-Browserweiche; in diesen Beispielen wird hierzu der "Star-HTML-Hack" für ältere Versionen und später auch der "Star-Plus-HTML-Hack" für den IE 7 verwendet.

Auch dem `a`-Element wurde eine Hintergrundfarbe zugewiesen und diese (sowie dazu passend die Schriftfarbe) über die Pseudoklasse `:hover` geändert. Hierdurch ergibt sich ein Rollover-Effekt, der so einfacher als mit JavaScript erzeugt werden kann. Es fehlt allerdings noch das typische Balken-Aussehen, da `<a>` als Inline-Element nur den für seinen Inhalt erforderlichen Raum einnimmt.

Um den Linkbereich auf das ganze `li`-Element auszuweiten und typische Rollover-Balken zu erhalten, werden die Links mit `display:block` definiert.

### Beispiel:

Anzeigebeispiel: So sieht's aus

      ul#Navigation {
        width: 10em;
        margin: 0; padding: 0.8em;
        border: 1px solid black;
        background-color: silver;
      }
      * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
        width: 11.6em;
        w\idth: 10em;
        padding-left: 0;
        padd\ing-left: 0.8em;
      }
      ul#Navigation li {
        list-style: none;
        margin: 0.4em; padding: 0;
      }

      ul#Navigation a {
        display:block;
        padding: 0.2em;
        text-decoration: none; font-weight: bold;
        border: 1px solid black;
        border-left-color: white; border-top-color: white;
        color: maroon; background-color: #ccc;
      }
      * html ul#Navigation a {  /* Breitenangaben nur fuer IE */
        width: 100%;
        w\idth: 8.8em;
      }
      ul#Navigation a:hover {
        border-color: white;
        border-left-color: black; border-top-color: black;
        color: white; background-color: gray;
      }

### Erläuterung:

Leider benötigt der Internet Explorer bis zur Version 6 abgesehen von `display:block` noch eine Breitenangabe zur Ausdehnung des Linkbereichs. Diese ist für den IE 6 im standardkonformen Modus und frühere Versionen entsprechend des verwendeten Box-Modells unterschiedlich angegeben.

Rahmen und Innenabstand von `<li>` sind hier dem Link zugewiesen, damit der Rollover-Effekt über den gesamten Hintergrund des Balkens geht. Über unterschiedliche Rahmenfarben ist hier auch ein räumlicher Effekt hinzugekommen.

## Vertikale Formatierung mit Überschriften

Eine größere Anzahl von Menüpunkten in einer vertikal dargestellten Navigation ist aufgeteilt in Rubriken mit Zwischenüberschriften übersichtlicher. Hierzu werden im folgenden Beispiel `h2`-Elemente in die Liste eingefügt und ihnen gemeinsam mit den Links zunächst dieselben CSS-Eigenschaften zugewiesen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Navigationsleiste mit Überschriften</title>
    <style type="text/css">
      body {
        font: normal 100.01% Helvetica, Arial, sans-serif;
        color: black; background-color: #ffffe0;
      }

      ul#Navigation {
        width: 10em;
        margin: 0; padding: 0.2em 0.8em 0.8em;
        border: 1px solid black;
        background-color: silver;
      }
      * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
        width: 11.6em;
        w\idth: 10em;
        padding-left: 0;
        padd\ing-left: 0.8em;
      }
      ul#Navigation li {
        list-style: none;
        margin: 0.4em; padding: 0;
      }

      ul#Navigation a, ul#Navigation span, ul#Navigation h2 {
        display:block;
        padding: 0.2em;
        text-decoration: none; font-weight: bold;
        border: 1px solid black;
        border-left-color: white; border-top-color: white;
        color: maroon; background-color: #ccc;
      }
      * html ul#Navigation a, * html ul#Navigation span, * html ul#Navigation h2 {
        width: 100%;    /* Breitenangabe fuer IE 5.x */
        w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */
      }
      ul#Navigation a:hover, ul#Navigation span {
        border-color: white;
        border-left-color: black; border-top-color: black;
        color: white; background-color: gray;
      }
      ul#Navigation h2 {
        font-size: 1em;
        margin: 1.1em 0 0;
        border-color: gray;
        color: black; background-color: #eee;
      }

    </style>
    </head>
    <body>
      <h1 id="Beispiel">Navigationsleiste mit Überschriften</h1>

      <ul id="Navigation">
        <li><h2>Rubrik 1</h2></li>
        <li><a href="#Beispiel">Seite 1</a></li>
        <li><a href="#Beispiel">Seite 2</a></li>
        <li><a href="#Beispiel">Seite 3</a></li>

        <li><h2>Rubrik 2</h2></li>
        <li><span>aktuelle Seite</span></li>
        <li><a href="#Beispiel">Seite 5</a></li>
        <li><a href="#Beispiel">Seite 6</a></li>

        <li><h2>Rubrik 3</h2></li>
        <li><a href="#Beispiel">Seite 7</a></li>
        <li><a href="#Beispiel">Seite 8</a></li>
        <li><a href="#Beispiel">Seite 9</a></li>
      </ul>

    </body>
    </html>

### Erläuterung:

Da Überschriften von den Browsern meist größer und mit voreingestellten Außenabständen dargestellt werden, sind diese Eigenschaften für `<h2>` explizit gesetzt. Hierbei ist für `margin-top` ein größerer Abstand gewählt, um die Rubriken optisch voneinander zu trennen. Hervorgehoben werden die Überschriften hier farblich.

Neu in diesem Beispiel hinzugekommen ist auch, dass die aktuelle Seite nicht verlinkt wird. Dies erleichtert die Benutzbarkeit, da der Standort erkennbar ist und nicht mit einem (in diesem Fall ja nutzlosen) Link verwechselt werden kann. Hierzu wird der aktuelle Menüpunkt als `<span>` ausgezeichnet, dem dieselben CSS-Eigenschaften wie Verweisen zugewiesen werden, wenn diese mit der Maus überfahren werden; Sie können ihn - ausgehend von der Basisformatierung - auch noch deutlicher hervorheben.

## Horizontale Formatierung

Sie können eine Navigationsleiste mit wenigen Menüpunkten auch horizontal anordnen. Hierfür existieren zwei verschiedene Möglichkeiten mit unterschiedlichen Vor- und Nachteilen. Die einfachere Möglichkeit ist, die `li`-Elemente per `display:inline` darzustellen. Dies ermöglicht auch deren Zentrierung über eine auf das Eltern-Element angewandte Eigenschafts-/Wertkombination von `text-align:center`.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Horizontale Navigationsleiste zentriert</title>
    <style type="text/css">
      body {
        font: normal 100.01% Helvetica, Arial, sans-serif;
        color: black; background-color: #ffffe0;
      }

      ul#Navigation {
        margin: 0; padding: 0.8em;
        text-align: center;
        border: 1px solid black;
        background-color: silver;
      }
      ul#Navigation li {
        list-style: none;
        display: inline;
        margin: 0.4em; padding: 0;
      }

      ul#Navigation a, ul#Navigation span {
        padding: 0.2em 1em;
        text-decoration: none; font-weight: bold;
        border: 1px solid black;
        border-left-color: white; border-top-color: white;
        color: maroon; background-color: #ccc;
      }
      * html ul#Navigation a, * html ul#Navigation span {
        width: 1em;    /* nur fuer IE 5.0x erforderlich */
        w/idth: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
      }
      ul#Navigation a:hover, ul#Navigation span {
        border-color: white;
        border-left-color: black; border-top-color: black;
        color: white; background-color: gray;
      }

    </style>
    </head>
    <body>
      <h1 id="Beispiel">Horizontale Navigationsleiste zentriert</h1>

      <ul id="Navigation">
        <li><a href="#Beispiel">Seite&nbsp;1</a></li>
        <li><a href="#Beispiel">Seite&nbsp;2</a></li>
        <li><a href="#Beispiel">Seite&nbsp;3</a></li>
        <li><span>aktuelle&nbsp;Seite</span></li>
        <li><a href="#Beispiel">Seite&nbsp;5</a></li>
        <li><a href="#Beispiel">Seite&nbsp;6</a></li>
      </ul>

    </body>
    </html>

### Erläuterung:

Da `inline` angezeigten Elementen keine Breite zugewiesen werden kann, richtet sich diese nach dem enthaltenen Text (die für den Internet Explorer angegebene Breite von nur 1em dient zur Fehlerkorrektur in Version 5.0). Nutzen Sie diese Formatierungs-Möglichkeit, wenn die Menüpunkte unterschiedlich breit dargestellt werden bzw. nur soviel Raum wie ihr Inhalt einnehmen sollen.

Einen Nachteil hat diese Methode jedoch: Bei einem Umbruch der Navigationsleiste in zu kleinen Browserfenstern kommt es zu Überlagerungen. Dieser Effekt kann zwar auch bewusst zu gestalterischen Zwecken eingesetzt werden, verschlechtert allerdings die Nutzbarkeit. Achten Sie darauf, in den Menütexten keine oder nur geschützte Leerzeichen (`&nbsp;`) zu verwenden, damit bei einem Umbruch der Menüpunkt nicht geteilt wird.

Einheitliche Breiten der Menüpunkte unabhängig von deren Inhalten können Sie in einer horizontalen Navigationsleiste angeben, wenn Sie die CSS-Eigenschaft `float` verwenden. Sie können diese entweder `<li>` oder den hierin enthaltenen Elementen zuweisen, wobei dann `li {display:inline}` zu definieren ist. Letzteres ist aus verschiedenen Gründen günstiger.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Horizontale Navigationsleiste mit gleichen Breiten</title>
    <style type="text/css">
      body {
        font: normal 100.01% Helvetica, Arial, sans-serif;
        color: black; background-color: #ffffe0;
      }

      ul#Navigation {
        margin: 0; padding: 0.8em;
        text-align: center;
        border: 1px solid black;
        background-color: silver;
      }
      ul#Navigation li {
        list-style: none;
        display: inline;
        margin: 0; padding: 0;
      }

      ul#Navigation a, ul#Navigation span {
        float: left; width: 6em;
        margin: 0.4em; padding: 0.2em 1em;
        text-decoration: none; font-weight: bold;
        border: 1px solid black;
        border-left-color: white; border-top-color: white;
        color: maroon; background-color: #ccc;
      }
      * html ul#Navigation a, * html ul#Navigation span {  /* Korrektur fuer IE 5.x */
        width: 8em;
        w\idth: 6em;
      }
      ul#Navigation a:hover, ul#Navigation span {
        border-color: white;
        border-left-color: black; border-top-color: black;
        color: white; background-color: gray;
      }
      ul#Navigation div {
         clear: left;
      }

    </style>
    </head>
    <body>
      <h1 id="Beispiel">Horizontale Navigationsleiste mit gleichen Breiten</h1>

      <ul id="Navigation">
        <li><a href="#Beispiel">Seite&nbsp;1</a></li>
        <li><a href="#Beispiel">Seite&nbsp;2</a></li>
        <li><a href="#Beispiel">Seite&nbsp;3</a></li>
        <li><span>aktuelle&nbsp;Seite</span></li>
        <li><a href="#Beispiel">Seite&nbsp;5</a><div></div></li>
      </ul>

    </body>
    </html>

### Erläuterung:

Auch in diesem Beispiel wird `display:inline` für die `li`-Elemente benötigt, um Zeilenumbrüche zu verhindern. Da die enthaltenen Menüpunkte über `float` Eigenschaften von Block-Elementen erhalten, können ihnen auch eine Breite (`width`) und Außenabstände (`margin`) zugewiesen werden, ferner kommt es bei einem Umbruch nicht mehr zu Überlagerungen. Um den Elementfluss wieder herzustellen und in diesem Beispiel die Menüpunkte mit Hintergrund und Rahmen der Liste zu umschließen, ist ein Element mit der CSS-Eigenschaft `clear` innerhalb der Liste erforderlich. Hierzu wird ein leeres `div`-Element ohne semantische Bedeutung verwendet. Beim Internet Explorer funktioniert dies allerdings nur, solange kein Umbruch der Navigationsleiste erfolgt.

Sie können der Navigationsleiste `ul#Navigation` auch eine passende Breite zuweisen, um in zu kleinen Browserfenstern statt eines Umbruchs Scrollbalken anzubieten. Gemäß CSS 2.1 können Sie `float` hier auch problemlos ohne Angabe einer Breite verwenden, um Überlagerungen bei einem Umbruch zu verhindern.

## Mehrere Navigationsebenen

Eine Navigation, die wie in obigem Beispiel mit Zwischenüberschriften versehen ist, wird in vielen Fällen keine sequenzielle Auflistung von Links enthalten, sondern eher verschiedenen Navigationsebenen entsprechen. Die Überschriften stellen in diesem Fall die Hauptmenüpunkte dar und können selbst auch mit Übersichtsseiten für die jeweilige Rubrik verlinkt sein. Eine verschachtelte Liste eignet sich zur logischen Abbildung dieser Struktur jedoch besser.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Navigationsleiste mit mehreren Ebenen</title>
    <style type="text/css">
      body {
        font: normal 100.01% Helvetica, Arial, sans-serif;
        color: black; background-color: #ffffe0;
      }

      ul#Navigation {
        width: 10em;
        margin: 0; padding: 0.8em;
        border: 1px solid black;
        background-color: silver;
      }
      * html ul#Navigation {  /* Korrekturen fuer IE 5.x */
        width: 11.6em;
        w\idth: 10em;
        padding-left: 0;
        padd\ing-left: 0.8em;
      }
      ul#Navigation li {
        list-style: none;
        margin: 0.4em; padding: 0;
      }

      ul#Navigation li ul {
        margin: 0 0 0 1em; padding: 0;
      }
      ul#Navigation li ul li {
        margin: 0.1em 0;
      }
      * html ul#Navigation li ul li {  /* Korrektur fuer IE 5.x */
        margin-left: 1em;
        ma\rgin-left: 0;
      }

      ul#Navigation a {
        display:block;
        padding: 0.2em;
        text-decoration: none; font-weight: bold;
        border: 1px solid black;
        border-left-color: white; border-top-color: white;
        color: maroon; background-color: #ccc;
      }
      * html ul#Navigation a {
        width: 100%;    /* Breitenangabe fuer IE 5.x */
        w\idth: 8.8em;  /* Breitenangabe fuer IE 6 */
      }
      * html ul#Navigation li ul li a {
        width: 100%;    /* Breitenangabe fuer IE 5.x */
        w\idth: 7.8em;  /* Breitenangabe fuer IE 6 */
      }
      ul#Navigation a:hover {
        border-color: white;
        border-left-color: black; border-top-color: black;
        color: white; background-color: gray;
      }

    </style>
    </head>
    <body>
      <h1 id="Beispiel">Mehrere Navigationsebenen</h1>

      <ul id="Navigation">
        <li><a href="#Beispiel">Seite 1</a></li>
        <li><a href="#Beispiel">Seite 2</a>
          <ul>
            <li><a href="#Beispiel">Seite 2a</a></li>
            <li><a href="#Beispiel">Seite 2b</a></li>
            <li><a href="#Beispiel">Seite 2c</a></li>
          </ul>
        </li>
        <li><a href="#Beispiel">Seite 3</a></li>
        <li><a href="#Beispiel">Seite 4</a></li>
      </ul>

    </body>
    </html>

### Erläuterung:

In das zweite `<li>`-Element ist hier eine weitere Liste eingefügt, da `<ul>` selbst keine anderen Elemente als `<li>` enthalten darf.

Über die Nachkommen-Selektoren `ul#Navigation li ul` und `ul#Navigation li ul li` werden die CSS-Eigenschaften für die so verschachtelte Liste dahingehend geändert, dass die Menüpunkte dieser zweiten Ebene eingerückt und entsprechend schmaler sind und einen geringeren Abstand zueinander sowie zum dazugehörigen Menüpunkt der ersten Ebene aufweisen. Es sind natürlich auch andere CSS-Formatierungen möglich, um diese Struktur zu visualisieren.

Selbst ohne CSS wird die Struktur von verschachtelten Listen über die Browser-Voreinstellungen sehr gut deutlich, wie dieses Beispiel zeigt.

Eine verschachtelte Liste lässt sich auch geteilt darstellen, sodass die Menüpunkte der ersten Ebene horizontal in einer Reihe und die der zweiten Ebene vertikal passend darunter angeordnet werden. Dazu ist es erforderlich, die `li`-Elemente der ersten Ebene per `float` nebeneinander anzuordnen und ihnen `position:relative` zuzuweisen, damit deren Positionen als Bezug für die über `position:absolute` aus dem Elementenfluss genommenen Listenpunkte der zweiten Ebene genutzt werden.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Geteilte Navigationsleisten</title>
    <style type="text/css">
      body {
        font: normal 100.01% Helvetica, Arial, sans-serif;
        color: black; background-color: #ffffe0;
      }

      div#Rahmen {
        width: 47.1em;
        padding: 0.8em;
        border: 1px solid black;
        background-color: silver;
      }
      * html div#Rahmen {  /* Korrektur fuer IE 5.x */
        width: 48.7em;
        w\idth: 47.1em;
      }
      div#Rahmen div {
        clear: left;
      }
      ul#Navigation {
        margin: 0; padding: 0;
        text-align: center;
      }

      ul#Navigation li {
        list-style: none;
        float: left;
        width: 8.6em;
        position: relative;
        margin: 0.4em; padding: 0;
      }
      * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
        margin-bottom: -0.4em;
      }
      *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
        margin-bottom: -0.1em;
      }

      ul#Navigation li ul {
        margin: 0; padding: 0;
        position: absolute;
        top: 1.7em; left: -0.4em;
      }
      * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
        left: -1.5em;
        lef\t: -0.4em;
      }
      ul#Navigation li ul li {
        float: none;
        display: block;
        margin-bottom: 0.2em;
      }

      ul#Navigation a, ul#Navigation span {
        display: block;
        padding: 0.2em 1em;
        text-decoration: none; font-weight: bold;
        border: 1px solid black;
        border-left-color: white; border-top-color: white;
        color: maroon; background-color: #ccc;
      }
      * html ul#Navigation a, * html ul#Navigation span {  /* nur fuer IE erforderlich */
        width: 100%;
        w\idth: 6.4em;
      }
      ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
        border-color: white;
        border-left-color: black; border-top-color: black;
        color: white; background-color: gray;
      }
      li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
        color: maroon; background-color: silver;
      }
      ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
        background-color: maroon;
      }

    </style>
    </head>
    <body>
      <h1 id="Beispiel">Geteilte Navigationsleisten</h1>

      <div id="Rahmen"><ul id="Navigation">
        <li><a href="#Beispiel">Seite 1</a></li>

        <li><a href="#Beispiel">Seite 2</a>
          <ul>
            <li><a href="#Beispiel">Seite 2a</a></li>
            <li><a href="#Beispiel">Seite 2b</a></li>
          </ul>
        </li>

        <li><a href="#Beispiel">Seite 3</a></li>

        <li><a id="aktuell" href="#Beispiel">Seite 4</a>
          <ul>
            <li><a href="#Beispiel">Seite 4a</a></li>
            <li><span>aktuelle Seite</span></li>
            <li><a href="#Beispiel">Seite 4c</a></li>
          </ul>
        </li>

        <li><a href="#Beispiel">Seite 5</a></li>
      </ul><div></div></div>

    </body>
    </html>

### Erläuterung:

Bei dieser Navigationsleiste muss ein Umbruch verhindert werden, um die richtige Reihenfolge der angezeigten Menüpunkte zu gewährleisten. Dazu ist eine ausreichend große Breite anzugeben, die allerdings nicht der Liste selbst zugewiesen werden sollte, da dies in einigen Browsern zu einer fehlerhaften Darstellung führt. Daher wird ein zusätzliches Element (`div#Rahmen`) um die Navigationsleiste gesetzt, welches auch die Definitionen für den Rahmen und die Hintergrundfarbe übernimmt. Als Element ohne semantische Bedeutung hat es ohne CSS keine Auswirkung auf die Darstellung. Da die Listenpunkte über `float` aus dem Elementfluss genommen sind, muss ein zusätzliches, innerhalb des Rahmens notiertes Element mit der CSS-Eigenschaft `clear` den Elementfluss wieder herstellen. Auch hierzu wird ein leeres `div`-Element (`<div></div>`) verwendet.

Die verschachtelten Listen der zweiten Ebene werden über den Nachkommen-Selektor `ul#Navigation li ul` absolut unterhalb des dazugehörigen Listenpunktes positioniert. Für die Listenpunkte der zweiten Ebene wird über den Nachkommen-Selektor `ul#Navigation li ul li` die Eigenschaft `float` aufgehoben.

In diesem Beispiel ist ein Menüpunkt der zweiten Ebene als aktuelle Seite nicht verlinkt, sondern mit dem Element `<span>` ausgezeichnet und über CSS gesondert formatiert. Um auch den dazugehörigen Menüpunkt der ersten Ebene über CSS hervorheben zu können, wird für diesen die `id="aktuell"` angegeben.

Moderne Browser ermöglichen auch, die Navigation der zweiten Ebene dynamisch einzublenden. Hierzu ist nur eine kleine Ergänzung im Stylesheet erforderlich:

### Beispiel:

Anzeigebeispiel: So sieht's aus

      /* Erweiterung zur dynamischen Ein-/Ausblendung */
      ul#Navigation li>ul {
        display: none; top: 1.6em;
      }
      ul#Navigation li:hover>ul, ul#Navigation li>a#aktuell+ul {
        display: block;
      }

      /* Workaround fuer den IE 7 */
      *:first-child+html ul#Navigation ul {
        background-color:silver; padding-bottom:0.4em;
      }

### Erläuterung:

Über den Kind-Selektor `li>ul` werden die Listen der zweiten Ebene zunächst mittels `display:none` ausgeblendet. Beim Überfahren mit der Maus werden sie über den Selektor `ul#Navigation li:hover>ul` mit `display:block` wieder angezeigt; ebenso die aktuell ausgewählte Liste über den komplexen Selektor `ul#Navigation li>a#aktuell+ul`, der nur die `ul`-Liste anspricht, die auf den Link `a#aktuell` folgt, welcher Kindelement eines `li` in der `ul#Navigation` ist. Damit die beim Überfahren mit der Maus eingeblendete Liste beim Ansteuern ihres ersten Menüpunktes nicht wieder ausgeblendet wird, muss sie etwas höher positioniert werden, sodass sie den Listenpunkt der ersten Ebene überlappt. Wenn Sie genau hinsehen, bemerken Sie hier einen etwas geringeren Abstand als den über `margin` für die verschachtelten Listenpunkte angegebenen.

Damit dieses Beispiel auch bei mehreren Untermenüpunkten im Internet Explorer 7 noch funktioniert, ist für den IE 7 eine Hintergrundfarbe für die Unternavigation angegeben.

### Beachten Sie:

Dieses Beispiel funktioniert in modernen Browsern zufriedenstellend. Im Internet Explorer bis zur Version 6 und älteren Browsern sind rein auf CSS basierende dynamische Navigationsleisten grundsätzlich nicht möglich, da sie den Zustand `:hover` nur auf Links - genauer `a`-Elemente mit dem Attribut `href` - anwenden können und diese nicht ineinander verschachtelt werden dürfen. Da diese Browser aber auch die hier verwendeten Selektoren nicht interpretieren können, stellen sie dieses Beispiel wie das vorherige ohne Dynamik dar.

## Dynamische CSS-Navigation für moderne Browser

Dieses Beispiel basiert ebenfalls auf der obigen geteilt dargestellten verschachtelten Liste. Die Unternavigation ist hier ausgeblendet und wird allen modernen Browsern beim Überfahren mit der Maus angezeigt. Sofern Sie die Menüpunkte der ersten Ebene mit Übersichtsseiten für ältere Browser verlinken und damit auch einer Tastatursteuerung zugänglich machen, ist eine solche dynamische Navigationsleiste auch praktisch einsetzbar. Die Übersichtsseiten könnten neben Verweisen auf die Menüpunkte der weiteren Ebenen auch eine Einleitung zur jeweiligen Rubrik enthalten.

### Beispiel:

Anzeigebeispiel: So sieht's aus

      body {
        font: normal 100.01% Helvetica, Arial, sans-serif;
        color: black; background-color: #ffffe0;
      }

      div#Rahmen {
        width: 47.1em;
        padding: 0.8em;
        border: 1px solid black;
        background-color: silver;
      }
      * html div#Rahmen {  /* Korrektur fuer IE 5.x */
        width: 48.7em;
        w\idth: 47.1em;
      }
      div#Rahmen div {
         clear: left;
      }
      ul#Navigation {
        margin: 0; padding: 0;
        text-align: center;
      }

      ul#Navigation li {
        list-style: none;
        float: left;  /* ohne width - nach CSS 2.1 erlaubt */
        position: relative;
        margin: 0.4em; padding: 0;
      }
      * html ul#Navigation li {  /* Korrektur fuer den IE 5 und 6 */
        margin-bottom: -0.4em;
      }
      *:first-child+html ul#Navigation li {  /* Korrektur fuer den IE 7 */
        margin-bottom: -0.1em;
      }

      ul#Navigation li ul {
        margin: 0; padding: 0;
        position: absolute;
        top: 1.6em; left: -0.4em;
        display: none;  /* Unternavigation ausblenden */
      }
      * html ul#Navigation li ul {  /* Korrektur fuer IE 5.x */
        left: -1.5em;
        lef\t: -0.4em;
      }
      *:first-child+html ul#Navigation ul {  /* Workaround fuer den IE 7 */
        background-color:silver; padding-bottom:0.4em;
      }
      ul#Navigation li:hover ul {
        display: block;  /* Unternavigation in modernen Browsern einblenden */
      }
      ul#Navigation li ul li {
        float: none;
        display: block;
        margin-bottom: 0.2em;
      }

      ul#Navigation a, ul#Navigation span {
        display: block;
        width: 6.4em;  /* Breite den in li enthaltenen Elementen zuweisen */
        padding: 0.2em 1em;
        text-decoration: none; font-weight: bold;
        border: 1px solid black;
        border-left-color: white; border-top-color: white;
        color: maroon; background-color: #ccc;
      }
      * html ul#Navigation a, * html ul#Navigation span {
        width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */
        w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkonformen Modus */
      }
      ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
        border-color: white;
        border-left-color: black; border-top-color: black;
        color: white; background-color: gray;
      }
      li a#aktuell {  /* aktuelle Rubrik kennzeichnen */
        color: maroon; background-color: silver;
      }
      ul#Navigation li ul span {  /* aktuelle Unterseite kennzeichnen */
        background-color: maroon;
      }

### Erläuterung:

Über den einfachen Nachkommen-Selektor `ul#Navigation li ul` wird die Unternavigation hier für alle nicht ganz veralteten Browser ausgeblendet. Eingeblendet wird sie dagegen nur noch von modernen Browsern beim Überfahren mit der Maus. Benutzer älterer oder diesbezüglich fehlerhafter Browser können jedoch über den Umweg der in der Hauptnavigation verlinkten Übersichtsseiten auch zum Ziel gelangen.

Die Breite der Menüpunkte ist hier nicht für `<li>` angegeben, sondern für die hierin enthaltenen Elemente. Diese nach CSS 2.1 gültige Möglichkeit, `float` ohne Angabe von `width` zu verwenden, beseitigt auch die fehlerhafte Darstellung des vorherigen Beispiels in Opera 7. Für den Internet Explorer 5.x ist die Breite nach dem fehlerhaften Microsoft-Boxmodell angegeben.

### Beachten Sie:

Testen Sie eine solche Navigationsleiste in möglichst vielen Browsern, da die hier verwendete Methode einige Browser überfordern könnte!

Um ein dynamisches Einblenden der Unternavigation auch im Internet Explorer 5 und 6 und anderen Browsern ohne ausreichende CSS-Implementierung zu ermöglichen, bleibt Ihnen derzeit nur eine Realisierung über JavaScript. Es ist jedoch sinnvoll, dies mit der hier gezeigten Möglichkeit zu kombinieren.

Die folgende, im `<head>`-Bereich des obigen Beispiels eingefügte JavaScript-Funktion ermöglicht die dynamische Anzeige der Unternavigation auch dem Internet Explorer 5 und 6.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <script type="text/javascript">
    if(window.navigator.systemLanguage && !window.navigator.language) {
      function hoverIE() {
        var LI = document.getElementById("Navigation").firstChild;
        do {
          if (sucheUL(LI.firstChild)) {
            LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
          }
          LI = LI.nextSibling;
        }
        while(LI);
      }

      function sucheUL(UL) {
        do {
          if(UL) UL = UL.nextSibling;
          if(UL && UL.nodeName == "UL") return UL;
        }
        while(UL);
        return false;
      }

      function einblenden() {
        var UL = sucheUL(this.firstChild);
        UL.style.display = "block"; UL.style.backgroundColor = "silver";
      }
      function ausblenden() {
        sucheUL(this.firstChild).style.display = "none";
      }

      window.onload=hoverIE;
    }
    </script>

### Erläuterung:

Um unerwünschte Auswirkungen in anderen Browsern zu vermeiden, wird das Script über eine Browserweiche nur dem Internet Explorer (auch der Macintosh-Version) zugänglich gemacht. Die Funktion `hoverIE` wird vom Script mittels Event-Handler `onload` aufgerufen und erfordert keine weiteren Änderungen am HTML-Quelltext. Das Script durchsucht die in der `ul id="Navigation"` enthaltenen Knoten und blendet die hierin verschachtelten `ul`-Elemente über die CSS-Eigenschaft `display` beim Überfahren mit der Maus (`onmouseover`) ein bzw. beim Verlassen (`onmouseout`) wieder aus. Dies erfordert beim Internet Explorer jedoch zusätzlich eine Änderung der Hintergrundfarbe (`backgroundColor`).

Um den Internet Explorer 7 von diesem Script auszuschließen, können Sie es in einen conditional comment (`<!--[if lt IE 7]> <![endif]-->`) setzen, wenn Sie auf die Unterstützung der alten Macintosh-Version verzichten.

### Beachten Sie:

Da die Interpretation von JavaScript nicht grundsätzlich vorausgesetzt werden kann und auch andere ältere Browser die Unternavigation nicht darstellen, ist diese Funktionalität nur ergänzend nutzbar und Sie sollten auf die beim obigen Beispiel angesprochene alternative Verlinkung nicht verzichten.

| CSS-Browserweichen zum Ausschließen älterer Browser
| Fixe Bereiche mit CSS-basierten Layouts

© 2007 Impressum