Template-Anpassung: Attribute für Navigation mit 3 Ebenen hinzufügen

[Schnippel]

Hi Leute,

Wie lassen sich diese Attribute in eine Contao-Navigation einbinden?

Attribute data-toggle="dropdown" und data-target="#"

Es soll eine Navigation mit 3 Ebenen erstellt werden.
Dabei sollen die Listenelemente, die Untermenüs haben, diese bei Klick / Touch automatisch ausfahren,
und bei wiederholtem Klick wieder einfahren.

So könnte es in etwa aussehen: http://holdirbootstrap.de/javascript/#dropdowns

Laut meinen Recherchen benötigt man dazu einen Ein-Aus-Schalter (toggle).

Welche Templates müssten wie verändert werden, damit dies realisiert werden kann?

[mlweb]

Hatten wir das Thema nicht so ähnlich schon in diesem Thread oder verstehe ich gerade etwas vollkommen falsch?
Ich beziehe mich da insbesondere auf den Hinweis zu Peter Müller.
Das Template was anzupassen ist wäre also das Gleiche.

[lucina]

Das wirst Du in eine Kopie des nav_default hineinschreiben müssen. Möglicherweise kannst Du Dir ein paar Hinweise unter https://github.com/contao-bootstrap/...dropdown.html5 abschauen. Weitere Anregungen unter https://codepen.io/ajaypatelaj/pen/prHjD

[mlweb]

Wenn Du etwas mit Bootstrap machen willst schau Dir doch mal die entsprechende Erweiterung von Netzmacht an http://contao-bootstrap.netzmacht.de/
Ich kenne die zwar nicht, aber vielleicht bekommst Du da das was Du sucht schon fix und fertig vorbereitet.

[Schnippel]

Hatten wir das Thema nicht so ähnlich schon ...?

Ja, aber irgendwie komm ich da auch noch nicht so recht zum Ziel.
Dafür verantwortlich ist natürlich auch das mir derzeitig noch fehlende Wissen über
jQuery und php. Und da bin ich für die vielen Tipps von den helfenden Usern hier
dankbar, denn sie bringen einem doch Stück für Stück weiter.



Habe im Netz ein gutes Tutorial zum Aufbau einer Drop-Down-Navigation mit Hilfe jQuery gefunden,
die per Klick die Untermenüs (level_2 und auch level_3) ausfahren lässt.

Anleitung Navigation Menü DropDown per Click (nach den Hover-Beispielen)
Video
Demo mit Scripten

Dieser Ansatz scheint gut zu funktionieren.
Dazu nehme ich die Bordmittel von Contao (Navigations-Menü)
und trage im Seitenlayout unter Javascript folgendes ein:

<script type="text/javascript">

$('nav.mod_navigation ul li.submenu > a').click(function() {
$(this).parent().siblings().find('ul').slideUp(300);
	$(this).next('ul').stop(true, false, true).slideToggle(300);
	return false;
});

</script>

Im CSS müssen die Unterebenen ausgeblendet werden:

/*- Unterebenen ausblenden -*/
		ul.level_2,
		ul.level_3 {
                      display:none;
		}

Vielleicht kann ja mal ein Profi drüber schauen, inwieweit an dem Script noch was
in Bezug auf Contao zu beachten ist.
Ich schraube erstmal am CSS weiter rum.