Page 1 of 1
NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Mon 9. Jan 2017, 14:33
by Old Boy
Ich bin kein echter Freund von Bootstrap, aber man kommt anscheinend nicht mehr drum herum.
Die BS 3.6 ff ... läuft bei mir auch ohne Probleme und das Navigationsmenü per {NAV_LIST_UL:PB ... } läuft rund.
Aber die Entwicklung geht ja weiter und die
Version 4.0.0-alpha6 von Bootstrap läd zum Testen ein.
Habe deshalb noch einmal meinen localhost bemüht und eine
phpwcms dev1.9 als Kombipack installiert.
Nun hat sich aber das Menü bei der Version 4 von BS anscheinend geändert...
Meine neugierige Frage deshalb:
Kann ich eine funktionierende
Bootstrap 4 Navi out of the Box erzeugen mittels der Möglichkeiten der
NAV_LIST_UL von phpwcms ...
meine Versuche waren bisher leider nicht erfolgreich, denn die WIKI Einträge bezüglich der Parameter sind kaum noch lesbar!
Der Menüaufbau sollte so aussehen bei der BS 4.0:
<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Fixed navbar</a>
<div class="collapse navbar-collapse" id="navbarCollapse">
<!-- Ab hier kommt ja eigentlich erst die NAV_LIST_UL ins Spiel -->
<ul class="navbar-nav mr-auto">
<li class="
nav-item active">
<a class="
nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="
nav-item">
<a class="
nav-link" href="#">Link</a>
</li>
<li class="
nav-item">
<a class="
nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
Wie bekommt man die Klassen
nav-item und
nav-link sowie
disabled an die richtige Stelle?
Hat da ggf. von euch schon jemand Erfolg in der Sache?
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Mon 9. Jan 2017, 16:31
by Oliver Georgi
Bootstrap 4 ist aktuell kein Thema und phpwcms wird frühestens mit Vorliegen eines Release Candidates von Bootstrap 4 darauf vorbereitet.
Wie man an Alpha 6 sieht, gab es bis heute keinen Feature Freeze – erneut zahlreiche Änderungen.
Wer Bootstrap 4 bereits jetzt unterstützen möchte, kann sich jederzeit eigene Menüroutinen schreiben.
Das von Dir beschriebene Menü in Ebene 1 dürfte aber schon jetzt machbar sein. Der Disabled Menüstatus macht keinen Sinn auf einer klassischen Webseite.
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Mon 9. Jan 2017, 16:41
by Old Boy
Oliver Georgi wrote:Bootstrap 4 ist aktuell kein Thema und phpwcms wird frühestens mit Vorliegen eines Release Candidates von Bootstrap 4 darauf vorbereitet.
...
OK, das ist doch schon mal eine
zukunftsträchtige Aussage, danke!
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Wed 6. Nov 2019, 14:31
by Dieter:Bahr
Es ist ja nun seit dem letzten Post einiges an Zeit vergangen ...
Mittlerweile gibt es Bootstrap in der Version 4.2.1
Wollte mal fragen, ob das mittlerweile eine Möglichkeit gibt die neue Strucktur des Menüs in Phpwcms zu integrieren?
bzw. wo wird die aktuelle Struktur des Menüs erstellt?
Thx
Code: Select all
<ul>
<li>
<a> link </a>
</li>
<li>
<a> link </a>
</li>
</ul>
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Wed 6. Nov 2019, 14:45
by Oliver Georgi
Die Struktur ist doch die selbe. Lediglich die Klassen werden angepasst, siehe conf.template_default.inc.php
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Wed 6. Nov 2019, 15:01
by Old Boy
Genau da wäre ein funktionierendes Beispiel eine unschlagbare Hilfe ...
denn ohne saubere Navigationsdarstellung ist das beste CMS nix wert
Solltest du da also mal etwas Zeit opfern können ... ich glaube da wäre der verbleibende Rest der phpwcms-Getreuen sehr dankbar.
Mein Gott, was habe ich da in den vergangenen Monaten schon (ziemlich blind) rumgefummelt ...
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Wed 6. Nov 2019, 16:35
by kmstario
Holla,
also im Prnzip nutze ich Bootstrap für alle aktuellen Projekte. Hier mal der Ausschnitt, den ich oft so verwende:
Code: Select all
<nav class="navbar navbar-expand-lg fixed-top scrolling-navbar nav-bg">
<div class="container">
<div class="theme-header clearfix">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span class="fa fa-menu"></span>
<span class="fa fa-menu"></span>
<span class="fa fa-menu"></span>
</button>
<a href="index.html" class="navbar-brand"></a>
</div>
<div class="collapse navbar-collapse" id="main-menu">
{NAV_LIST_UL:B,0,2,active|navbar-nav mr-auto w-100 justify-content-end,|active}
</div>
</div>
</div>
<div class="mobile-menu" data-logo="picture/logo.svg"></div>
</nav>
Natürlich mit CSS etwas aufhübschen und in der conf.template_default.inc.php passe ich nur diese Zeilen an:
Die anderen vorhandenen Klassen muss man ja nicht ansprechen
Code: Select all
'navlist-sub_ul' => 'nav-item',
'navlist-sub_no' => 'nav-item',
Und in der Ausgabe sieht es dann so aus:
Code: Select all
<ul class="navbar-nav mr-auto w-100 justify-content-end">
<li class="nav-item"><a href="xxx.html" class="nav-link" title="xxx">xxx</a></li>
<li class="dropdown nav-item"><a href="xxx.html" class="dropdown-toggle nav-link" title="xxx" data-toggle="dropdown">xxx <b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-left">
<li class="nav-item"><a href="xxx.html" class="nav-link" title="xxx">xxx</a></li>
<li class="nav-item"><a href="xxx.html" class="nav-link" title="xxx">xxx</a></li>
</ul>
</li>
<li class="nav-item"><a href="xxx.html" class="nav-link" title="xxx">xxx</a></li>
<li class="nav-item"><a href="xxx.html" class="nav-link" title="xxx">xxx</a></li>
<li class="nav-item"><a href="xxx.html" class="nav-link" title="xxx">xxx</a></li>
</ul>
Vg Andreas
P.S. Achja, dazu binde ich Font Awesome ein (fa fa-menu)
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Wed 6. Nov 2019, 17:38
by Dieter:Bahr
Hi Andreas,
also, bei dem von Dir beschriebenen Codes kommt bei mir völliger Unsinn raus.
Dropdown geht auch nicht. Danke trotzdem
Gruss Dieter
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Wed 6. Nov 2019, 18:22
by kmstario
Was bedeutet völliger unsinn??
Schau einfach mal
hier rein, da gibt es X verschiedene.
Und hier gern auch mal eine Copy and Paste Variante(bereinigt):
Dazu auch Jquery 3.3.1 immer aktiviert und keine CSS Datei, also frontend.css abwählen.
HTML Kopf:
Code: Select all
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
Haupt:
Code: Select all
<!-- JS: assets/js/popper.min.js -->
<!-- JS: assets/js/bootstrap.min.js -->
<header class="header_area">
<div class="main_menu">
<nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
<div class="container">
<div class="theme-header clearfix">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-menu" aria-controls="main-menu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a href="index.html" class="navbar-brand"></a>
</div>
<div class="collapse navbar-collapse" id="main-menu">
{NAV_LIST_UL:B,0,2,active|navbar-nav,|active}
</div>
</div>
</div>
<div class="mobile-menu" data-logo="picture/logo.svg"></div>
</nav>
</div>
</header>
<!-- Start Slider -->
{HEADER}
<!-- End Slider -->
<!-- Start Content -->
<main class="section">
{CONTENT}
</main>
<!-- End Content -->
<!-- Start Footer -->
<footer class="footer">
<div class="container">
<p class="mb-0">{DATE_SHORT} © </p>
</div>
</footer>
<!-- End Footer -->
Skript- und CSS Pfade müssen natürlich eurer Struktur angepasst sein. Ich hosten immer lokal und nutze keinerlei externe Verbindungen(CDN's).
Das ergibt eine Bootstrap 4 Standart Navigation.
Der Rest ist natürlich Gestaltung via CSS.
Ich nutze
Bootstrap 4.3.1
Für Parent Link Klick gibts auch ein kleines JS Snipp:
Code: Select all
jQuery(function($) {
if ($(window).width() > 769) {
$('.navbar-nav .dropdown > a').click(function() {
location.href = this.href;
});
}
});
Vg Andreas
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Thu 7. Nov 2019, 11:29
by Dieter:Bahr
Moin Andreas,
danke nochmal für den Hinweis mit BS 4.3.1. Mit etwas hin und her, läuft es nun so wie ich mir das vorstelle
Mit Bootstrap 4.2.1 läuft es bei mir garnicht. Dropdown geht nicht usw.
Nach dieser Erfahrung muß ich gestehen, das ich Oliver bezüglich Bootstrap 4+ langsam verstehen kann.
(ich hätte nicht gedacht, das ich das mal sage
Es mag sein, das das ein oder andere unter Umständen mit BS 4+ etwas komfortabler ist, aber solange man sich dort nicht auf eine verläßliche Methode geeinigt hat, macht es nicht wirklich Sinn das zu integrieren, da man ja nicht weiß ob es vielleicht mit 4.4.1 wieder alles anders ist.
Gruss Dieter
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Wed 23. Sep 2020, 09:37
by Dieter:Bahr
Andreas, hättest Du evtl ein Muster der Änderungen in der Custom Setting und/oder conf.template_default.inc für BS4 für mich?
Danke
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Wed 23. Sep 2020, 14:23
by Dieter:Bahr
Kann ich der ersten Ebene der Navbar irgendwie eine eigene Klasse zuweisen, ohne diese über die CSS-Klasse der Seitenstruktur mit zu schicken?
Hab da noch nicht wirklich was gefunden, was sich nicht auch auf die unteren Ebenen auswirkt.
DANKE
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Wed 23. Sep 2020, 15:14
by Oliver Georgi
Ja, möglich – jede Ebene kann separat angesprochen werden. Das kannst Du mit den Angaben der
conf.template_default.inc.php kombinieren. Siehe alle Parameter:
https://github.com/slackero/phpwcms/blo ... .php#L2927
also z.B.:
Code: Select all
{NAV_LIST_UL: PB, 0, 2, | nav-level-1 | nav-level-2 | nav-level-3 , active active-li | active active-a }
Etwas spielen und sich das gerenderte Ergebnis anschauen.
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Thu 24. Sep 2020, 18:05
by santscho
Da die Standard-Bootstrap-Nav ohne Hack eh nur eine Sub-Ebene unterstützt und das Dropdown auch nicht gerade ein Augenschmaus ist, habe ich das so gelöst:
Desktop:
- 1-Level Navbar. Sie wird in der Mobile-Ansicht ausgeblendet.
- Unter-Navigation als separate Navbars mit Level-Lift (erscheint nur wenn Unterebenen vorhanden sind)
- Unter-Navigation kann auch alternativ als vertikale Navi in der Sidebar positioniert werden
Mobile:
- Mobile-Navbar wird eingeblendet, die Desktop-Navbars werden ausgeblendet
- Die mobile Navbar enthält eine normale vertikale phpwcms-Multilevel-Navlist
Wie das umgesetzt ist kann man hier mal angucken.
http://www.hramusp.ru
Re: NAV_LIST_UL in Kombination mit Bootstrap 4
Posted: Sun 4. Oct 2020, 11:08
by Dieter:Bahr
Moin,
danke erst mal für die Ausführungen. Hab BS 4.5.2 nun am laufen. Auch als Multilevel, aber etwas stört mich nach wie vor.
Und zwar der Erste Link meiner Seitenstruktur.
BS4 Navbar gibt auch dem ersten < li > < a class = nav-link href = " # "> LINK < / a > < / li > bereits eine Klasse mit.
Dies hab ich in PHPWCMS noch nicht hin bekommen, was zur folge hat, das ich für den spezielle CSS machen muß
Seitenstruktur
- home
--Startseite (deutsch)
--- Link 1
--- Link 2
---- Link 2-1
.
.
--Startseite (englisch)
--- Link 1
--- Link 2
---- Link 2-1
.
.
Code: Select all
<!-- Variante Original Bootstrap 4 erster Link-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Startseite<span class="sr-only">(current)</span></a>
</li>
<!------------------------------------>
<!-- Variante Bootstrap 4 erster Link PHPWCMS -->
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav ml-auto nav-link-top nav-level-1">
<li class="nav-item nav-link nav-item_erster_link_navbar sub_parent Klasse_aus_Seitenstruktur">
<a href="de/index.html" title="Startseite">Startseite</a>
</li>