Wie erstelle ich diese coolen Untermenüs, die erscheinen, wenn ich mit der Maus über einen Button fahre? Navigationsleisten mit mehreren Menüebenen, die bei Bedarf herausfahren oder aufklappen, sind äußerst beliebt. Sie bieten eine ideale Möglichkeit, eine Menge Links in eine kompakte Navigationsleiste zu packen. Hierfür gibt es mehrere Herangehensweisen. Zuerst die reine CSS-Lösung. Ein sehr beliebtes Vorgehen für hierarchische Aufklappmenüs heißt »Son of Suckerfish«. (Die Vorgängerversion hieß einfach »Suckerfish«.) Die Details finden Sie unter der Adresse http://www.htmldog.com/articles/suckerfish/. Eine gute (englische) Anleitung für die Erstellung horizontaler Aufklappmenüs mit mehreren Ebenen finden Sie unter der Adresse www.tanfa.co.uk/css/examples/menu/tutorial-h.asp. Auf der gleichen Website befindet sich auch eine Anleitung für die Erstellung vertikaler Menüs mit aufklappbaren Untermenüs: www.tanfa.co.uk/css/examples/menu/tutorial-v.asp. Ein Nachteil der reinen CSS-Lösungen besteht darin, dass die Untermenüs sofort wieder verschwinden, sobald sich der Mauszeiger des Benutzers nicht mehr darüber befindet. Sie können entweder darauf vertrauen, dass alle Ihre Benutzer hervorragende Reflexe haben, oder Sie verwenden einen anderen Ansatz: Benutzen Sie CSS, um die Buttons zu gestalten, und JavaScript, um die Funktionen der Untermenüs zu steuern. Sie finden verschiedene JavaScript-gesteuerte …

Wenn sich die Buttons in Ihrer Navigationsleiste berühren und Sie jeden Link mit einem Rahmen versehen, werden zwischen den Links die Begrenzungslinien doppelt dargestellt. Die unteren und oberen Rahmenlinien berühren sich. Das können Sie umgehen, indem Sie nur die untere Rahmenseite weglassen. Auf diese Weise wird zwischen den Links jeweils nur eine Begrenzungslinie angezeigt. Durch diese Methode fehlt jetzt aber die Begrenzungslinie unterhalb des letzten Links. Das können Sie jedoch beheben, indem Sie eine Klasse für die richtigen Rahmeneinstellungen definieren und diese dem letzten Link zuweisen. Noch besser ist es, wenn Sie die untere Rahmenseite einfach für das <ul>-Element definieren, das die Navigationsleiste umgibt. Auszug aus dem neuerschienenen CSS Missing Manual von David Sawyer McFarland.

Wann werde ich jemals einen Kind-Selektor benutzen? Ich kenne so viele Selektoren, dass ich im Prinzip auf jedes Seitenelement zugreifen kann. Warum sollte ich also einen weiteren lernen? Allerdings gibt es im Webdesign eine Herausforderung, bei der Kind-Selektoren unschlagbar sind und die auf mehr Websites vorkommt, als Sie denken. Jedes Mal wenn Sie mit verschachtelten, ungeordneten Listen (wie in der Abbildung oben) arbeiten, können Sie Kind-Selektoren verwenden, um diese Kategorien und Unterkategorien visuell voneinander zu unterscheiden. Sie können die erste Ebene der Einträge anders gestalten als die zweite usw. Auf diese Weise präsentierte Inhalte wirken aufgeräumt, professionell und lesbar (und Ihre Besucher werden Sie dafür lieben). Legen Sie hierfür zuerst eine klassenbasierte Stildefinition für die oberste Listenebene an, z.B. mit dem Namen .hauptListe. Für diese Ebene soll eine serifenlose Schrift (sans-serif, z.B. Helvetica oder Arial) verwendet werden, die etwas größer ist als der übrige Text, vielleicht fett oder in einer anderen Farbe. Die folgenden Ebenen erhalten eine kleine Schriftgröße, dafür aber eine Serifenschrift (z.B. Times), um die Lesbarkeit zu erhöhen. Gerade bei viel Text hilft …