navbar einzelne Button farbig darstellen

stefan.brake schrieb am 20.02.2015 um 14:02 Uhr

Hallo zusammen,

ich möchte für meine Navbar mit mehreren Button, farbige Button nutzen also wenn ich auf Seite 1 bin soll dieser Button rot sein und der rest blau damit man sieht wo man gerade ist, wechsel ich auf seite 2 soll dieser Button rot sein und der rest wieder blau.

Bevor ich meine Navbar an die Scrollleiste angehängt habe funktionierte es auch da ich für jede Seite eine
eigene Navbar hatte, jetzt mit der "angehängten" Scrollleiste (navbar geht mit der Scrollleiste mit) habe ich nur noch eine Navbar und die restlichen Seiten sind mit Platzhalter versehen.
(Hier nochmal einen Großen Dank an BeRo für die Hilfe)

Eine solche Frage hatte ich auch gefunden, leider ist diese nicht beatwortet.
Weiß jemand Rat ?

Viele Grüße

Kommentare

BeRo schrieb am 20.02.2015 um 14:48 Uhr

[...] habe ich nur noch eine Navbar und die restlichen Seiten sind mit Platzhalter versehen.[...]

Wenn das so ist, dann hat Du noch nicht alles umgesetzt, was ich beschrieben habe...

In der endgültigen Version darf keine der aktiven Seiten eine vollständige NavBar haben. Auf den aktiven Seiten darf sich nur ein Platzhalter befinden, in dem per iframe Code die Seite mit der NavBar referenziert wird.
Die vollständige NavBar befindet sich dann auf einer separaten Seite. Diese Seite kann Bestandteil des Gesamtprojekts sein, sie kann aber auch in einem separaten Projekt angelegt werden. Wichtig ist nur der Name der Seite, weil der im iframe Code verwendet werden muss...

Die Kurzform der Anleitung findest Du hier.

Die komplette Anleitung mit Links zur online Demo und zur Projektdatei gibt es hier.

[...] wenn ich auf Seite 1 bin soll dieser Button rot sein und der rest blau [...] wechsel ich auf seite 2 soll dieser Button rot sein und der rest wieder blau.[...]

Wie Du in der online Demo sehen kannst, ändern sich die Buttons der NavBar farblich, wenn eine Seite aktiv wird. Der Trick, der zur Lösung führt, ist simpel:
Du musst für jeden Zustand der NavBar eine neue, separate Seite anlegen und im iframe Code jeder Seite die NavBar referenzieren, die so aussieht, wie Du es möchtest.

In der oben verlinkten Projektdatei ist das Demo Projekt genau so angelegt.

Im Editor sieht das dann z. B. so aus:

Probier's nochmal

Zuletzt geändert von BeRo am 20.02.2015, 14:48, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

stefan.brake schrieb am 20.02.2015 um 15:47 Uhr


[...] habe ich nur noch eine Navbar und die restlichen Seiten sind mit Platzhalter versehen.[...]

Wenn das so ist, dann hat Du noch nicht alles umgesetzt, was ich beschrieben habe... :-D

In der endgültigen Version darf keine der aktiven Seiten eine vollständige NavBar haben. Auf den aktiven Seiten darf sich nur ein Platzhalter befinden, in dem per iframe Code die Seite mit der NavBar referenziert wird.
Die vollständige NavBar befindet sich dann auf einer separaten Seite. Diese Seite kann Bestandteil des Gesamtprojekts sein, sie kann aber auch in einem separaten Projekt angelegt werden. Wichtig ist nur der Name der Seite, weil der im iframe Code verwendet werden muss...

Das habe ich gemacht, hatte mich wohl falsch ausgedrückt....hat funktioniert

Ohne mir jetzt die Demo anzuschauen, nur Deinen text gelesen verstehe ich es so:

Ich erstelle für jede Seite eine eigene seperate Navbar auf die ich mit Platzhalter zugreife und den entsprechenden Namen im Code eingebe.
So mal etwas rumpobiert, Navbar kopiert und die Button farbig markiert dann noch im Platzhalter vermerkt "Wiederholen beenden" Funktioniert wunderbar ;-)
Noch 2-3 komplett neue Webseiten und ich werde Profi (Dank BeRo)