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

1. Die Abschnitte

2. Ein Rahmenbild

... darf natürlich nicht fehlen. Und weil ich weiß Gott keiner der Kreativsten einer bin, greife ich einfach auf das Beispielbild aus der Theorie zurück. Nur diesmal werden wir das ein wenig verfremden, damit ihr das Prinzip besser sehen könnt. Fangen wir mit der Rahmendicke an. Denn die liegt nur bei 20 Pixeln, ist also kleiner als die einzelnen Segmente des Bildes (27 Pixel).


header nav ul ul {
  border: solid 20px;
  ...
}

So

Zuerst nehmen wir für die einzelnen Bildbereiche die Originalwerte für die Ausschnittsangabe, also 27 Pixel.


header nav ul ul {
  ...
  border-image: url('pics/subnav.gif') 27 27 27 27 round round;
  -o-border-image: url('pics/subnav.gif') 27 27 27 27 round round;
  -webkit-border-image: url('pics/subnav.gif') 27 27 27 27 round round;
}

Dann könnt ihr wunderbar sehen, dass das das Rahmenbild entsprechend zur Dicke skaliert wird. Aber jetzt kommt es richtig dicke. Ändert die Angaben für die Segmentbereiche so:


27 15 27 15

Oha

... wird jetzt sicher der eine oder andere sagen und sich fragen, was passiert ist. Nun wir haben die Ausschnitte für das Rahmenbild so angepasst, dass es nicht mehr richtig passt. Das führt zu diesem seltsamen Effekt. Um das besser zu verstehen, solltet ihr einfach mit den einzelnen Werten herumspielen, dann begreift ihr es schon.

3. Die Untermenüs platzieren

Jetzt werdet ihr endlich erfahren, was das position:relative bei header nav > ul > li sollte. Also, die <li>s der ersten Ebene sind relativ positioniert. Das es aber keine weiteren Angaben dazu gibt, hat das auf besagte Elemente keine Auswirkung. Aber auf untergeordnete schon, besonders wenn man wie hier mit position: absolute arbeitet.


header nav ul div {
  position: absolute;
  ...
}

Da die Untermenüs jetzt absolut positioniert sind, fallen sie natürlich aus dem Elementfluss heraus. Das kann man schön an der Höhe des blauen Verlaufs sehen. Und ihr habt sicher bemerkt, dass sie links auf gleicher Höhe mit den übergeordneten <li>s stehen (denkt dabei immer an das margin-left: 23px; bei den Links (header nav ul a). Denn das sorgt dafür, dass sie allen untereinander linksbündig sind. Leider klatschen die Untermenüs jetzt fast direkt an den Linktext an. Aber darauf habe ich ja schon hingewiesen. Die Links sind keine Blockelemente, also wird das padding nach unten von nachfolgenden Elementen ignoriert. Und das müssen wir ausgleichen.

Jetzt auf Höhe bringen

Und zwar genau unterhalb des blauen Verlaufs.


header nav ul div {
  ...
  top: 19px;
  padding-top: 11px;
}

Erläuterung

An dieser Stelle muss ich ins Detail gehen. Damit später der Hover-Effekt funktioniert, müssen die oberen Links und die jeweiligen Untermenüs ohne Abstand zueinander stehen. Das erreichen wir mit top: 19px;. Und noch mal, der box-shadow mit einer Dicke von insgesamt 3 Pixeln gehört nicht dazu! Das padding-top: 11px; sorgt dann dafür, dass das <ul> im <div> so weit nach unten rutscht, dass es direkt am blauen Verlauf steht.

Zwei Hinweise

Jetzt versteht ihr sicher auch, warum ich um die Untermenüliste noch ein <div<>-Element gepackt habe. Ersteres bekommt ein Rahmenbild und Letzteres benötigen wir ausschließlich für den Abstand. Ist zwar semantisch nicht so pralle, aber hier fordert das Design (muahaha) seinen Tribut. Und noch etwas. Nehmt euch das <div<> mal mit einem Webdeveloper-Tool eurer Wahl (wie zum Beispiel Firebug) unter die Lupe. Dann könnt ihr sehr schön sehen, wie das mit dem top und padding-top funktioniert.

Zu guter Letzt

... wird das <div<> wieder unsichtbar gemacht. Entfernt also die Auskommentierung um das display: none.

4. Der Hover-Effekt

... ist ziemlicher Pillepups.


header nav > ul > li > a:hover + div,  header nav > ul > li div:hover {
  display: block;
}

Erläuterung

`header nav > ul > li > a:hover + div`

Dieser Selektor greift, wenn ein Link der Navigation (nav > ul > li > a:hover) mit der Maus überfahren wird. Und beziehen tut er sich dann auf den direkten Nachfolge-Selektor, also dem <div<> mittels a:hover + div.

`header nav > ul > li div:hover`

Diesen Selektor benötigen wir, damit man mit der Maus in das Untermenü hineinfahren kann, ohne das dieses verschwindet, wenn der Link keinen Fokus mehr hat.

5. Und jetzt der Internet Explorer 9 und 10

Wen ihr beide zur Verfügung habt, so schaut euch jetzt mal das Ergebnis an. Also im 10er sieht soweit alles gut aus, bis auf den grauen Rahmen, wo eigentlich das Rahmenbild sein sollte. Denn leider kann auch der noch kein border-image.

Und im 9er

Nichts, rein gar nichts!!! Alles im Ar*** und nichts funktioniert!!! Selbst die Schrift stellt er nicht dar!!! Nun, zu letzterem Problem habe ich mich schon an dieser Stelle ausgekotzt. Kommen wir daher zu den übrigen Problemen.

Bei denen dagegen ist die Anwort ganz einfach. Der kennt die neuen HTML5-Elementen wie <header>, <footer> oder <nav> noch nicht. Und darum hat er hier auch so große Probleme bei der Darstellung. Wie man das umgeht und so entwickelt, dass es selbst im IE 8 funktioniert, erkläre ich euch im nächsten Tutorial. Und ich zeige euch auch, wie man das Problem mit border-image zumindest ansatzweise umgehen kann.

Ätsch!

Tja Leute, das Prinzip von Seifenopern ist auch mir bekannt. Vor allem seit den frühen 80ern, wo meine Mutter und Schwester abends immer Dallas sehen mussten. Erst macht man einem den Mund wässrig und am Ende erfährt man, dass es erst in der nächsten Folge weiter geht. Geduldet euch also ein wenig, des Rätsels Lösung naht und läuft bald auf diesem Kanal.

zurück zum vorherigen Abschnitt