Umbau der Navigation von vertikal auf horizontal

Hallo zusammen,

ich bin gerade dabei eine vertikale Navigation auf horizontal umzusetzen. Die 1. Ebene ist eigentlich so gut wie fertig bis auf einen Fehler bei dem mir bislang keine Lösung eingefallen ist. Neben den Beschriftungen habe ich mittels Font Awesome einen Pfeil eingebunden bei denen es Untermenüpunkte gibt. Nur jetzt wird dieser Pfeil jeweils 2x dargestellt und ich weiß nicht woher und wieso der 2. Pfeil sichtbar ist. Der Pfeil ist einmal vor dem Beschriftungstext etwas unterhalb vom Menüpunkt in schwarz und nach dem Text wie ich es im CSS definiert habe in weiß zu sehen. Bei der alten vertikalen Navigation ist mir dieses Verhalten nicht aufgefallen. Gibt es dafür einen Grund? Zu sehen ist es unter https://sub.musikverein-hirschzell.de/ und dort sind die Pfeile mit einem weißen Rahmen versehen zum besseren erkennen vom 2. Pfeil.
Kann mir bitte da jemand weiterhelfen wie ich den 2. schwarzen Pfeil ausblenden kann.
Danke!


Gruß
Thomas

Mit deinem CSS-Selektor für das Pseudoelement ::after erzeugst du zwei Pseudoelemente, eins nach dem span, eins nach dem a. Da musst du einfach noch etwas spezifischer werden, also z.B.:

Code:

---

.mod_navigation .level_1 .triangle span::after

---

Danke für den Hinweis, daran hatte überhaupt nicht gedacht.

Gruß
Thomas

Nach der Änderung ist mir jetzt noch ein weiterer Fehler aufgefallen.
Wenn ich den Pfeil mit

Code:

---

.mod_navigation .level_1 .triangle span:after

---

per CSS einbinde klappt es zwar auf der 1. Ebene der Navigation, aber dieser Pfeil wird zudem auf allen Menüpunkten der 2. Ebene angezeigt. Seiden es wird ein weiterer Pfeil auf der 2. Ebene mit

Code:

---

.mod_navigation .level_2 .triangle span:after

---

eingebunden, dann entfällt bei diesem Menüpunkt der Pfeil aus der 1. Ebene und nur der Pfeil der 2. Ebene wird angezeigt. Dadurch erhalten alle Menüpunkte der 3. Ebene den Pfeil aus der 2. Ebene. Zu sehen ist dieses Verhalten unter https://sub.musikverein-hirschzell.de/ beim Menüpunkt "Aktuell".
Was kann der Grund dafür sein, dass der Pfeil der höheren Ebene angezeigt wird bei allen Menüpunkten die kein Untermenü haben? Bislang konnte ich hierfür nichts finden was dieses Verhalten unterbindet. Gibt es irgendeine Lösung dazu die ich anwenden kann um dieses Verhalten zu umgehen.
Danke!

Gruß
Thomas

Ich habe die Navigation jetzt bis auf 2 Probleme soweit hinbekommen, 2. und 3. Ebene werden bei Hover ein- und ausgeblendet.

1) Bei Menüpunkten mit Unterseiten funktioniert der Hover-Effekt nur dann wenn die Seite vom Hauptmenüpunkt angezeigt wird. Wird eine Seite von den Unterseiten angezeigt sind die Menüpunkte der Unterseiten nicht mehr erreichbar, erst nach dem Klick auf den Hauptmenüpunkt können sie wieder per Hover eingeblendet werden. Gibt es dafür vielleicht eine Lösung, damit auch bei aktiven Unterseiten die Menüpunkte der Unterseiten per Hover eingeblendet werden?

2) Die Menüpunkte der 3. Ebene werden unterhalb des übergeordneten Menüpunktes eingeblendet. Ich möchte gerne, dass die Untermenüpunkte rechts neben dem übergeordneten Menüpunkt eingeblendet werden. Bislang habe ich es nicht geschafft die 3. Ebene so entsprechend einzublenden. Hat jemand eine Idee wie man dies realisieren kann oder gibt es vielleicht eine Seite wo dieses Vorgehen erklärt wird.

Danke!


Gruß
Thomas

Ich hatte das mal testhalber irgendwo realisiert, aber keine Ahnung ob die Installation noch existiert und wenn ja wo sie liegt. Das war noch Contao 3.2 glaube ich, aber das ist ja letztlich egal.

Hallo Thomas,

mit .mod_navigation .level_1 > li.triangle span:after
spricht du alle Selektoren(Nachfahrenselektoren) unterhalb von .level_1 an.

Du willst aber .level_2 nicht ansprechen.
Unterhalb von .level_1 li.submenu musst du die Ansprache anpassen.
Unterhalb von .level_1 li.submenu gibt es ( <strong> oder <a> ) und <ul class="level_2">.

Mit

.mod_navigation .level_1 li.submenu > strong.triangle span::after,
.mod_navigation .level_1 li.submenu > a.triangle span::after {}

sprichst du den Bereich an den du willst.
Mit Hilfe des Kindseletors ">" sprichtst du nur die Kinder <strong> und <a> von <li class="submenu"> an.
<strong> und <a> unterhalb von level_2 werden damit nicht angesprochen.

Ich hoffe es hilft dir.

Hans-Jürgen

Vielen Dank für die Hilfestellung, die Darstellung der Pfeile funktioniert jetzt einwandfrei.

Nachdem ich die Navigation der 1. und 2. Ebene so gut wie fertiggestellt habe, sind mir noch 2 seltsame Verhalten bei den Tests aufgefallen, bei denen ich bislang noch nicht herausgefunden habe ob dies Fehler von mir sind, oder Eigenarten der Contao Navigation sind die mit geeignetem Code behoben werden können.

1.) Bei Menüpunkten mit nicht mehr als 2 Unterpunkten passt alles, auch der Border wird an allen 4 Seiten richtig dargestellt.
2.) Bei Menüpunkten mit mehr als 2 Unterpunkten wird der 1. und letzte Punkt richtig dargestellt und bei allen Punkten dazwischen fehlen die Border auf der rechten und linken Seite. Zu sehen bei meiner Navigation unter dem Menüpunkt "Aktuell".
3.) Bei Menüpunkten mit noch mehr Unterpunkten wird der 1. und letzte Punkt auch wieder richtig dargestellt und vom 2. bis 6. Punkt fehlen ebenfalls die Border auf der rechten und linken Seite. Ab dem 7. bis vorletzten Punkt werden die Border auf der rechten und linken Seite in der Farbe der Schrift vom Text der Menüpunkte dargestellt. Zu sehen bei meiner Navigation unter dem Menüpunkt "Verein".

Die Navigation ist unter https://sub.musikverein-hirschzell.de/ zu sehen. Die 3. Ebene ist derzeit noch ausgeblendet, da sie derzeit noch keine Styles erhalten hat.

Trotz Recherchen habe ich zu diesen Problemen bislang nichts passendes finden können. Gibt es hierfür eine Möglichkeit um dies zu lösen?
Danke!


Gruß
Thomas

Wenn Du Deine Seite auf https weiterleiten lässt, solltest Du auch ein gültiges Zertifikat für die Subdomain hinterlegen.
Ich habe ehrlich keine Lust eine Ausnahme zuzulassen nur um Dir zu helfen. Also entweder keine Weiterleitung auf https oder Zertifikat auch für die Subdomain.