Aufklappmenü mit CSS (!) Vertikal - Untermenü darunter

Antworten
Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Aufklappmenü mit CSS (!) Vertikal - Untermenü darunter

Beitrag von Admin » Do 21. Aug 2014, 16:07

Ein Menü soll beides können. Auf den „ersten Blick“ den Inhalt zeigen, gleichzeitig aber nicht durch zu viele Unterpunkte unübersichtlich sein. Die Lösung heißt: Aufklappmenüs!

Wenig bekannt ist, dass solche Menüs, die bei Berührung des einzelnen Menüpunktes mit dem Mauszeiger aufklappen und damit weitere Informationen zeigen, auch ohne JavaScript - nur mit CSS - machbar sind.

Das hier beispielhaft gezeigte Aufklappmenü eignet sich für eine vertikale Navigation, wobei die Untermenüpunkte so aufklappen, dass die folgenden Hauptmenüpunkte nach unten verschoben werden. Das hat den Vorteil, dass der meist neben einer vertikalen Navi liegende Inhaltsbereich nicht beeinträchtigt wird.
menue-zugeklappt.jpg
menue-aufgeklappt.jpg
Los geht’s!

Das Menü wird zunächst in Form einer unsortierten Liste, also als <ul> Element, angelegt. Im Beispiel soll sie mal aus der Überschrift <h2> „Inhalt“ und den Menüpunkten „Kapitel 1“, „Kapitel 2“ … bis „Kapitel 5“ bestehen.

Die Untermenüpunkte unter „Kapitel 1“, nennen wir mal „Lektion 1.1“, „Lektion 1.2“ und „Lektion 1.3“ und in den folgenden Kapiteln entsprechend.

Da sowohl die Menüpunkte selbst, als auch die Untermenüpunkte Links darstellen, müssen sie natürlich auch als solche Elemente gesetzt werden. Im Beispiel verweisen wir generell auf #nogo als Ziel. Dieses Ziel dient im Moment nur dazu, die Linkfunktion zu ermöglichen. Im "Echtbetrieb" müsste stattdessen natürlich als Link der Verweis auf die gewünschte Seite stehen.

So sieht der Quelltext aus:

Code: Alles auswählen

<body>
<div id="menu">
<ul>
<li>
<h2> Inhalt </h2>
<ul>
<li><a href="#nogo">Kapitel 1</a>
<ul>
<li><a href="#nogo">Lektion 1.1</a></li>
<li><a href="#nogo">Lektion 1.2</a></li>
<li><a href="#nogo">Lektion 1.3</a></li>
</ul>
</li>
<li><a href="#nogo">Kapitel 2</a>
<ul>
<li><a href="#nogo">Lektion 2.1</a></li>
<li><a href="#nogo">Lektion 2.2</a></li>
<li><a href="#nogo">Lektion 2.3</a></li>
</ul>
</li>
<li><a href="#nogo">Kapitel 3</a>
<ul>
<li><a href="#nogo">Lektion 3.1</a></li>
<li><a href="#nogo">Lektion 3.2</a></li>
<li><a href="#nogo">Lektion 3.3</a></li>
</ul>
</li>
<li><a href="#nogo">Kapitel 4</a>
<ul>
<li><a href="#nogo">Lektion 4.1</a></li>
<li><a href="#nogo">Lektion 4.2</a></li>
<li><a href="#nogo">Lektion 4.3</a></li>
</ul>
</li>
<li><a href="#nogo">Kapitel 5</a>
<ul>
<li><a href="#nogo">Lektion 5.1</a></li>
<li><a href="#nogo">Lektion 5.2</a></li>
<li><a href="#nogo">Lektion 5.3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div> 
</body>
Wichtig für die spätere Aufklappfunktion ist die konsequente Verschachtelung der Listen. Das heißt, hier im Beispiel, dass im <li> Element „Inhalt“, als weiteres <ul> Element, die Listenpunkte „Kapitel 1“ – „Kapitel 5“ aufgereiht sind. Weitere Verschachtelungen in die Tiefe sind natürlich möglich, sorgfältiges Arbeiten ist dafür erforderlich.

Um mit CSS nun stylen zu können, weisen wir dem gesamten HTML-Quelltext des bisherigen Menüs das <div> Element „menu“ zu.

Im CSS sind außer für das <div> Element #menu selbst, folgende Styles anzulegen:

Code: Alles auswählen

#menu ul
#menu h2
#menu a
#menu a:hover
#menu li
#menu ul ul ul
Außerdem benötigen wir noch die folgenden erweiterten Style-Regeln:

Code: Alles auswählen

div#menu ul ul ul
div#menu ul ul li:hover ul
div#menu ul ul li.hover ul ul
div#menu ul ul ul li:hover ul
Dargestellt sind in der Folge nur die Style-Regeln, die für die Funktion des Aufklappmenüs erforderlich sind. Weitere Regeln zur Gestaltung des hier gezeigten Beispiels, wie Hintergrundfarbe, Rahmen usw., sind zwar notwendig, werden aber nicht dargestellt, da sie ja frei gestaltbar sind und eigentlich die gewünschte Funktion nicht beeinflussen.

Also, zunächst nehmen wir folgende Festsetzungen vor:

Code: Alles auswählen

#menu 
   {
   width: 80px;
   }
#menu ul 
   {
   list-style: none;
   }
#menu h2
   {
   display: block;
   }
#menu a 
   {
   text-decoration: none; 
   display: block;
   }
Damit erreichen wir unter anderem, dass Titel und Links trotz unterschiedlicher Zeichenanzahl dieselbe (ganze) Breite ausfüllen (display: block).

Jetzt müssen wir uns noch um die Positionierung und vor allem darum kümmern, dass die Untermenüs nicht ständig sichtbar sind, sondern die gewünschte Aufklappfunktion erhalten. Das gehen wir so an:

Code: Alles auswählen

#menu li 
   {
   position: relative;
   }
#menu ul ul ul 
   {
   position: relative;
   }
div#menu ul ul ul 
   {
   display: none;
   }
div#menu ul ul li:hover ul ul 
   {
   display: none;
   }
div#menu ul ul li:hover ul 
   {
   display: block;
   }
div#menu ul ul ul li:hover ul 
   {
   display: block;
   }
Die Regel position: relative sorgt dafür, dass diese Elemente in Relation zum übergeordneten Element bleiben.

Mit der Regel display: none werden diese Elemente nicht dargestellt (versteckt). Dies soll ja zunächst für die Untermenüs gelten. Vorgesorgt ist auch bereits für den Fall, dass es weitere Verschachtelungen in die Tiefe gibt. Denn diese „Unter-Untermenüs“ sollen ja auch nicht bereits dann aufklappen, wenn der Mauszeiger den Hauptmenüpunkt berührt.

Schließlich sorgt die zuletzt festgelegte Regel display: block dafür, dass die gewünschten Untermenüpunkte durch Nutzung des hover-Effekts sichtbar werden, also aufklappen.

Viel Spaß beim Ausprobieren!
Dieses Tutorial wurde am 22. Sep 2010 von Astra für KompoZer-Web erstellt.

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast