Aufklappmenü mit CSS (III) horizontal aufklappend

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

Aufklappmenü mit CSS (III) horizontal aufklappend

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

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 horizontale Navigation, wobei zunächst ausgehend von einem einzigen Button „Inhalt“, das Hauptmenü nach links aufklappt, die Untermenüpunkte werden dann, bei Berührung des einzelnen Menühauptpunktes mit dem Mauszeiger, jeweils nach unten aufgeklappt.

Bild

Bild

Bild

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
#menu ul ul ul
#menu ul ul ul li
Außerdem benötigen wir noch die folgenden erweiterten Style-Regeln:

Code: Alles auswählen

div#menu ul ul
div#menu ul li:hover ul
div#menu ul li:hover 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: 100%;
   float: left;
   }
#menu h2
   {
   width: 80px;
   float: left;
   }
#menu li
   {
   width: 90px;
   float: left;
   }
#menu a
   {
   text-decoration: none;
   display: block;
   }
Damit erreichen wir zum einen, dass Titel und Links eine feste Breite haben. Sie muss der gewählten Schriftart und –größe angepasst werden. Zu berücksichtigen ist dabei auch, dass die Textlänge im Untermenü, wie hier, größer sein kann als die des Hauptmenüpunktes. Die hier dargestellten Werte (width) passen also nur im gezeigten Beispiel. Trotz unterschiedlicher Zeichenanzahl wird durch (display: block) erreicht, dass Menü und Untermenü dieselbe (ganze) Breite ausfüllen.

Zum anderen wird durch die Festsetzungen von (float: left) die horizontale Darstellung bestimmt.

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 ul ul
   {
   position: absolute;
   margin left: 88px;
   }
#menu ul ul ul
   {
   margin left: 0px;
   }
#menu ul ul ul li
   {
   clear: both;
   }
div#menu ul ul
   {
   display: none;
   }
div#menu ul li:hover ul ul
   {
   display: none;
   }
div#menu ul ul li:hover ul ul
   {
   display: none;
   }
div#menu ul li:hover ul
   {
   display: block;
   }
div#menu ul ul li:hover ul
   {
   display: block;
   }
div#menu ul ul ul li:hover ul
   {
   display: block;
   }
Die Regel position: absolute gibt für dieses Element die Lage vor. Dabei soll das Hauptmenü direkt links an den Titel anschließen margin left 88px. Der hier im Beispiel eingetragene Wert ist bedingt durch die zuvor gewählte Breite und Umrandung. Die Untermenüpunkte sollen links bündig mit dem darüber stehenden Hauptmenüpunkt sein margin left: 0px und clear: both sorgt dann dafür, dass die Untermenüpunkte untereinander angeordnet werden.

Mit der Regel display: none werden diese Elemente nicht dargestellt (versteckt). Dies soll ja zunächst für Haupt- und 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 09.10.2010 von Astra für KompoZer-Web erstellt.

Antworten