Verwendung: Secondary Navigation / Sprungnavigation: Aktiver Link für Seiten-URLs

D. Truninger's Avatar

D. Truninger

12 Nov, 2018 11:13 AM

Produkt: Oneo Contao
Contao-Version: 4.4.24

Grüezi, wir möchten die Sprungnavigation auch für Seitenlinks (interne) einsetzen, damit das visuelle Konzept identisch ist. Die Auszeichnungsklasse active wird hingegen nicht gesetzt, da vermutlich ja nicht 1:1 so angedacht. Was muss ich ergänzen, damit der aktive Status auch nachgeführt wird?

Danke für Ihre Hilfe

  1. Support Staff 1 Posted by RockSolid Theme... on 13 Nov, 2018 11:27 AM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Bearbeiten Sie dafür bitte die Datei files/oneo/js/script.js und passen Sie den JavaScript-Code im Bereich // Anchor navigation active status an Ihre Wünsche an.

    Am Ende des Code-Blocks können Sie z. B. die Klasse der gewünschten Navigation erweitern in folgender Zeile:

    })(document.querySelectorAll && document.querySelectorAll('.ce_rsce_oneo_anchor_nav, .ce_rsce_oneo_area_nav'));
    
  2. 2 Posted by D. Truninger on 13 Nov, 2018 12:22 PM

    D. Truninger's Avatar

    Danke für den Hinweis!

    Wenn ich konkret die Klasse .active haben möchte für li (ce_rsce_oneo_anchor_nav … li.active), ähnlich wie sonst bei der Sprungnavigation, was muss ich dann genau ergänzen?

  3. Support Staff 3 Posted by RockSolid Theme... on 14 Nov, 2018 11:02 AM

    RockSolid Themes's Avatar

    .ce_rsce_oneo_anchor_nav … li.active wird bereits standardmäßig unterstützt von dem Skript, dafür sind keine Anpassungen nötig.

    Wie genau sieht der Aufbau Ihrer Website aus?
    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  4. 4 Posted by D. Truninger on 14 Nov, 2018 12:06 PM

    D. Truninger's Avatar

    Diese li.active scheint nicht gesetzt zu werden, trotzdem ich ein «normales» Full-Width (Anchor Navigation) verwende mit der jeweiligen Secondary Navigation, hier mit Link-URLs direkt auf den Seitenbaum.

    Hier sollte die Navigation das .active nachführen und auszeichnen:
    https://2018.asz-duebendorf.ch/mahlzeitendienst-faq

  5. Support Staff 5 Posted by RockSolid Theme... on 14 Nov, 2018 03:20 PM

    RockSolid Themes's Avatar

    Wir haben Ihre erste Frage vermutlich missverstanden. Sie möchten den Aktivstatus der Navigation nicht durch scrollen verändern, sondern auf der jeweiligen Seite den Aktivstatus für die komplette Seite setzen?

    Das können Sie mit folgendem JavaScript-Code erreichen:

    var link = document.querySelector('.ce_rsce_oneo_anchor_nav a[href="'+document.location.pathname.substr(1)+'"]');
    if (link) {
        link.className += ' active';
    }
    
  6. 6 Posted by D. Truninger on 14 Nov, 2018 03:59 PM

    D. Truninger's Avatar

    Dankeschön, ja so habe ich das gemeint.
    Wo füge ich genau ein? Bisher funktioniert es noch nicht nicht …

  7. Support Staff 7 Posted by RockSolid Theme... on 15 Nov, 2018 06:16 AM

    RockSolid Themes's Avatar

    Sie können den Code-Block am Ende der Datei files/oneo/js/script.js hinzufügen.

  8. 8 Posted by D. Truninger on 15 Nov, 2018 09:46 AM

    D. Truninger's Avatar

    Hervorragend, das klappt! Vielen Dank.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac