NAV_LIST_UL in Kombination mit Bootstrap 4

[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?

[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.

[Old Boy]

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!

[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>

[Oliver Georgi]

Die Struktur ist doch die selbe. Lediglich die Klassen werden angepasst, siehe conf.template_default.inc.php

[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 ...

[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)

[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

[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} &copy; </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

[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

[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

[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

[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.

[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

[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>