Verwendung: Mobile Navigation bei Desktop

michael.wiegaertner's Avatar

michael.wiegaertner

15 Apr, 2019 07:00 AM

Produkt: Oneo Contao
Contao-Version: 4xx
Browser und Browserversionen: alle

Hallo, ich würde gerne das mobile menu bereits bei Desktopgröße verwenden. Viele Websites schalten auf mobile um, sobald man die Seite ein wenig nach oben scrollt. Ist das auch mit Oneo möglich? Vielen Dank!

  1. Support Staff 1 Posted by RockSolid Theme... on 15 Apr, 2019 01:36 PM

    RockSolid Themes's Avatar

    Vielen Dank für Ihre Frage.

    Wie Sie die mobile Navigation auch für andere Bildschirmgrößen aktivieren können ist in folgendem Beitrag beschrieben: http://help.rocksolidthemes.com/discussions/contao/11684

    Viele Websites schalten auf mobile um, sobald man die Seite ein wenig nach oben scrollt.

    Dass die komplette Darstellung der Seite wechselt sobald man nach oben scrollt ist und so von keiner Website bekannt. Können Sie und dafür ein Beispiel senden?

  2. 2 Posted by michael.wiegaer... on 15 Apr, 2019 01:46 PM

    michael.wiegaertner's Avatar

    Sorry,

    ich meinte natürlich das Umschalten auf Mobile Navigation.

    Mit freundlichen Grüßen
     Michael Wiegaertner

  3. 3 Posted by michael.wiegaer... on 15 Apr, 2019 01:52 PM

    michael.wiegaertner's Avatar

    Hallo,

    vielen Dank für die Antwort! Ich habe das leider falsch ausgedrückt. Natürlich will ich nur die Mobile Navigation in allen Seiten haben. Aber wie funktioniert das mit dem nach oben wegscrollen? Kann ich das nur über jquery realisieren? Siehe www.spiegel.de (ein einfaches Beispiel)

    Ich würde das natürlich über die gesamte Breite machen!

    Mit freundlichen Grüßen
     Michael Wiegaertner

  4. Support Staff 4 Posted by RockSolid Theme... on 15 Apr, 2019 03:11 PM

    RockSolid Themes's Avatar

    Wenn wir Sie richtig verstehen, möchten Sie die mobile Navigation erst ab einer bestimmten Scrollposition einblenden lassen?

    Falls ja, können Sie das z. B. mit folgendem JavaScript-Code realisieren:

    jQuery(window).on('scroll resize domready load', function() {
        jQuery('.main-navigation-mobile-open').css('display', jQuery(window).scrollTop() > 500 ? '' : 'none');
    });
    

    Ersetzen Sie dabei 500 mit der gewünschten Scrollposition.

  5. 5 Posted by michael.wiegaer... on 04 Jun, 2019 11:26 AM

    michael.wiegaertner's Avatar

    Hallo,

    danke noch mal für die Hilfe. Leider kann ich das Script nicht zum laufen bringen. Meine Vorgehensweise:

    1. Ich habe das JS in eine Datei mit Namen "swapnav.js" kopiert.
    2. Dann habe ich den Wert 500 auf 10 geändert.
    3. Danach habe ich die Datei unter "/files/vsteiner/js/" abgelegt.
    4. Dann habe ich im Seitenlayout im Bereich Eigener JavaScript-Codefolgende Zeile eingefügt (Kopie der darüber liegenden Zeile)
    "<script src="{{env::files_url}}files/vsteiner/js/swapnav.js"></script>"

    Das Script wird geladen, kann im Inspector nachvollzogen werden. Der Inspector zeigt keine Fehler an. Leider hat das Script auch keine Auwirkung.

    Was mach ich falsch??

    Mit freundlichen Grüßen
    Michael Wiegaertner

  6. Support Staff 6 Posted by RockSolid Theme... on 04 Jun, 2019 01:04 PM

    RockSolid Themes's Avatar

    Zusätzlich zu dem JavaScript wird auch der CSS-Code aus dem oben verlinkten Ticket benötigt damit die mobile Navigation angezeigt wird:

    .main-navigation-mobile-open {
        display: block;
    } 
    .main-navigation-mobile.is-enabled {
        display: block;
    }
    

    Damit wir Ihnen zielgerichteter weiterhelfen können, schicken Sie uns bitte einen Link zur betroffenen Seite.

  7. 7 Posted by michael.wiegaer... on 04 Jun, 2019 01:42 PM

    michael.wiegaertner's Avatar

    Sorry, habe ich vergessen: [Link entfernt]

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