Designkontrolle: Mobile-Menüs beim Entwickeln offen halten

Beim Entwickeln einer Website kann es frustrierend sein, wenn sich das Mobile-Menü ständig schliesst, egal was man in der Konsole anklickt. Mit diesem JavaScript-Snippet bleibt das Menü immer geöffnet, damit du das Design und Verhalten deiner Navigation kontrollieren kannst!

Während der Entwicklungsphase einer Website ist es oft hilfreich, das mobile Menü immer geöffnet zu halten, um das Design und Verhalten besser kontrollieren zu können. In WordPress schliesst das Menü standardmässig, selbst wenn man in der Browserkonsole ein Element anklickt.

Um dieses Verhalten zu umgehen und das mobile Menü immer geöffnet zu halten, verwenden wir JavaScript. Im Folgenden finden Sie den Code, der dazu verwendet wird:

var bodyElement = $("body");
var htmlElement = $("html");

function addClassesIfMissing() {
    var responsiveContainer = $(".wp-block-navigation__responsive-container");
    if (responsiveContainer.length > 0) {
        responsiveContainer.addClass("has-modal-open is-menu-open");
        bodyElement.addClass("has-modal-open is-menu-open"); // Verwendung der gespeicherten Referenzen
        htmlElement.addClass("has-modal-open"); // Verwendung der gespeicherten Referenzen
    }
}

function startMutationObserver() {
    var targetNode = document.body;
    var config = { childList: true, subtree: true };
    var observer = new MutationObserver(function(mutationsList) {
        for (var mutation of mutationsList) {
            if (mutation.type === 'childList') {
                addClassesIfMissing();
                break; // Hinzugefügt, um den Observer nach der ersten Mutation zu stoppen
            }
        }
    });
    observer.observe(targetNode, config);
    addClassesIfMissing();
}

// Observer beim Laden des Dokuments starten
startMutationObserver();

Der oben gezeigte Code verwendet JavaScript, um das mobile Menü während der Entwicklung immer geöffnet zu halten. Er überwacht den DOM auf Änderungen und fügt die erforderlichen Klassen hinzu, um das Menü geöffnet zu halten.