Fixer Kopf: Feststehendes Menü im Seitenkopf
Peter Bergner am 15.08.2004 – 4 Kommentare
Dieses kurze Tutorial beschreibt, wie Sie einen feststehenden Bereich im "Kopf" einer Webseite erstellen, der auch beim Scrollen des Inhalts permanent sichtbar bleibt.
Das hat unter anderem den Vorteil, dass Besucher die Hauptnavigation immer im Blick haben. Nicht ganz so erfahrene Internetnutzer bekommen dadurch die zusätzliche Sicherheit, nicht "verloren" zu gehen.
Wie das fertige Skript funktioniert, lässt sich an diesem Beispiel sehen.
Wie leider allzu oft wird auch in diesem Fall, der Internet Explorer mit seiner "Extrawurst" versorgt. Aber dazu später mehr.
Beginnen Sie wie immer mit dem Anlegen der HTML-Struktur.
Für unser Beispiel definieren Sie dazu das Menü mit einem <div>-Element, dem Sie die ID "menu" zuweisen.
<body>
<div id="menu">
<p>Ein Absatz als Platzhalter</p>
</div>
</body>Anschließend definieren Sie unterhalb des Menüs ein weiteres div-Element mit der ID "rahmen" oder "nest" (Der Name der ID steht Ihnen selbstverständlich frei, sollte aber aussagekräftig sein).
Dieses Element wird später den gesamten Inhalt Ihrer Seite aufnehmen.
<body>
<div id="menu">
<p>Ein Absatz als Platzhalter</p>
</div>
<div="rahmen">
<div="inhalt">Hier wird Ihr Inhalt stehen</div>
</div>
</body>Wie Sie im Beispiel sehen, habe ich auch gleich das Element
<div id="inhalt"> ins Element <div id="rahmen"> eingefügt. Und damit ist unsere einfache HTML-Struktur auch schon fertig.
Wenden wir uns jetzt der CSS-Codierung zu.
Legen Sie eine CSS-Datei mit dem Namen "menu.css" an, die folgende CSS-Anweisung enthält (die einzelnen Anweisungen erläutere ich danach):
Inhalt der CSS-Datei "menu.css":
body {
height:100%;
margin:0;
padding:0;
}
#menu {
left:0;
top:0;
width:100%;
height:80px;
background:yellow;
z-index:4;
}
body>#rahmen { padding-top:80px; }
body>#menu { position:fixed; }
body>#inhalt { position:static; }Zum ersten body-Selektor: Die Anweisung height:100% dürfte selbsterklärend und damit klar sein. Wichtig ist die Anweisungen margin:0 und padding:0. Beide benötigen Sie, um die "blinden" Platzhalter für den Scrollbalken im Internet Explorer abzuschalten. (Dazu später mehr in der CSS-Datei für IE.)
Mit der Anweisung z-index:4 positionieren Sie das menu-Element virtuell über allen anderen Elementen (die dadurch beim Scrollen unter ihm "durchrutschen" können).
Der ID-Selektor "#menu" bedarf eigentlich keiner weiteren Erklärung. Wichtig ist, dass Sie mit der Angabe width:100% Ihre Menübox über die ganze Breite des Viewports (Browserfenster) ausdehnen.
Im Hinterkopf sollten Sie die Angabe height:80px behalten, weil wir sie später noch mal benötigen werden.
Die dann folgenden Kind-Selektoren (child-selectors) in der Form "Elternelement>Kindelement" benutzen Sie hier zur selektiven Zuweisung von Eigenschaften.
Beachten Sie: Die Kind-Selektoren werden von allen Browsern außer dem Internet Explorer interpretiert. Diesen Umstand nutzen wir, um dadurch eine kleine "Browserweiche" zu erzeugen. Der Internet Explorer wird seine Anweisung aus einer speziellen CSS-Datei beziehen, die wir anschließend erstellen werden.
Zurück zu unseren Kind-Selektoren: body>#rahmen { padding-top:80px; }: Erinnern Sie sich an die Angabe height:80px als Höhenangabe für das menu-Element? Mit padding-top:80px definieren Sie den oberen Innenabstand des rahmen-Elements und stellen damit sicher, dass das inhalt-Element unter dem Menü beginnt. Behalten Sie die 80px weiterhin im Hinterkopf; Sie werden sie noch brauchen ;)
body>#menu { position:fixed; }: Fixiert das Menü an der Stelle, die Sie im #menu-Selektor mit left:0; und top:0; definiert haben. Da der IE den Wert "fixed" nicht bzw. nicht korrekt interpretieren würde, bekommt er später in einer speziellen Datei seine eigene Zuweisung.
body>#inhalt { position:static; }: Schaltet das Positionierungsverhalten des inhalt-Elements wieder in den "normalen" Zustand. (Links zu weiteren Quellen am Ende des Artikels.)
Damit ist die erste CSS-Arbeit erledigt und Sie können sich den speziellen Formatierungen für den Internet Explorer zuwenden.
Dazu erstellen Sie eine neue CSS-Datei (ich nenne sie "menu-ie5-6.css"). Binden Sie diese Datei mit folgender "conditional comments"-Anweisung vor dem schließenden </head>-Tag in Ihr HTML-Dokument ein.
<!--[if gte IE 5.5000]>
<link rel="stylesheet" type="text/css" href="menu-ie5-6.css" media="screen, projection" />
<![endif]-->(Links zum Thema "conditional comments" am Ende des Artikels.)
Inhalt der "menu-ie5-6.css" (Erläuterungen darunter):
html, body { overflow:hidden; }
#menu, #rahmen { position:absolute; }
#rahmen {
top:80px;
left:0;
height:90%;
height:expression(document.body.clientHeight - 80 + "px");
width:100%;
overflow:auto;
z-index:3;
}Mit der Anweisung html, body {overflow:hidden;} verbergen Sie den Scrollbalken im IE. Zurückbliebe normalerweise der leere Scrollbalken-Hintergrund, wenn Sie ihn nicht - pfiffigerweise - vorher mit margin:0; und padding:0; abgeschaltet hätten (siehe body-Selektor in Datei "menu.css").
#menu, #rahmen {position:absolute;}: Ist gewissermaßen der "Ersatz" für position:fixed; aus der Datei "menu.css".
Die Anweisungen im rahmen-Selektor sind ein wenig "speziell", deshalb beschreibe ich sie etwas detaillierter:
Mit top:80px; bestimmen Sie den Abstand des rahmen-Elements zum Menü. Wichtig ist, dass der Wert des Attributs "top" genauso groß ist wie die Höhe des Menüs (also die 80px, die Sie im Hinterkopf behielten). Wählen Sie hingegen einen kleineren Wert als den der Menühöhe, überlappt das Menü den Scrollbalken. Wählen Sie einen größeren Wert - z.B. top:100px - entsteht zwischen Unterkante des Menüs und der Scrollleiste ein unschöner Abstand - in unserem Falle betrüge er 20 Pixel.
height:90%; dürfte klar sein. Sie können auch 100% nehmen; das ist Wurscht.
Die Anweisung height:expression(document.body.clientHeight - 80 + "px"); verdient ein paar Worte mehr.
Bekanntermaßen unterstützt der IE nicht die CSS-Eigenschaft max-height, deshalb greifen wir hier auf die MS-propietäre "setExpression Method" zurück, mit der wir die Maximalhöhe des rahmen-Elements festlegen können. (Links zum Thema "setExpression Method" am Ende des Artikels.)
Übersetzen wir die Anweisung height:expression(document.body.clientHeight - 80 + "px"); in eine "halb"-mathematische Formel, würde sie lauten:
Rahmenhöhe = Höhe des Browserfensters innen (Viewport) - 80px
Und noch mal ausformuliert: Substrahiert wird die Höhe des Menüs (80px) von der Höhe des body-Elements. Verringert wird damit die Gesamthöhe um 80px abhängig von der tatsächlich ermittelten Höhe des Viewports.
Vermieden werden soll durch diese Aktion, dass sich das rahmen-Element nach unten über den Viewport ausdehnt und hinter der Statusleiste am unteren Browserrand verschwindet.
overflow:auto; lässt eine Scrollleiste im rahmen-Element erscheinen, sobald der Inhalt des inhalt-Elements so groß ist, dass Scrollen erforderlich wird.
z-index:3; positioniert das rahmen-Element eine Schicht tiefer als das menu-Element.
Und damit wären wir auch schon am Ende dieses kurzen Tutorials. Herunterladen können Sie die Skripte über den Download-Link am Anfang dieser Seite (oben rechts).
Erfolgreich getestet habe ich das Skript in allen Mozilla-basierten Browsern (Mozilla, Netscape, Firebird), im Internet Explorer 5.0 bis 6.0, Opera 7.22 bis 7.5 jeweils auf Windows-Betriebssystem Win 98SE und XP.
Nett wäre, wenn einer der Leser einen Mac-Test nachreichen könnte.
Links zu weiteren Quellen:
Attribut position: (externer Link zu css4you.de)
max-width in Internet Explorer (Externer Link)
About conditional comments (externer Link zu Microsoft)
Blitzschnelle Browserweiche mit conditional comments (externer Link zu Dr. Web)
Microsofts "setExpression Method" (externer Link zu Microsoft)
4 Kommentare
IM IE 7 sieht es nicht schön aus, wie bekommt man den breiten Randstriefen weg?
Frank am 29.08.2008
Nun ja, hab es selbst hinbekommen - IE 7 benötigt die Browserweiche scheinbar nicht mehr, also die Bedingung wie folgt ändern:
Frank am 29.08.2008
Na wenn mein html-Text verschluckt wird, tut's mir leid.
Frank am 29.08.2008