WMP Webstandards

Vertikales Aufklappmenü

zurück zur Übersicht

Nach oben

Überblick

Nach oben

Zielsetzung

Es soll eine vertikales Naviagtion mit 4 Menüpunkten erstellt werden, die jeweils 3 aufklappbare Unterpunkte besitzen.
Auf dem aktiven Menüpunkt sollen die dazugehörigen Unterpunkte sichtbar sein - die anderen jedoch nicht.

Das Menü soll auch bei deaktiviertem Javascript funktionstüchtig sein.

Nach oben

Vorgehensweise

Die HTML-Struktur ist im Prinzip die gleiche wie bei dem vorherigen Beispiel, mit dem Unterschied, dass per Eventhandler eine Javascriptfunktion aufgerufen wird und jeder Menüpunkt noch mit einer eigenen ID versorgt wurde.

<ul id="menue">
  <li><a href="#" onclick="javascript:zeigen('submenue1')">Oberpunkt 01</a>

    <ul id="submenue1" class="submenue">
      <li><a href="#">Untermenü 1.a</a></li>
      <li><a href="#">Untermenü 1.b</a></li>
      <li><a href="#">Untermenü 1.c</a></li>
    </ul>
  </li
     
  <li><a href="#" onclick="javascript:zeigen('submenue2')">Oberpunkt 02</a>

    <ul id="submenue2" class="submenue">
      <li><a href="#">Unterpunkt 2.a</a></li>
      <li><a href="#">Unterpunkt 2.b</a></li>
      <li><a href="#">Unterpunkt 2.c</a></li>
    </ul>
  </li

  <li><a href="#" onclick="javascript:zeigen('submenue3')">Oberpunkt 03</a>

    <ul id="submenue3" class="submenue">
      <li><a href="#">Unterpunkt 3.a</a></li>
      <li><a href="#">Unterpunkt 3.b</a></li>
      <li><a href="#">Unterpunkt 3.c</a></li>
    </ul>
  </li>

  <li><a href="#" onclick="javascript:zeigen('submenue4')">Oberpunkt 04</a>

    <ul id="submenue4" class="submenue">
      <li><a href="#">Unterpunkt 4.a</a></li>
      <li><a href="#">Unterpunkt 4.b</a></li>
      <li><a href="#">Unterpunkt 4.c</a></li>
    </ul>
  </li>
</ul>
Nach oben

Werkzeuge:

Der Nachbar-Selektor (engl. Adjacent selector): Zum Beispiel bei B + F trifft auf alle F-Elemente zu, die denen ein B-Element direkt vorangeht und dasselbe Elternelement hat wie das E-Element.

Die Pseudoklasse a:focus ist eigentlich für Formularelemente vorgesehen, Elemente zu unterscheiden, die den Fokus haben, d.h. wenn du sie zum Beispiel mit der Maus anklickst. Der Fokus bleibt solange erhalten, bis ein anderes Element ausgewählt worden ist.

Nach oben

Prinzip:

Mit Hilfe des Nachbar Selektors wird festgelegt, dass alle ungeordneten Listen der Klasse "submenue", die einem Link innerhalb eines übergeordneten Listenelementes vorangehen, standardmäßig nicht angezeigt werden, da display den Wert "none" zugewiesen bekommt.

Um nun zu erreichen, daß die untergeordneten Listen bei Mausklick angezeigt werden, also sich aufklappen, wird nun für alle ungeordneten Listen der Klasse "submenue", die Links mit einem Fokus innerhalb eines Listenelementes vorangehen, der Wert für display auf "block" festgelegt.

Das CSS ließt sich im Gegensatz zur ausführlichen Erklärung um einiges einfacher und ist sehr simpel:

ul#menue li a + ul.submenue
{
  display   none;
}

ul#menue li a:focus + ul.submenue
{
  display   block;
}
Nach oben

Javascript für Funktonalität im IE

Da das Menü im wesentlichen durch den Nachbar-Selektor ("+") funktioniert, der vom IE und anderen veralteten Browsern nicht unterstützt wird, wird ein Javascript herangezogen, damit die Navigation auch mit diesen Programmen funktioniert.

Das Javascript besteht aus der Funktion zeigen(), die, wenn sie aufgerufen wird, den Wert einer ID ändert. So sieht es aus:

window.onload=zeigen;
function zeigen(id) {
  for (var i = 1; i<=5; i++) {
    if (document.getElementById("submenue"+i)) {document.getElementById("submenue"+i).style.display="none";}
  }
if (document.getElementById(id)) {document.getElementById(id).style.display="block";}
}
Nach oben

Das CSS im Überblick:

ul, li
{
  margin:     0;
  padding:     0;
  list-style-type:   none;
}

ul#menue {
  width   300px;
  margin:     3em 0 0 0;
}

ul#menue li a
{
  margin:     2px 0;
  height:     25px;
  line-height:     25px;
  text-align:     center;
  border:     1px solid #666;
  background:     #ccc;
  display   block;
  color   #000;
  text-decoration none;
}

ul#menue li a + ul.submenue
{
  display   none;
}

ul#menue li a:focus + ul.submenue
{
  display   block;
  color   #34537c;
}

ul#submenue1 li a, ul#submenue2 li a, ul#submenue3 li a, ul#submenue4 li a
{
  background   none; /* IE */
}
Nach oben

Ein Beispiel

Hier kann man sich eine Demonstration der Navigation anschauen.

Kommentare







05.11.2005 Löschen

Lolo

geht das auch irgendwie mit mehr als 2 Menüebenen und so das die aktive Seite immer farblichhervorgehoben wird?

06.11.2005 Löschen

Twisting

Ja...das geht - stell die Frage doch einfach im Forum www.webmasterpro.de

15.01.2006 Löschen

maject

Wäre es möglich das aufgeklappte Element wieder durch klick zuzuklappen? aber ohne javascript?

15.01.2006 Löschen

Twisting

Ohne JS? - Nein.

17.01.2006 Löschen

cj

Gut verständliches Script! Allerdings: Sobald ich versuche den Link des Untermenüs zu klicken verschwindet das Menü und auch der Link wird nicht aktiviert! Woran liegt das und wie könnte ich das ändern?
Vielen Dank schon mal!

21.01.2007 Löschen

john

Hallo,
sehr geniales Script. muss ich schon sagen.
Hab noch ne Frage:
Wenn ich jetzt nen Link als unterpunkt einfüge und auf diesen dann klicke, dann wird automatisch das ganze menü wieder eingeklappt. wie kann ich es machen, dass das menü dann aufgeklappt bleibt, wenn ich auf so nen link klicke?
Gruß

26.08.2007 Löschen

schorsch

wie löse ich das problem denn aber nach xhtml1.1, wo verschachtelte listen nicht mehr valide sind?

28.08.2007 Löschen

pberndt

Woher hast du das? XHTML 2 erlaubt afaik "flow" in LI-Elementen, was wiederum Listen zulässt. HTML5 erlaubt Blockelemente in nav-Listen, sprich auch sich selbst noch einmal.

29.08.2007 Löschen

schorsch

ich benutze den w3c validator und der meckert bei verwendung von xhtml1.1 bei <ul><ul>...</ul></ul>. hab auch mal ne seite gefunden, wo stand, welche kindelemente erkaubt sind, aber die hab ich nicht mehr wiedergefunden. webmasterpro.de behilft sich ja auch mit <div>.

30.08.2007 Löschen

schorsch

ich beführchte ehrlichgesagt, dass die lösung hier nicht sinnvoll ist. eigentlich sollte sie ja ohne js funktionieren. ohne js geht es aber fast nirgends. IE kennt ja sowieso keine pseudoklassen, firefox klappt das menü wieder ein beim fukussieren, d.h. klick woandershin reicht, und opera versteht unter fokussieren markieren, sodass man den menüpunkt markieren müsste, um das untermenü zu erhalten. safari springt weder auf klick noch auf markieren an. aufklappmenüs zum klicken werden also wahrscheinlich weiterhin mit js auskommen müssen. mehr changsen seh ich da für die pseudoklasse hover, aber bei der art von menü, die hier vorgestellt wurde macht das wenig sinn.

Von paul. Letzte Änderung am 03.04.2005