Feststehendes Menü erstellen

Mit CSS bist du zum Beispiel in der Lage, einen feststehenden Bereich im Kopf deiner Website zu erstellen. Dieser Bereich verschwindet beim Scrollen nicht und ist daher für verschiedene Zwecke prädestiniert. Sinnvoll ist bspw. der Einsatz um ein feststehendes Menü zur Navigation zu erstellen. Genauso könnte man auch einen Bereich für nützliche Informationen einblenden. Die Möglichkeiten sind dabei sehr vielfältig.

In diesem Artikel zeige ich dir dabei, wie das funktioniert.

 

Ein feststehendes Menü für die Website

Mit dem nachstehenden Beispiel zeige ich dir, wie du ein feststehendes Menü (oder besser gesagt einen feststehenden Bereich) im Kopf deiner Website erstellen kannst. Dazu musst du zunächst das Stylesheet festlegen um anschließend den Bereich in deiner Website zu integrieren. Folgende Snippets kannst du dabei benutzen.

 

Beispiel CSS:

body {
 height:100%;
 margin:0;
 padding:0;
}
 
#fest {    
 left:0;
 top:0;
 width:100%;
 height:80px;
 background:yellow;
 z-index:4;
}
 
#rahmen { padding-top:80px; }
 
#fest { position:fixed; }
 
#inhalt { position:static; }

 

Die einzelnen Bereiche der Website sind dabei später noch analog der DIVs zu kennzeichnen. Im folgenden Snippet siehst du dazu ein Beispiel.

 

Beispiel HTML:

<html>
  <head>
    <title>Feststehendes Menü am Anfang der Website</title>
    <link rel='stylesheet' href='festesmenue.css' type='text/css' />
  </head>
  <body>
    <div id="fest">
      <p>Hier kommt das rein, was dabei fest im Seitenkopf stehen soll</p>
    </div>
    <div id="rahmen">
    <div id="inhalt">
      <p>Hier kommt schließlich der normale Inhalt deiner Website hinein</p>
    </div>
   </div>
  </body>
</html>

 

 

Workaround für IE 5

Ganz alte Versionen vom Internet Explorer (Version 5) interpretieren diese Angaben jedoch nicht richtig . Dabei kann es zu unschönen Effekten kommen. Heutzutage sollte der IE 5 aber bereits ausgestorben sein. Solltest du jedoch, aus welchen Gründen auch immer, trotzdem eine Kompatibilität zum IE5 brauchen, gibt es auch hierzu eine Alternative.

Füge die folgenden Snippets ebenfalls zu deiner Website hinzu. Das Stylesheet nennen wir dabei für dieses Beispiel css_ie5.css.

 

IE5 Stylesheet einbinden:

<head>
    <!--[if gte IE 5.5000]>
    <link rel="stylesheet" type="text/css" href="css_ie5.css" media="screen, projection" />
    <![endif]-->
  </head>

 

Die css_ie5.css enthält überdies noch folgende Angaben. Du kannst das Snippet dabei einfach in die Datei hinein kopieren.

 

Beispiel:

html, body { overflow:hidden; }
#fest, #rahmen { position:absolute; }
#rahmen {
 top:80px;
 left:0;
 height:90%;
 height:expression(document.body.clientHeight - 80 + "px");
 width:100%;
 overflow:auto;
 z-index:3;
}

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.