Das Navigationsmenü von Kram-hochladen.de funktioniert zuverlässig in allen Browsern - sogar im Internet Explorer. Augenscheinlich sogar ohne Javascript und nur mit CSS, was aber, wenn man die IE betrachtet, nur bedingt stimmt. Aufgrund mehrfacher Anfragen habe ich dieses kompaktes Tutorial für die bei KH eingesetzte Art der Navigation geschrieben.

HTML-Struktur

Die Struktur der Navigation setzen wir sinnvollerweise als Liste in HTML um.

<ul id="navi">
  <li><a href="#">Willkommen</a></li>
  <li><a href="#">Über uns</a>
    <ul>
      <li><a href="#">Angebot</a></li>
      <li><a href="#">Geschichte</a></li>
      <li><a href="#">Jobs</a></li>
    </ul>
  </li>
  <li><a href="#">Projekte</a>
    <ul>
      <li><a href="#">Alpha</a></li>
      <li><a href="#">Beta</a></li>
      <li><a href="#">Gamma</a></li>
    </ul>
  </li>
  <li><a href="#">Impressum</a></li>
</ul>

In Sachen HTML ist damit auch schon die Arbeit getan, der Rest ist (fast) komplett mit CSS zu erledigen.

Gestaltung mit CSS

Bevor wir uns an die Funktionalität machen, wird die Liste zunächst optisch etwas zweckdienlicher gestaltet. Vor allem müssen die Listen von ihren üblichen Formatierungsmerkmalen (Aufzählungszeichen, Margins usw.) befreit werden. Wer schlau ist und einen Reset-Stylesheet benutzt, kann sich diesen Schritt natürlich sparen.

#navi, #navi ul {
    list-style-type:none;
    margin:0;
    padding:0;
}

Als nächstes werden die Oberpunkte der Navigation (im Beispiel: Willkommen, Über uns, Projekte und Impressum) horizontal angeordnet und in Form gebracht.

#navi li {
    width:128px;
    float:left;
}

Aufklapp-Funktion mit CSS

Um das Auf- und Einklappen des Menüs zu realisieren, bedienen wir uns der Pseudoklasse :hover. Die Listen mit den Unterpunkten werden ganz einfach ausgeblendet und nur dann angezeigt, wenn ihr Elternelement (das <li> des Oberpunktes) einen Mouseover meldet.

#navi li ul {
    display:none;
}
#navi li:hover ul {
    display:block;
}

Das wäre es eigentlich auch schon... gäbe es da nicht den immer noch verbreiteten Internet Explorer 6.

IE-Tauglichkeit mit HTC

Der IE6 unterstützt :hover ausschließlich für Links. Wie so oft hilft in solchen Fällen ein HTC-Script, mit dem man dem Browser nicht nur PNG-Unterstützung, sondern auch andere moderne Features beibringen kann - so auch :hover-Support für alle Elemente. Das unter LGPL stehende Script whatever:hover ist genau das, was wir brauchen.

Der Einbau erfolgt im Idealfall mittels einem mit Conditional Comments eingebundenen IE-Stylesheet.

body {
    behavior:url("csshover.htc");
}

Schon unterstützt der Internet Explorer :hover als hätte er es immer schon gekonnt. Die Navigation ist damit einsatzbereit.

Schlussbetrachtungen

Wie es die Überschrift des Artikels schon verrät, ganz ohne Javascript geht es eben nicht - eine HTC-Datei enthält nichts anderes als spezialisiertes JS. Das bedeutet auch, dass das Menü in einem Internet Explorer mit abgeschaltetem Javascript streikt.

Damit die Navigation auch schön aussieht, ist natürlich weiteres Styling nötig. Insbesondere müsste das Menü so positioniert werden, dass bei Aus- und Einklappen nicht darunter liegende Elemente verschoben werden. Eine andere Anordnung oder noch tiefere Verschachtelung ist natürlich auch immer möglich.

Wie so eine Navigation aussehen kann, lässt sich auf dieser Beispielseite (mit reichlich kommentierten CSS) betrachten.