Aufklappmenp mit CSS (II) Vertikal - Untermenü daneben

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

Aufklappmenp mit CSS (II) Vertikal - Untermenü daneben

Beitrag von Admin » Di 19. Aug 2014, 16:17

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 nach links, neben den Hauptmenüpunkt, aufklappen.
menue-zugeklappt.jpg
menue-aufgeklappt-neben.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: absolute;
   top: 0;
   left: 100%;
   width: 100%;
   }
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 dieses Element in Relation zum übergeordneten Element bleibt. Mit position: absolute wird für das Element die Lage vorgegeben. Dabei soll der Untermenüpunkt oben bündig mit dem Hauptmenüpunkt sein top: 0pt und direkt links im Anschluss an den Hauptmenüpunkt liegen left: 100%. Schließlich sorgt width: 100% dafür, dass der Untermenüpunkt gleich breit ist wie das Hauptmenü.

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.
Dieses Tutorial wurde am 02.10.2010 von Astra für KompoZer-Web erstellt.

Antworten