Menü Sidebar Symbol < nur bei aktivem Menü-Titel anzeigen

WM-Loose · 18. April 2023

Astroid Framework 2.6.4 mit JP-Template TP-perfect 1.3.13

Im Link hinter den Meülinks das Symbol "<" zu sehen.

Die Herausforderung besteht nun darin, das Symbol nur bei den Links anzuzeigen, die tatsächlich aktuell aufgerufen werden.

Dies haben wir jetzt aktuell mit folgenden CSS Einträge zu lösen versucht:

CSS

/* entfernt Symbol Dreieck im Menü der Sidebar */
ul.list-inline li.active a::after {
display:none
}

/* aktiviert das Symbol Dreieck bei aktiven Menütiteln in der Sidebar */
li.current a span.nav-title::after {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 700!important;
  content: ""!important;
  padding-left: 4px!important;
}

Alles anzeigen

Dies funktioniert beim Aufruf des Übergeordneten Menülinks aber nicht so wirklich. Hier werden alle untergeordneten Menülinks auch mit Symbol angezeigt.

Erst wenn ich einen davon auswähle werden alle anderen ausgeblendet.

Wunsch wäre, dass immer nur der aktiv ausgewählte Menülink das Symbol anzeigen soll.

Hat von euch noch jemand eine Idee wie ich den Code entsprechend anpassen muss?

Mopps · 18. April 2023

Also bei mir scheint es genau so zu funktionieren, wie du das willst.

Beispiel 1:

Beispiel 2:

WM-Loose · 18. April 2023

Klick mal auf den Link Audio- u. Unterlagen-Archiv

Mopps · 18. April 2023

Zitat von WM-Loose

Klick mal auf den Link Audio- u. Unterlagen-Archiv

Ach, ich seh's.

Idee: Aktiviere nur current.active.

WM-Loose · 18. April 2023

Zitat von Mopps

Ach, ich seh's.
Idee: Aktiviere nur current.active.

Wenn ich current einfüge ist doch der obere Menüeintrag auch current?

Also werden alle current mit Symbol angezeigt

Wie sieht denn dein css Code mit current aus?

Ich denke es liegt generell an der Menüstruktur, denn ab dem eben geannten Menüeintrag ist ja alles ::after und wird somit gleich behandelt.

Eventuell nur mit zusätzlichen Menüs realisierbar...?

Echt verrückt, was so ein kleines Symbol für nen Aufwand verursacht.

Mopps · 18. April 2023

Zitat von WM-Loose

Wenn ich current einfüge ist doch der obere Menüeintrag auch current?
Also werden alle current mit Symbol angezeigt

Wie sieht denn dein css Code mit current aus?

Ich denke es liegt generell an der Menüstruktur, denn ab dem eben geannten Menüeintrag ist ja alles ::after und wird somit gleich behandelt.
Eventuell nur mit zusätzlichen Menüs realisierbar...?

Echt verrückt, was so ein kleines Symbol für nen Aufwand verursacht.

Alles anzeigen

Ich meinte das so:

Du aktivierst das Pseudoelement nur innerhalb der current.active-Hierarchie (also in dem li-Element - in deinem Beispiel item-103). Im darunterliegenden ul.nav-child knippst du das aus (display:none).

Das sollte folgenden Effekt erzeugen:

> Klickst du in die erste Ebene (Audio- u. Unterlagen-Archiv), wird <li class="item-103 current active deeper parent"> aktiviert und zeigt das Pseudoelement an. Gleichzeitig befindet sich eine unterordnete Liste darunter (die ganzen MFZ-Einträge) - zb. <ul class="nav-child unstyled"> die das Pseudoelement aber ausblendet (wegen ul.nav-child -> display: none).

> Klickst du in eine Unterebene (zb. MFZ 2022), ist das übergeordnete Listenelement (in deinem Beispiel item-103 nicht aktiv (also auch keine CSS-Klasse current.active mehr). Demnach wird das Pseudoelement auch nicht mehr dargestellt.

Jetzt schaltest du nur noch das Pseudoelement für die untergeordneten Menüpunkte wieder ein. Das da -> li.current a span.nav-title::after

WM-Loose · 18. April 2023

Versucht aber dann werden gar keine Symbole mehr angezeigt.

Es sei denn, ich habe es falsch verstanden oder nicht korrekt umgesetzt.

Mopps · 18. April 2023

Zitat von WM-Loose

Versucht aber dann werden gar keine Symbole mehr angezeigt.
Es sei denn, ich habe es falsch verstanden oder nicht korrekt umgesetzt.

Sorry, aber ich kann nicht nachvollziehen was genau du probiert hast. Dazu müsstest du es schon mal onlinestellen.

Ich kann im Browser keine Pseudoelemente ändern (ausblenden), klappt irgendwie nich, bzw. werden sie dann gleich ganz gekillt.

christine2 · 18. April 2023

Also, ohne die Codes zu bemühen, tue ich mir mit Bildern leichter

Tät sagen, passt ja eh:

Hier halt, alle verfügbaren Links zu Audio- u. Unterlagen-Archiv:

Hier bei Klick z.B auf das Jahr 2022:

oder, Jahr 2019:

usw. halt.

Liebe Grüße

Christine

WM-Loose · 18. April 2023

Ja Christine, dachte ich auch und so ist es ja aktuell. er will aber dass wenn er auf den oberen Link klickt, keine Symbole in der 2. Ebene angeigt werden.

Also nur ein Symbol immer bei dem aktiven Link. So wie bei Cassiopeia.

Dsa lässt sich aber bisher nicht realisieren.

Mopps · 18. April 2023

Zitat von christine2

Also, ohne die Codes zu bemühen, tue ich mir mit Bildern leichter

Tät sagen, passt ja eh:
Hier halt, alle verfügbaren Links zu Audio- u. Unterlagen-Archiv:

Hier bei Klick z.B auf das Jahr 2022:

oder, Jahr 2019:

usw. halt.

Liebe Grüße
Christine

Alles anzeigen

Problem ist halt, dass Dirk beim Klick auf die Hauptkategorie "Audio- u. Unterlagen-Archiv" die Symbole _nicht_ in der Unterkategorien darstellen will.

christine2 · 18. April 2023

Zitat von WM-Loose

Die Herausforderung besteht nun darin, das Symbol nur bei den Links anzuzeigen, die tatsächlich aktuell aufgerufen werden.

Achso ..... dann habe ich das falsch verstanden. Dachte, beim Aufruf eines bestimmten Jahres, wären alle Symbole zu sehen (gewesen).

Zitat von Mopps

Problem ist halt, dass Dirk beim Klick auf die Hauptkategorie "Audio- u. Unterlagen-Archiv" die Symbole _nicht_ in der Unterkategorien darstellen will.

Ah ja. Dann muss doch der (ein) Code ran .....

Liebe Grüße

Christine

WM-Loose · 18. April 2023

Mit folgendem CSS Code wird nur noch der Hauptmenüeintrag mit Symbol angezeigt:

CSS

/* entfernt Symbol Dreieck im Menü der Sidebar */
ul li.active a::after {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 700!important;
  content: ""!important;
  padding-left: 4px!important;
}

ul li.active li a::after {
display:none;
}

Alles anzeigen

Wenn jetzt noch jemand eine idee hat, wie der ausgewählte Link dann in der unteren eEbene markiert wird, wäre das Problem 100% gelöst

WM-Loose · 18. April 2023

Lösung sieht so aus:

CSS

/* entfernt Symbol Dreieck im Menü der Sidebar */
ul li.active a::after {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 700!important;
  content: ""!important;
  padding-left: 4px!important;
}
ul li.active li.current::after {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 700!important;
  content: ""!important;
  padding-left: 4px!important;
}
ul li.active li a::after {
display:none;
}

Alles anzeigen

christine2 und Mopps: Danke für eure Unterstützung

Mopps · 18. April 2023

Zitat von WM-Loose

Lösung sieht so aus:

CSS

/* entfernt Symbol Dreieck im Menü der Sidebar */
ul li.active a::after {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 700!important;
  content: ""!important;
  padding-left: 4px!important;
}
ul li.active li.current::after {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 700!important;
  content: ""!important;
  padding-left: 4px!important;
}
ul li.active li a::after {
display:none;
}

Alles anzeigen

christine2 und Mopps: Danke für eure Unterstützung

Ist ja dasselbe "in grün" ... was ich versucht hab zu erklären -> active und current adressieren, wo es zusammen aufgerufen wird bzw. aktiv ist. Schön, dass es jetzt klappt.

Tags