Hervorgehobener Menüpunkt auf Unterseite

Allgemeine Fragen
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von inno »

Hallo Tommy,
wie kann ich einen Menüpunkt auf der betreffenden Unterseite farblich und fett hervorheben.
Wenn der User auf Seite 1 soll sich die Farbe wie beim Mouse-Over ändern und auf der Unterseite so bleiben, am besten noch FETT. Screenshots siehe Anhand + Link zur Dummyseite.
Ich verwende das Theme "PlatformM5".

https://pytzdribds.mobirisesite.com/
Dateianhänge
screen2.jpg
screen1.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Tommy Herrmann »

Moin,

also Mobirise hat dafür keine Option geschaffen.

Ich hatte so etwas mal hier ausprobiert:

https://www.mobirise-tutorials.com/Test ... ungen.html

Dort steht auch beschrieben, wie ich das gemacht hatte.

Entscheidend ist, dass die Menüleiste dann nicht mehr "global" sein darf - was entsprechend dann auch den riesen Nachteil hat, dass man bei einer Änderung jede einzelne Seite anpassen muss.

Ich rate eigentlich davon ab.
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von inno »

... komme mit der Anleitung auf deiner Seite leider nicht zurecht. Irgendwie ist die Navi bei diesem Theme PlatformM5 anders aufgebaut. Vielleicht kannst du mal schauen, wenn du Zeit dast. 1000Dank!
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Tommy Herrmann »

.... habe heute leider keine Zeit mehr zu gucken.

Vielleicht morgen ...
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von inno »

Das wäre Klasse! :tu:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Tommy Herrmann »

Moin,

also - das war eigentlich noch viel einfacher als in meinem oben erwähnten Beispiel :confused:

Hier meine Testseite mit der geänderten Menüleiste:

https://www.mobirise-tutorials.com/PlatformM5/

Bitte bedenke aber, dass Du dann eine ziemliche Arbeit mit jeder Seite hast. Du musst jeden Link auf jeder Seite in der nun NICHT mehr globalen Menüleiste erneut setzten. Also alles was Du an der Menüleiste machst, musst Du dann immer auf jeder einzelnen Seite tun.


> Entferne das Attribut "global" auf jeder Seite im Quelltext mit dem "Code Editor"

Navigation - global - entfernen.jpg



> Ändere dann auf jeder einzelnen Seite immer die class="text-white" in meinetwegen class="text-primary", so habe ich es gemacht:


Navigation - Text-Aktiv - ändern.jpg



Diese Text-Klassen wie "text-white" sind vorgefertigte Bootstrap-Klassen, da gibt es noch viele mehr im globalen "Dynamic Style" Deiner Seite, die über Variablen bestimmt werden - (am Pinsel) wie:

Code: Alles auswählen

.text-primary {
    color: @primaryColor  !important;
}

.text-secondary {
    color: @secondaryColor  !important;
}

.text-success {
    color: @successColor  !important;
}

.text-info {
    color: @infoColor  !important;
}

.text-warning {
    color: @warningColor  !important;
}

.text-danger {
    color: @dangerColor  !important;
}

.text-white {
    color: #fafafa !important;
}

.text-black {
    color: #232323 !important;
}

a.text-primary:hover,
a.text-primary:focus,
a.text-primary.active {
    color: darken(@primaryColor, 20%) !important;
}

a.text-secondary:hover,
a.text-secondary:focus,
a.text-secondary.active {
    color: darken(@secondaryColor, 20%) !important;
}

a.text-success:hover,
a.text-success:focus,
a.text-success.active {
    color: darken(@successColor, 20%) !important;
}

a.text-info:hover,
a.text-info:focus,
a.text-info.active {
    color: darken(@infoColor, 20%) !important;
}

a.text-warning:hover,
a.text-warning:focus,
a.text-warning.active {
    color: darken(@warningColor, 20%) !important;
}

a.text-danger:hover,
a.text-danger:focus,
a.text-danger.active {
    color: darken(@dangerColor, 20%) !important;
}

a.text-white:hover,
a.text-white:focus,
a.text-white.active {
    color: darken(#fafafa, 20%) !important;
}

a.text-black:hover,
a.text-black:focus,
a.text-black.active {
    color: darken(#232323, 20%) !important;
}


Natürlich könntest Du auch eine eigene CSS-Class gründen, ich ich hier mal "mein-aktiver-text" genannt habe und dann diese Class verwenden.

... also dann die vorhandene class="text-white" ersetzen mit Deiner class="mein-aktiver-text".

Hier als Beispiel in rot und fett:

Code: Alles auswählen

.mein-aktiver-text {
    color: red;
    font-weight: bold;
}


P.S.:

habe da noch einen Punkt an die aktive Seite gesetzt, der folgende CSS hat:

Code: Alles auswählen

.myselect {
  margin-bottom: 1rem;
  position: relative;
  padding-left: 20px;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #aafc75;
    box-shadow: 0 0 0 5px rgba(red(#aafc75), green(#aafc75), blue(#aafc75), 0.2);
  }
}

myselect Punkt an aktiver Seite.jpg
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von stobi_de »

Moin Tommy, kurze Frage
wenn man das Menü global macht und jedem Menüpunkt eine Klasse HIghtlight-1 bis Hightlight-10, so könnte man doch grundsätzlich im Sitestyle sagen, das war irgendwie mit Child: alle Texte schwarz.

Dann hast Du nur auf EINER Seite zu sagen

Code: Alles auswählen

hightlight:5th-child
{
color: green!important;
}
Das ist noch nicht ganz zuende gedacht....

Das hier scheint besser:
https://javigonzalez.ch/blog/einen-akti ... ervorheben
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Tommy Herrmann »

Moin,

hört sich logisch an - müsste man mal testen - glaube aber eher nicht, denn wenn die Navi global ist, wird ja das was Du auf einer Seite "sagst" eben auf allen Seiten ausgeführt.

Kenne mich mit dem 5th Child nicht wirklich aus - habe nur zwei :D

Mobirise müsste im Grunde mal eine Navi konstruieren, die (wie bei NOF früher) eben den jeweils zur aktiven Seite gehörenden Link mit einer class="active" bestückt.
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 293
Registriert: Do 17. Dez 2020, 11:59

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von inno »

Hi Tommy, vielen Dank! Funktioniert! Ich habe mich für die 2te Version entschieden! :tu: :tu:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Tommy Herrmann »

Inno,

bestens :tu:


Frank,

ja prima - mit JavaScript geht das natürlich auch - kann man machen, hier hatte ich diese Anleitung auch schon mal gesehen:

https://www.w3schools.com/howto/tryit.a ... e_element2

Ich werde das mal mit dem JavaScript später auch noch testen ...
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von struggle »

Jetzt muss ich doch noch mal nachfragen. Auf meiner Website erscheint ja auch der Menüpunkt der jeweiligen Seite in einer anderen Farbe. Wie in der Anleitung beschrieben, habe ich das "global" herausgenommen und in der jeweiligen Seite im HTML geändert.
Nun ist das sehr aufwändig, gerade wenn man noch Seiten hinzufügen will.
Verstehe ich das richtig, daß man das über CSS so regeln könnte, daß das "global" bestehen bleiben könnte ? Das würde ja alles erleichtern.
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Tommy Herrmann »

Nee - also das klappt so nicht - zumindest ist mir das jetzt zu aufwändig. Das JavaScript bekomme ich so mit der Mobirise-Navigation nicht zum Laufen :(

Habe so ca. 5 verschiedene JavaScript-Lösungen ausprobiert - auch jQuery. Bisher ist mir das nicht gelungen. Der aktive Link wird durch Klick vom JavaScript nicht erkannt.

Ich denke ich bleibe bei meiner Lösung:

https://www.mobirise-tutorials.com/PlatformM5/

... die dann auch wenigstens verständlich ist.

Falls sich da noch jemand mit beschäftigt und es schafft, bitte dann hier posten ...
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von struggle »

Also, ich habe dies hier gefunden, vom 4. Mai 23
Tommy Herrmann hat geschrieben: Do 4. Mai 2023, 05:59 Moin,

also - das war eigentlich noch viel einfacher als in meinem oben erwähnten Beispiel :confused:

Hier meine Testseite mit der geänderten Menüleiste:

https://www.mobirise-tutorials.com/PlatformM5/

Bitte bedenke aber, dass Du dann eine ziemliche Arbeit mit jeder Seite hast. Du musst jeden Link auf jeder Seite in der nun NICHT mehr globalen Menüleiste erneut setzten. Also alles was Du an der Menüleiste machst, musst Du dann immer auf jeder einzelnen Seite tun.


> Entferne das Attribut "global" auf jeder Seite im Quelltext mit dem "Code Editor"


Navigation - global - entfernen.jpg




> Ändere dann auf jeder einzelnen Seite immer die class="text-white" in meinetwegen class="text-primary", so habe ich es gemacht:



Navigation - Text-Aktiv - ändern.jpg




Diese Text-Klassen wie "text-white" sind vorgefertigte Bootstrap-Klassen, da gibt es noch viele mehr im globalen "Dynamic Style" Deiner Seite, die über Variablen bestimmt werden - (am Pinsel) wie:

Code: Alles auswählen

.text-primary {
    color: @primaryColor  !important;
}

.text-secondary {
    color: @secondaryColor  !important;
}

.text-success {
    color: @successColor  !important;
}

.text-info {
    color: @infoColor  !important;
}

.text-warning {
    color: @warningColor  !important;
}

.text-danger {
    color: @dangerColor  !important;
}

.text-white {
    color: #fafafa !important;
}

.text-black {
    color: #232323 !important;
}

a.text-primary:hover,
a.text-primary:focus,
a.text-primary.active {
    color: darken(@primaryColor, 20%) !important;
}

a.text-secondary:hover,
a.text-secondary:focus,
a.text-secondary.active {
    color: darken(@secondaryColor, 20%) !important;
}

a.text-success:hover,
a.text-success:focus,
a.text-success.active {
    color: darken(@successColor, 20%) !important;
}

a.text-info:hover,
a.text-info:focus,
a.text-info.active {
    color: darken(@infoColor, 20%) !important;
}

a.text-warning:hover,
a.text-warning:focus,
a.text-warning.active {
    color: darken(@warningColor, 20%) !important;
}

a.text-danger:hover,
a.text-danger:focus,
a.text-danger.active {
    color: darken(@dangerColor, 20%) !important;
}

a.text-white:hover,
a.text-white:focus,
a.text-white.active {
    color: darken(#fafafa, 20%) !important;
}

a.text-black:hover,
a.text-black:focus,
a.text-black.active {
    color: darken(#232323, 20%) !important;
}


Natürlich könntest Du auch eine eigene CSS-Class gründen, ich ich hier mal "mein-aktiver-text" genannt habe und dann diese Class verwenden.

... also dann die vorhandene class="text-white" ersetzen mit Deiner class="mein-aktiver-text".

Hier als Beispiel in rot und fett:

Code: Alles auswählen

.mein-aktiver-text {
    color: red;
    font-weight: bold;
}


P.S.:

habe da noch einen Punkt an die aktive Seite gesetzt, der folgende CSS hat:

Code: Alles auswählen

.myselect {
  margin-bottom: 1rem;
  position: relative;
  padding-left: 20px;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #aafc75;
    box-shadow: 0 0 0 5px rgba(red(#aafc75), green(#aafc75), blue(#aafc75), 0.2);
  }
}


myselect Punkt an aktiver Seite.jpg
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Tommy Herrmann »

Moin,

ja - aber Du sagtest doch, dass Du eben das Attribut "global" vom Menüblock (Navi) nicht entfernt hast - das war das, was mich gewundert hat.

Ich hatte eben damals geschrieben:
Tommy Herrmann hat geschrieben: Do 4. Mai 2023, 05:59
> Entferne das Attribut "global" auf jeder Seite im Quelltext mit dem "Code Editor"

Navigation - global - entfernen.jpg

Das wäre ja großartig, wenn das eben auch funktioniert ohne das Attribut zu entfernen - wie bei Dir. Ich wollte Dich nur darauf aufmerksam machen, dass es passieren könnte, dass das eines Tages wieder überschrieben wird (muss aber nicht), nur damit Du Dich in diesem Fall nicht wunderst.
Benutzeravatar
struggle
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 436
Registriert: So 4. Dez 2022, 11:55
Wohnort: Brandenburg

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von struggle »

Du, ich glaube, da gibt es ein Missverständnis. Ich habe niemals gesagt, daß ich "global" nicht entfernt hätte, ganz im Gegenteil, ich habe in fast jedem Beitrag darauf hingewiesen, daß die Menüleiste nicht global ist und ich deshalb jede einzelne Seite händisch ändern müsste.
Hab' mich schon gewundert, da haben wir wohl aneinander vorbeigeredet.
Gruss
Reinhard
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Tommy Herrmann »

ja - das wird es wohl sein - da habe ich Dich dann falsch verstanden, denn seit Deinem Kommentar hier:

viewtopic.php?p=11778#p11778

... hatte ich angenommen, Du hättest das "global" nicht entfernt.

Egal - dann ist ja alles so richtig.
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von stobi_de »

Hier das Javascript, was ich nie zum Laufen bekommen habe.
Man kann das GLOBAL beibehalten (wenn es denn funktionieren würde)

https://javigonzalez.ch/blog/einen-akti ... ervorheben
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5743
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Tommy Herrmann »

ohne das jetzt genau angeguckt zu haben - hast Du das schon so hin bekommen???

Etliche Quellen, die dort genannt werden, habe ich alle schon durch - nichts hat in Mobirise funktioniert - logisch, weil vieles eben mit JavaScript nur auf der gleichen Seite funktionieren kann.
Klaus
Supporter
Supporter
Beiträge: 439
Registriert: Mi 21. Jul 2021, 00:43

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von Klaus »

Vorweg ... ich arbeite ja mit MR nicht (mehr) und weiß deswegen auch nicht genau ob meine Ideen passen.

Ich finde die Idee (viewtopic.php?p=10830#p10830) von oben doch recht gut, auch wenn die Navi global ist (auf jeder Seite eingefügt wird?) weiß man ja "unten" in der Seite dann wo man ist und kann jedes Element per JavaScript ändern.

->Entweder auf jeder einzelnen Seite spez. oben die passende Navi mit einer Aktiv-Klasse "beglücken" oder per globalem JavaScript.

In JavaScript weiß man ja auf welcher Seite man ist und kann dann gezielt die Navi mit dem gleichen href suchen.

Grob (kann man sicher "verfeinern", z.B. groß/klein nicht beachten, andere for Schleife, nur die Navi "erwischen" ...):

Code: Alles auswählen

var path = window.location.pathname;
var page = path.split("/").pop();
var els = document.querySelectorAll("a[href^='" + page + "']");
for (var i = 0, l = els.length; i < l; i++) {
  var el = els[i];
  el.classList.add = "active";
}
Ggf. zum gucken mal el.classList.add = "active"; gegen el.text = "ABC"; tauschen dann sollte sich der Text ändern.
stobi_de
Moderator
Moderator
Beiträge: 729
Registriert: Di 11. Okt 2022, 06:30

Re: Hervorgehobener Menüpunkt auf Unterseite

Ungelesener Beitrag von stobi_de »

@Thommy: nee, habe eben nochmal durchgetestet.
Aber schon bei der Zeile scheint ende zu sein " navlist.length;"
Sobald ich die Variable nutze, läuft das JS nicht, obwohl der Syntaxchecker keinen Fehler findet.
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 23 Gäste