Contao-Camp 2024
Ergebnis 1 bis 9 von 9

Thema: Umbau der Navigation von vertikal auf horizontal

  1. #1
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard 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
    Geändert von Thomasge (05.05.2021 um 18:00 Uhr)

  2. #2
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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

  3. #3
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

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

    Gruß
    Thomas

  4. #4
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    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

  5. #5
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    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
    Geändert von Thomasge (06.05.2021 um 21:30 Uhr)

  6. #6
    Wandelndes Contao-Lexikon Avatar von tab
    Registriert seit
    22.10.2013.
    Beiträge
    10.060
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.

  7. #7
    Contao-Nutzer Avatar von hjo
    Registriert seit
    08.01.2013.
    Ort
    Wuppertal
    Beiträge
    118

    Standard

    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

  8. #8
    Contao-Fan
    Registriert seit
    31.01.2016.
    Ort
    Kaufbeuren
    Beiträge
    473

    Standard

    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

  9. #9
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.715
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •