Webdesign, Tutorials und mehr - Webmasterpro.de

Problematik von reinen CSS Hover-Subnavigations

Viele Webseiten, speziell für Webmaster, bieten Skripte u.Ä. für Navigationen an, deren Untermenüs allein durch ein Hover der Hauptmenüpunkte aufklappen.

Einige dieser Skripte sollen sogar ohne Javascript, allein mit CSS auskommen. Dies ist zwar möglich, jedoch nur durch sehr unschöne Weichen, da für eine Interkompatibilität zwischen alten Internet Explorern und aktuellen Browsern ein unterschiedliches HTML-Gerüst benötigt wird.

Idee zur Umsetzung

Die Idee zur Umsetzung solcher Menüs besteht darin, den CSS-Pseudo-Selektor :hover zu nutzen um ganze Untermenüs mittels visibility:hidden; oder display:none; aus- bzw. einzublenden.

Da die XPath-Technologie zur der Zeit, zu der die heute genutzten Browser entwickelt worden sind noch nicht ausgereift war, -oder aus anderen Gründen nicht komplett in den Browsern interpretiert wird, ist es nicht möglich Nodes die in einem anderen Ast des XML-Baumes liegen zu selektieren.
So ist es notwendig, das ein Untermenü im XML-Baum unterhalb der Node liegt, die das :hover Event wirft.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

<navigation>
  <main>
    Design
    <sub>Photoshop</sub>
    <sub>Farblehre</sub>
  </main>
  <main>
    Entwicklung
    <sub>XHTML</sub>
    <sub>CSS</sub>
    <sub>Javascript</sub>
  </main>
</navigation>

Zwei Wege, Keine Lösung

Quirksmode und Co. für den Alten von Microsoft

Als CSS diese Welt erblickte und die ersten Browser anfingen CSS zu interpretieren, gab es den Pseudo-Selektor :hover nur für <a> -Tags. So ist man bei der suche nach einer Lösung für diese Art von Menüs im Internet Explorer 6 und Älteren dazu gezwungen, Hauptmenüpunkt sowie Untermenü in die <a> -Tags zu stopfen.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<ul id="navigation">
  <li class="main">
    <a class="forHover">
      Design
      <ul>
        <li class="sub"><a>Photoshop</a></li>
        <li class="sub"><a>Farblehre</a></li>
      </ul>
    </a>
  </li>
  <li class="main">
    ...
  </li>
</ul>

1
2
3
4
5

a.forHover ul{
  visibility:hidden;}

a.forHover:hover ul{
  visibility:visible;}

Diese Umsetzung Funktioniert in alten Browsern und ist dort die einzige Möglichkeit solche Menüs mit reinem CSS umzusetzen.

Jedoch hat diese Umsetzung folgende Nachteile:

• Der Code ist nicht Valide und zwingt den Browser in den Quirksmode, da unterhalb des <a> -Tags keine weiteren Block-Elemente erlaubt sind.
• Der Code funktioniert in aktuellen Browsern nicht, da ein Hover der inneren Links den Hover der Äußeren aufheben-, und die Anzeige des Untermenüs unterbinden würde.

Saubere CSS und valider Code mit den aktuellen Browsern

Aktuell wird der :hover -Pseudo-Selektor auch bei vielen anderen Elementen als nur dem <a> -Tag erlaubt. So erklärt man schon den Listenpunkt zum Aufklapper, was wiederum das Einklappen beim Hovern innerer Links verhindert.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<ul id="navigation">
  <li class="main">
    Design
    <ul>
      <li class="sub"><a>Photoshop</a></li>
      <li class="sub"><a>Farblehre</a></li>
    </ul>
  </li>
  <li class="main">
    ...
  </li>
</ul>

1
2
3
4
5

li.main ul{
  visibility:hidden;}

li.main:hover ul{
  visibility:visible;}

Nachteile dieser Umsetzung:

• Der Code funktioniert nur wenn der Pseudo-Selektor :hover auch für andere Elemente als nur den <a> -Tag interpretiert wird.

Zusammenfassung

Wie man sieht, ist es nicht wirklich Möglich, eine solche, universell einsetzbare Navigation nur in CSS umzusetzen. Das letzte Skript das ich sah und welches von sich behauptete dies zu können, basierte auf eine Unmenge an Conditional-Tags für den Internet Explorer.

Über den Autor: Simon Bethke

macht zur Zeit eine Ausbildung zum Fachinformatiker für Anwendungsentwicklung. Im Rahmen dieser Ausbildung lernt er vor allem den Umgang mit JAVA und Oracle. Als Nebenjob arbeitet Simon nun seit 6 Jahren bei einer kleinen Webdesignfirma wo er maßgeblich am Layout und der validen, technischen Umsetzung der Webseiten beteiligt ist.
Profilseite betrachten

Kommentare: Problematik von reinen CSS Hover-Subnavigations