Mulitlevelmenü mit Bootstrap

[Uwe367]

Nachdem ich mir heute mal ein paar Stunden Zeit nahm (Das Wetter war zu schlecht um mit dem Rad durchs Gelände zu brettern) ist es mir gelungen, fast nur mit Bordmitteln von phpwcms und ohne Frontend Renderscript ein multilevelfähiges Bootstrap Naviagtionsmenü, basierend auf Bootstrap 5, aufzubauen. Auf der Beispielseite geht es über 4 Unterebenen, aber mehr dürften kein Problem sein. Muss dann im RT entsprechend angepasst werden.

Warum nur fast mit Bordmitteln von phpwcms?
Ich habe mich dabei an diesem Beispiel orientiert: https://bootstrap-menu.com/demos/multilevel.html
Aus diesem Beispiel habe ich lediglich CSS sowie JS übernommen.
Alles andere stellt ein entsprechender NAV_LIST_UL RT und die entsprechend angepassten Klassen in der conf.template_default.inc.php zur Verfügung.
An dieser Stelle nochmal ein großes DANKE an Oliver für die Vereinheitlichung der Ebenen, so dass nun auch Ebene ID 0 ihre Klasse aus der conf.template_default.inc.php bezieht.
https://github.com/slackero/phpwcms/com ... 7872b0c8f6
Vereinfacht die Arbeit ungemein.

Was den richtig zusammengebauten RT betriftt, da sollte man sich dieses Posting....viewtopic.php?p=150620&hilit=nav+level#p150620 von Oliver zu Herzen nehmen. Wenn man das verstanden hat läuft der Rest fast wie von selbst.

Warum habe ich mich für dieses Beispiel entschieden?
1. Es läuft mit der aktuellen Bootstrap Version
2. Da es auf diese Seite noch mehr Beispiele gibt sollte es ein leichtes sein, diese entsprechend zu adaptieren so daß auch diese dann mit phpwcms laufen.

Zu sehen ict das ganze hier:
https://uwe367.de/navi/

Von der reinen Funktion her läuft das schonmal gut.
Das einzige was mich stört ist das Caret bei den Untermenüs da dieses, idealerweise, nach rechts zeigen sollte statt nach unten.
Hat vielleicht jemand eine zündende Idee wie ich das so hinbekomme wie auf der Beispielseite?
Irgendwie sehe ich wahrscheinlich grad den Wald vor lauter Bäumen nicht......

[Oliver Georgi]

Code: Select all

.dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.3em;
    vertical-align: 0.1em;
    content: "";
    border-bottom: 0.3em solid transparent;
    border-top: 0.3em solid transparent;
    border-left: 0.3em solid;
    border-right: 0;
}

[Uwe367]

Jepp.. Danke für den Hinweis Oliver.
Die Änderungen jetzt noch ein wenig anpassen und in Klassen packen und die Sache läuft wie ich es haben möchte
Schon klasse was man alles mit dem Navigations-RT machen kann