Meteor Mega Menü

[Stephan161083]

Hallo zusammen,
wir sind daran interessiert unser mobiles Menü umzustellen.
Aktuell erscheint erst der Button "Kategorien" und erst nach anschließendem Klick öffnen sich erst die Unterkategorien. Unser Ziel ist, dass der Kategorien Button bereits geöffnet ist. Wie komme ich an den mobile Code, um es umzustellen?

[Gabe]

Hey @Stephan161083 

Ihr wollt also das Top-Level-Menü (Anchor Link) auf Mobile standardmäßig erweitert haben, sprich, die Child Menu Items standardmäßig offen anstatt zusammengeklappt. Wenn ja, dann muss das im JavaScript und Liquid für die mobile Navigation gecodet werden. Abgesehen davon ist es aus Sicht der UX Design Beste Praktiken nicht zu empfehlen, da das Hamburger Menu dann by default auf dem Handy immer aufgeklappt ist, was für manche User als störend empfunden werden kann.

Was sagen denn die Meteor Entwickler zum Sachverhalt? Hast du mit denen schon sprechen können? Siehe deren Doku dazu hier.

Apropos du kannst auch eine "#" zum Top Level Menüpunkt hinzufügen:

Es DIY lösen mit der Doku von Meteor

Die Doku der App bin ich jetzt für dich durchgegangen und du kannst auch das data-active Attribut des div-Elements, das die Unterkategorien enthält, von false auf true. Dadurch wird das Untermenü standardmäßig geöffnet.

<div data-active="true" data-layout="stacked" class="Meteor-MobileMenu">

Finde das li-Element, das den Hauptmenüpunkt (Kategorien) enthält, und ändere das data-active Attribut:

<li>
    <div class="Meteor-MobileNavigation__Link">
        <a href="/" class="Meteor-Navigation__Link__mobile">
            <svg width="8" height="8" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="Meteor-Caret" style="transform: translate(-3px, -3px);">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.59961 10.5L9.09961 7L5.59961 3.5V10.5Z" fill="#5C5F62"></path>
            </svg>
            KATEGORIEN
        </a>
    </div>
    <div data-active="true" data-layout="stacked" class="Meteor-MobileMenu">
        <!-- Unterkategorien -->
    </div>
</li>

Sicherstellen, dass das JavaScript den geänderten Zustand des data-active Attributs erkennt und die Unterkategorien anzeigt:

document.addEventListener("DOMContentLoaded", function() {
    var menuElements = document.querySelectorAll('.Meteor-MobileMenu');

    menuElements.forEach(function(menu) {
        if (menu.getAttribute('data-active') === 'true') {
            menu.style.display = 'block';
        }
    });
});

Stelle sicher, dass die CSS-Dateien keine Regeln enthalten, die das display-Attribut der Untermenüs überschreiben.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Stephan161083]

Danke erneut für deine ausführliche Antwort! Ich finde keine Möglichkeit das data-active Attribut zu ändern, da ich nicht auf die Doku komme. Hast du einen Tipp?

[Gabe]

@Stephan161083 

Gern Geschehen! Und was haben die App Entwickler gesagt?

Du kannst selber ein benutzerdefiniertes JavaScript hinzufügen, um das data-active Attribut auf true zu setzen und sicherzustellen, dass die entsprechenden Menüs beim Laden der Seite geöffnet sind. Füge einen JavaScript-Snippet in die theme.liquid ein oder in eine spezielle von dir dafür gemachte JavaScript-Datei wie das folgende Beispiel:

document.addEventListener("DOMContentLoaded", function() {
    var menuElements = document.querySelectorAll('.Meteor-MobileMenu');

    menuElements.forEach(function(menu) {
        // Setze das data-active Attribut auf true
        menu.setAttribute('data-active', 'true');
        // Stelle sicher, dass das Menü angezeigt wird
        menu.style.display = 'block';
    });
});

[Stephan161083]

Egal, wo ich es eintrage, es ändert sich leider nichts. Eine Rückmeldung von den Entwicklern habe ich leider bislang nicht erhalten.