Bootstrap Navigation mehrfarbig gestalten

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Post Reply
User avatar
Uwe367
Posts: 884
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Bootstrap Navigation mehrfarbig gestalten

Post by Uwe367 » Sun 17. Sep 2017, 09:25

Hallo allerseits.
Ich bin gerade eine Website für eien Grundschule neu aufzubauen. Da das ganze etwas bunter gestaltet werden soll, möchte ich die Navigation gerne in verschiedenen Hintergrundfarben erstellen und zwar so daß auch die Ausklappmenüs die Hintergrundfarbe des "Hauptmenüpunktes" haben.
Beispiel:
+Home --> rot
+Unsere Schule -->blau
++Klasse 1 --> blau
++Klasse 2 --> blau
+Schulleben --> gelb
++Aktionen -->gelb
...usw.
Mein derzeitiges Grundgerüst für die Navigation sieht folgender Maßen aus:

Code: Select all

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
       <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <div class="navbar-brand"></div>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <div class="nav navbar-nav">
            {NAV_LIST_UL:PB,0,2,active|nav navbar-nav,active}
          </div>
          </div><!--/.nav-collapse -->
      </div>     
    </nav>

        </div>
Ich weiß, das ist das Bootstrap Standartgerüst mit dem entsprechenden RT.
Ändere ich den RT nun wie gezeigt ab

Code: Select all

<div class="nav navbar-nav">
            {NAV_LIST_UL:PB,16,2,active|red nav navbar-nav,active}
            {NAV_LIST_UL:PB,1,2,active|blue nav navbar-nav,active}
          </div>
so werden die Klassen gerendert und der Hintergrund ändert sich entsprechend.
Ebene 16 ist hier die Startseite (Home), Ebene 1 "Unsere Schule".
Bis dahin kein Problem.
Setze ich aber nun eine Kategorie als Unterkategorie in "Unsere Schule" ein, so wird diese nicht als Dropdown sondern daneben angezeigt. Siehe Screenshot
Image
"Klasse 1" sollte eigentlich eine Unterkategorie von "Unsere Schule" sein.

Wo liegt mein Fehler oder müßte ich komplett anders an diese Sache heran gehen?

User avatar
Uwe367
Posts: 884
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Bootstrap Navigation mehrfarbig gestalten

Post by Uwe367 » Sun 17. Sep 2017, 10:45

Ein Stückchen weiter bin ich schonmal gekommen indem ich die Kategoerieen mit Unterkategorieen nochmals in versteckte Kategorieen gepackt habe und so sieht das ganze im BE aus.
Image
In der Vorlage unter Admin --> Haupt siehts so aus:

Code: Select all

....
<div id="navbar" class="navbar-collapse collapse">
          <div class="nav navbar-nav">
            {NAV_LIST_UL:PB,0,2,active|red nav navbar-nav,active}
            {NAV_LIST_UL:PB,18,2,active|blue nav navbar-nav,active}
            {NAV_LIST_UL:PB,19,2,active|brown nav navbar-nav,active}
            {NAV_LIST_UL:PB,20,2,active|black nav navbar-nav,active}
            {NAV_LIST_UL:PB,21,2,active|violett nav navbar-nav,active}
            {NAV_LIST_UL:PB,22,2,active|red nav navbar-nav,active}
            {NAV_LIST_UL:PB,23,2,active|blue nav navbar-nav,active}
            {NAV_LIST_UL:PB,24,2,active|brown nav navbar-nav,active}
          </div>
          .....
Und so klappts schonmal mit den Dropdowns, zwar nich nich tin den richtigen Farben, aber die Unterkateogiereen werden dort angezeigt, wo sie sein sollen.
Schauen wir mal weiter inwieweit sich Bootstrap verbiegen läßt daß ich auch die Dropdowns enstprechend farbig bkomme.

Achso... bis jetzt sieht die Navi so aus. Ist nur ein Versuchsbeispiel...
Image

Old Boy
Posts: 1015
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap Navigation mehrfarbig gestalten

Post by Old Boy » Sun 17. Sep 2017, 11:00

Kannst du nicht die Ebenen ( |Eintrag1 ) durch zusätzliche Eintragungen ( |EBENE1|EBENE2|EBENE3|EBENE4 ) einfach erweitern, zumindest hab ich das so in Erinnerung :?:

Wenn's klappt, den Rest dann per CSS ...
Last edited by Old Boy on Sun 17. Sep 2017, 11:03, edited 1 time in total.

User avatar
Uwe367
Posts: 884
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Bootstrap Navigation mehrfarbig gestalten

Post by Uwe367 » Sun 17. Sep 2017, 11:03

Hast du dafür mal ein Codebeispiel? DAS wäre mir neu oder hab ich was verpasst? :shock:
Du meinst im RT oder wie?

[EDIT]
Ich habe nun mal im BE in der Kategorie selbst imd Feld CSS Klasse die entsprechende Klasse eingetragen und das klappt. So wirds dann auch was mit dem farbigen Dropdown :wink:
Last edited by Uwe367 on Sun 17. Sep 2017, 11:31, edited 1 time in total.

Old Boy
Posts: 1015
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap Navigation mehrfarbig gestalten

Post by Old Boy » Sun 17. Sep 2017, 11:30

Ich habe hier :

http://bootstrap-4.pepes-sandbox.de/news.html

gerade mal probiert (sieh in den erzeugten Quellcode):

Code: Select all

{NAV_LIST_UL:B, 0, , |navbar-nav|ebene-2|ebene-3, active, categorie-id, , , ,}
... zumindest könnte das ein Ansatz sein:
Last edited by Old Boy on Sun 17. Sep 2017, 13:48, edited 2 times in total.

User avatar
Uwe367
Posts: 884
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Bootstrap Navigation mehrfarbig gestalten

Post by Uwe367 » Sun 17. Sep 2017, 11:34

Probier ich gerne mal aus. DAS kannte ich noch nicht, aber wie so oft führen bei PHPWCMS viele Wege nach Rom ;)
Danke dir erstmal :D
Ich bin jetzt mal weg und heute Abend erst wieder da.

User avatar
Oliver Georgi
Site Admin
Posts: 9442
Joined: Fri 3. Oct 2003, 22:22
Location: Dessau
Contact:

Re: Bootstrap Navigation mehrfarbig gestalten

Post by Oliver Georgi » Sun 17. Sep 2017, 16:39

Boah, Overkill. Gib einfach dem jeweiligen Hauptmenüpunkt eine individuelle Klasse mit und fertig.
Dann kannst Du das von oben nach unten durchreichen.

Siehe die Beispielklasse custom.
Bildschirmfoto 2017-09-17 um 16.38.35.png
Bildschirmfoto 2017-09-17 um 16.38.49.png
Oliver Georgi | phpwcms Developer | GitHub | LinkedIn | Kleintierpraxis am Georgengarten

User avatar
Uwe367
Posts: 884
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Bootstrap Navigation mehrfarbig gestalten

Post by Uwe367 » Sun 17. Sep 2017, 19:30

Äh.. ja.. ok.
Manchmal sieht man den Wald vor lauter Bäumen nicht. Danke für den Schubs :D
Aber funktioniert hatte das andere auch, wenn auch der Weg dorthin wesentlich umständlicher war :lol:

Old Boy
Posts: 1015
Joined: Fri 23. Nov 2012, 13:52

Re: Bootstrap Navigation mehrfarbig gestalten

Post by Old Boy » Mon 18. Sep 2017, 17:46

Ich habe jetzt auch mal nach Olivers Vorschlag versucht und die zusätzlichen Klassen in die Haupt-Kategorien eingefügt. Jetzt brauchte ich nur noch die CSS erweitern, etwa so:
/* Test für unterschiedlich farbig hinterlegte Menüpunkte und Dropdowns */
.nav-item.contentParts,
.nav-item.contentParts ul {
background-color: darkred;
}
.nav-item.auswahl-3,
.nav-item.auswahl-3 ul {
background-color: darkgreen;
}
Und dann sieht es so aus: http://bootstrap-4.pepes-sandbox.de/text-mit-bild.html

User avatar
Uwe367
Posts: 884
Joined: Sat 15. Sep 2007, 07:19
Location: Koblenz

Re: Bootstrap Navigation mehrfarbig gestalten

Post by Uwe367 » Tue 19. Sep 2017, 17:52

Japp. Ich habs ähnlich gemacht und es klappt einwandfrei.

Post Reply