zum Inhalt oder zum Menü.

Webdesign Haas, Bremen

Individuelle Beratung
und Gestaltung für
Ihren Internetauftritt

Webdesign Haas
Marcus Haas
Brabeckstr. 7


Tel. 0421 / 387 13 60
Mobil: 0162 / 95 75 407

Marcus Haas on Google+
Unsere Seite auf Google+

Menüs aus Listen mit CSS

Eine Vorgehensweise Menüs zu gestalten setzt sich immer mehr durch, statt mit Tabellen oder div-Elementen können Menüs sehr leicht und übersichtlich mit Listen und CSS formatiert werden.

Dabei speilt es noch nicht einmal eine Rolle, ob sie horizontal oder vertikal angeordnet werden sollen und Untermenus kann man so auch ohne großen zusätzlichen Aufwand einbinden (und in den meisten Browsern ist dafür noch nicht einmal Javascript erforderlich, nur beim Internetexplorer braucht man ein paar Zeilen).

Die Liste im HTML sieht dann wie folgt aus:

Das soll erst mal reichen, der Code dazu ist ganz einfach:

<ul id="menu">
  <li><a href="#">Ebene 1</a>
    <ul>
      <li><a href="#">Ebene 1.1</a></li>
      <li><a href="#">Ebene 1.2</a>
        <ul>
          <li><a href="#">Ebene 1.2.1</a></li>
          <li><a href="#">Ebene 1.2.2</a></li>
        </ul>
      </li>
      <li><a href="#">Ebene 1.3</a>
        <ul>
          <li><a href="#">Ebene 1.3.1</a></li>
          <li><a href="#">Ebene 1.3.2</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Ebene 2</a>
    <ul>
      <li><a href="#">Ebene 2.1</a></li>
      <li><a href="#">Ebene 2.2</a></li>
    </ul>
  </li>
  <li><a href="#">Ebene 3</a></li>
</ul>

Vertikale Menüs

Ein bisschen Format kann nicht schaden, denn wenn die Liste nachher ausklappen soll, müssen wir ihre Breite kennen (die Hintergrundfarbe soll das nur deutlicher machen), außerdem verstecken wir mal die Listenpunkte und die Unterebenen, dazu brauchen wir folgende Zeilen im CSS:

#menu ul,#menu li{
  margin:0;
  padding:0;
  float:left;
  clear:both;
}
#menu li{
  width: 130px;
  position: relative;
  top:0px;
  list-style: none;
}
#menu a{
  display:block;
  background-color: #ccc;
  width: 130px;
}
#menu li ul {
  display: none;
}

unsere Liste sieht dann so aus (schauen Sie sich den Quellcode an, wenn Sie nicht glauben, das es noch dieselbe ist):

Jetzt sollen aber die Untermenus wieder aufklappen, wenn man mit der Maus darüberfährt, das kann man mit :hover machen (Benutzer des IE müssen noch einen Augenblick geduld haben), also fügen wir im CSS folgende Zeilen hinzu:

#menu ul,#menu li:hover ul ul{
  position: absolute;
  display: none;
  left: 95px;
  top:-5px;
}
#menu li:hover ul, #menu ul li:hover ul, #menu ul ul li:hover ul{display: block;}

Ergebnis:

Das genügt erstmal, man kann so noch mehr Ebenen verschachteln, aber das wird dann langsam kompliziert.

Horizontale Menüs

Auch ein horizontales Menü ist damit sehr leicht zu realisieren.
Man muss nur die CSS-Anweisungen etwas ändern:

#menu ul,#menu li{
  margin:0;
  padding:0;
  float:left;
}
#menu li{
  width: 90px;
  float:left;
}
#menu a{
  margin: 0;
  padding: 1px;
  display: block;
  position: relative;
  width: 90px;
  height: 18px;
  line-height: 18px;
}
#menu ul{
  position: absolute;
  display: none;
  top:20px;
  left: -36px;
}
/*Durch das Komma getrennt werden hier zwei Zuweisungen vorgenommen,
eine für den IE, eine für Browser, die :hover interpretieren*/
#menu li ul ul,#menu li:hover ul ul{
  position: absolute;
  display: none;
  top:0px;
  left: 49px;
}
#menu li:hover ul, #menu ul li:hover ul{display: block;}

Das Menü sieht dann (bei sonst gleichem HTML) so aus:

Bei den Formatierungen für das Aussehen muss man darauf achten, dass es keine Lücken zwischen den Menüpunkten gibt, damit das Menu nicht vorzeitig wieder zusammenklappt, ansonsten ist man sehr frei in der Gestaltung.

Javascript für den IE

Nun fehlt aber noch etwas Javascript für die Benutzer des IE (das muss dann am Ende stehen, damit es nach dem Menu geladen wird):

<!--[if IE]>
<script type="text/javascript">
  var menu = document.getElementById("menu").getElementsByTagName("ul");
  for (i=0;i<menu.length;i++) {
    menu[i].setAttribute("id","menu"+i)
    if (menu[i].parentNode.nodeName == "LI") {
      menu[i].parentNode.onmouseover = function () {
        this.lastChild.style.display = "block";
      }
      menu[i].parentNode.onmouseout = function () {
        this.lastChild.style.display = "none";
      }
    }
  }
</script>
<![endif]-->

Der Vorteil dieser Browserspezifischen Anweisung (siehe: Conditional Comments) ist natürlich, das andere Browser gar nicht erst in die Versuchung kommen, sich mit dem Ausführen dieses Scripts aufzuhalten, noch besser ist es aber, wenn man auf SSI zurückgreifen kann, dann wird dieser Teil tatsächlich nur an den IE ausgeliefert, aber leider auch an jeden Browser, der sich als IE ausgibt, deshalb sollte man trotzdem nicht auf Conditional Comments verzichten:

<!--#if expr="${HTTP_USER_AGENT} = /MSIE/)" -->
     <!--[if IE]>...Anweisungen, die nur der Internet Explorer sehen soll...<![endif]-->
<!--#endif -->