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

[flax]

Hallo Uwe,

könntest Du bitte Deine Multilevel-Integration unter Bootstrap 5 mal für Nicht-Programmierer verständlich als Schritt-für-Schritt-Anleitung erklären - zumal die URL https://bootstrap-menu.com/demos/multilevel.html nicht mehr funktioniert? Dein Ergebnis finde ich ganz gut. Es würde bestimmt mehr Leuten helfen...

Viele Grüße
Britta

[top]

Wenn alte Links nicht mehr funktionieren, (oder wichtige Webseiten wegen anderen Problemen gerade nicht erreichbar sind,) lohnt es sich oftmals zu schauen, ob sich die gewünschten Seiten im Web-Archiv von archive.org finden lassen:

https://web.archive.org/web/20230523102 ... level.html

[Uwe367]

Ich hatte das vor ein paar Jahren umgesetzt, aber da ich es selbst nicht benötigte und sich das Interesse hier auch sehr in Grenzen hielt, nicht weiter verfolgt oder weiter entwickelt. Die Lösung, die ich damals im Netz fand, gibt es scheinbar nicht mehr, dafür aber eine andere die, so sieht es jedenfalls auf den ersten Blick aus, wesentlich einfacher in phpwcms implementiert werden kann, als mein damaliger Versuch.

https://github.com/dallaslu/bootstrap-5 ... l-dropdown

Ich habe es selbst noch nicht getestet, aber es scheint einfacher zu sein, als meine Lösung von damals.

[Uwe367]

Sorry fürs Doppelposting, aber ich habe doch noch eine Seite am laufen, wo ich das eingesetzt habe.

Hier eine Beschreibung, wie ich das damals machte.
Der RT für die Navigation sieht so aus: {NAV_LIST_UL:PB,0,5,|navbar-nav|a|submenu|submenu|submenu,active}

In die settings.php folgendes eingefügt:

Code: Select all

$template_default['classes'] = array_merge($template_default['classes'], array(

    'navlist-sub_ul_true'           => 'sub_ul_true',
    'navlist-sub_ul'                => 'nav-item',
    'navlist-sub_no'                => 'nav-item',
    'navlist-sub_first'             => '',
    'navlist-sub_last'              => '',
    'navlist-sub_parent'            => 'nav-item',
    'navlist-asub_no'               => 'asub_no',
    'navlist-asub_first'            => 'asub_first',
    'navlist-asub_last'             => 'asub_last',
    'navlist-link-class'            => '<!--if:mobile-->dropdown-item text wrap<!--/if-->',
	'navlist-link-class'            => '<!--if:desktop-->dropdown-item<!--/if-->',
    'navlist-bs-dropdown-toggle'    => '<!--if:mobile-->dropdown-toggle text-wrap<!--/if-->',
	'navlist-bs-dropdown-toggle'    => '<!--if:desktop-->dropdown-toggle<!--/if-->',
));

Man sollte für solche Zwecke eine eigene Settings Datei anlegen, z.B my-settings.php damit die Originaldatei bei einem Update nicht überschrieben wird. Was in diese Datei eingetragen wird, wird später mit der template_default.inc.php gemerged. Die Datei befindet sich in template/inc_settings/template_default.

In der conf_inc.php muss dieser Schalter $phpwcms['render_device'] = 1; auf "1" gesetzt werden da ansonsten die IF Anweisungen <!--if:--><!--/if--> in der settings.php nicht gerendert werden.

Ich hatte es damals nicht hinbekommen, den Oliver gezeigten CSS Code so einzubauen, dass das "Caret nach rechts" nur bei den Dropdowns angezeigt wird. Daher hatte ich

Code: Select all

.dropdown-toggle::after {
	display: none;
}

gesetzt. Dadurch werden die von Bootstrap generierten Carets ausgeblendet. Die Carets habe ich später direkt in der Vorlage bei der Seitenüberschrift eingetragen.
Nicht die eleganteste Variante, aber es funktioniert.