HTML5 / CSS3 - Praxistutorial 2 - Das Ausklappmenü Teil 1

1. Die Abschnitte

2. Das Finale

Jetzt nehmen wir uns endlich mal die Untermenüs vor. Da liegt ja noch einiges im Argen. Die ie.css ist ja dafür gedacht, alle Gemeinsamkeiten der verschiedenen Versionen unseres Lieblingsbrowsers abzudecken. UM das zu testen, schreib einfach mal ein body {background: #f00;} hinein.

3. So

Im 8er passts, im 9er auch und selbst im 10er ist der Hintergrund jetzt "schön" rot. Aber verflucht, in der neuesten Version fehlen auf einmal die Textschatten. Wo zum Teufel sind die denn wieder hin? Na, dämmerts? Genau, denkt mal an das X-UA-Compatible in der index.htm. Steht das was vom 10er drin? Nö. Und wenn ihr euch den Dokumentmodus anseht, habt ihr es auch schwarz auf weiß. Also muss das um den entsprechenden Eintrag ergänzt werden. Das Ergebnis sähe dann so aus.


<meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10">

Aber!

Auf einmal ist der Hintergrund im 10er wieder weiß. Tja, das habe ich an dieser Stelle schon erwähnt. Besagte Version ignoriert diese Anweisung im Standardmodus, weil sich Microsoft peu à peu von irgendwelchen Hacks verabschieden möchte. Gut für die Standards, schlecht für uns. Zumindest in diesem Tutorial.

4. Was tun?

Sprach Zeus. Denn jetzt haben wir ein echtes Problem. Conditional Comments funktionieren nicht, aber wir brauchen aber trotzdem entsprechende CSS-Hacks. Was gibt es sonst für Möglichkeiten?

Per JavaScript den Browser abfragen und die Einbindung der ie.css damit vornehmen
Browser mit PHP abfragen und ie.css mittels echo einbinden.

Ich persönlich bevorzuge zwar die Variante mit PHP aber in diesem Fall machen wir es mit JavaScript. Und zwar mit ausnahmsweise mal mit innerHTML. Dazu muss einfach der folgende Code an einer beliebigen Stelle unterhalb des öffnenden <head> eingebaut werden. Ich hab ihn einfach in Selbiges gepackt.


<script type="text/javascript">
  if(navigator.userAgent.match(/MSIE/)) {
    var head = document.getElementsByTagName('head')[0];
    var link = '<link rel="stylesheet" href="ie/ie.css" type="text/css" />';
    head.innerHTML += link;
  }
</script>

Jetzt sollte in allen drei Versionen der Hintergrund rot sein. Wenn dem so ist, löscht den entsprechenden Eintrag aus der ie.css und wir machen weiter. Wenn nicht, geht mal schön auf Fehlersuche.

5. Der Rollover-Effekt

... läuft bis jetzt immer noch sehr hakelig. Und wie ich schon sagte, hat das unterschiedliche Ursachen. Also nehmen wir uns jede Version einzeln vor.

Der IE 8

Da der kein box-shadow beherrscht, gibt es natürlich ein paar "Löcher" im Ausklappmenü. Und sobald man sich mit der Maus darüber befindet, verschwindet das jeweilige Element wieder. Also muss man statt dessen mit einem dicken Rahmen arbeiten.


header nav ul a {
  border: 3px solid #0ff;
}

Und natürlich wird das padding der einzelnen Listenelemente jetzt nicht mehr benötigt. Beide Einträge gehören übrigens in die ie8.css.


header nav ul ul li {
  padding: 0;
}

Leider

... befindet sich das Menü nun hinter dem linken <aside>-Element. Darum muss man hier den z-index ändern. Ach ja, viele arbeiten ja sehr gerne mit riesengroßen Zahlen wie die ach so beliebte 9999. Das ist überhaupt nicht nötig, hier zum Beispiel reicht eine pisselige 1 völlig aus.


header nav ul div {
  z-index: 1;
}

Ein Tipp

Arbeitet bei so was mit Zehnerschritten, da habt ihr noch genug Luft für zusätzlich auftauchende Elemente. Aber lasst um Himmels Willen diese Tausenderschritte sein.

Der IE 9

Bei dem verschwindet das jeweilige Ausklappmenü, sobald man mit der Maus kurz vor selbigen steht. Das liegt daran, dass die jeweiligen <div>-Elemente um sage und schreibe 1 Pixel zu weit unten steht. Also korrigiert man das in der ie9.css wie folgt.


header nav ul div {
  top: 18px;
}

Es gibt allerdings noch ein ähnliches Phänomen wie im 8er, aber das verschwindet erstaunlicherweise von selbst. Und wie man das erreicht, zeige ich jetzt.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt