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

Antworten
Admin
Administrator
Beiträge: 84
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.

weev
Beiträge: 67
Registriert: So 27. Mär 2016, 13:54
Wohnort: Berlin
Kontaktdaten:

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

Beitrag von weev » Fr 11. Okt 2019, 13:49

Ich weiß nicht ob Astra noch bei Kompozerforum ist, aber ich hätte ne Frage: um zu wissen ob alle Teile die du angegeben hast alle im Body und nicht im Head platziert werden und in welcher Reihenfolge man die Scrips auf die Webseite einfügt, schön wenn du alle deine Teile wie es am besten funktioniert auf einer Seite bringst. Deine Erläuterungen sind zwar nicht schlecht aber verwirrend. auf einer Seite versteht man es vielleicht. Danke für deine Mühe im Voraus.
Frank

camouflage1984
Beiträge: 340
Registriert: Di 19. Aug 2014, 14:34

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

Beitrag von camouflage1984 » Sa 12. Okt 2019, 21:17

Hallo weev,

leider ist Astra nicht mehr aktiv, jedenfalls nicht die letzten Jahre.
Hier https://camouflage1984.de/camouflage198 ... pmenue.php hast du ein Beispiel für ein Aufklappmenü, hoffe das reicht dir.

camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-webdesign

weev
Beiträge: 67
Registriert: So 27. Mär 2016, 13:54
Wohnort: Berlin
Kontaktdaten:

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

Beitrag von weev » So 20. Okt 2019, 12:43

Hi, ich habe mir deinen link angesehen. Habe den html teil reinkopiert und es erscheinen in der ansicht Links 1,2... Abes den css teil soll ich den wohin kopieren? Ich mache gerade das tutoriel für 8/b3 werde diese version dann auch zusätzlich auf meinen pc installieren.
Weev

camouflage1984
Beiträge: 340
Registriert: Di 19. Aug 2014, 14:34

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

Beitrag von camouflage1984 » So 20. Okt 2019, 22:53

Hallo Weev,

In dieser Lektion https://forum.kompozer-web.de/viewtopic.php?f=9&t=17 wird dir gezeigt wie du ein Internes Stylesheet (css) erzeugst. Du erstellst die Klassen die in der css Datei angegeben sind, danach kannst du die Anweisungen für diese Klasse im Stylesheet Editor(css) erstellen.
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-webdesign

weev
Beiträge: 67
Registriert: So 27. Mär 2016, 13:54
Wohnort: Berlin
Kontaktdaten:

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

Beitrag von weev » Mo 21. Okt 2019, 07:45

Danke, ich schau mal

Antworten