Problem mit dem Menü in den unterschiedlichen Ansichten (Desktop/Smartphone)

Hallo Arne,

zu Deiner ersten Frage. Die beschriebene Verhaltensweise ist völlig normal. Ich habe mir Seiten von großen Unternehmen (Deutsche Bank, BBC, Berliner Philharmoniker), die vermutlich mit den fähigsten Agenturen arbeiten, angesehen, und in allen Fällen verhält es sich auch hier in der Smartphone-Ansicht wie von Dir beschrieben. Ändern lässt sich das meiner Meinung nach nicht.

Meine vielleicht etwas laienhafte technische Erklärung: In der Smartphone-Ansicht gibt es kein „hover“, welches in der Desktop-Ansicht zum Ausklappen des Menüs genutzt wird. In der Smartphone-Ansicht kann daher nur mit „click“ gearbeitet werden. Anders als in der Desktop-Ansicht handelt es sich in der Smartphone-Ansicht wohl um zwei Schaltflächen, den linksseitigen Link zur genannten Seite und dann eben rechtsseitig eine Schaltfläche (Pfeil, Plus o. Ä.) zum Anzeigen des Untermenüs.

Ich habe allerdings auch Seiten gefunden, auf denen über die gesamte Breite das Untermenü ausgeklappt wurde, in diesen Fällen kann aber die linksseitig genannte Seite nicht aufgerufen werden.

Ein gute Lösung hat hier allerdings https://fritz.com/. Hier taucht der Seitenname nochmals im Untermenü an erster Stelle auf, so dass die entsprechende Seite doch aufgerufen werden kann.

Zu Deiner zweiten Frage: Um welches Layout geht es, welche ZP-Version setzt Du ein oder besser noch, wie lautet die URL zu der betroffenen Seite?

Viele Grüße

Tom

Hallo Arne,

richtig, bei der Deutschen Bank spielt es keine Rolle, wo Du in der Horizontalen klickst, um das Untermenü zu öffnen. Der Menütext ist hier dann aber eben reiner Text ohne Link. Wie gesagt, ich glaube nicht, dass sich das so einfach in ZP realisieren lässt.

Vielleicht hat jemand anderes hier noch eine Idee. Dazu müsste aber in jedem Fall bekannt sein, mit welchem Layout Du arbeitest.

Wenn ich Dich richtig verstehe, haben die Seiten im Hauptmenü Unterseiten, die Hauptseiten selber können aber nicht aufgerufen. Wie hast Du denn das erreicht?

Viele Grüße

Tom

Hallo Arne,

welches Layout verwendet deine Seite denn? Ich hatte da mal was mit etwas JavaScript gebastelt, das so allerdings nur im Layout "Flat Responsive" funktioniert. Für ein anderes Layout könnte man das aber natürlich entsprechend anpassen.

Solltest du Flat Responsive verwenden, kannst du im Attribut "mobile_script" mal folgendes einfügen:

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('#nav li.haschilds > a').forEach((el) => {
        el.addEventListener('click', (e) => {
            if (window.innerWidth <= 992){
                e.preventDefault();
                e.stopImmediatePropagation();
                el.parentNode.classList.toggle('open');
            }
        });
    });
});
</script>

Wie man die Attribute aufruft wird hier beschrieben: https://docs.zeta-producer.com/attribute.html#a1089 Ggf. muss "Alle anzeigen" aktiviert werden, um das Attribut sehen zu können.

Hallo Arne,

im obigen Skript hat sich ein Leerzeichen eingeschlichen (danke an KI für den Hinweis), welches das Skript unbrauchbar macht. Mit

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('#nav li.haschilds > a').forEach((el) => {
        el.addEventListener('click', (e) => {
            if (window.innerWidth <= 992) {
                e.preventDefault();
                e.stopImmediatePropagation();
                el.parentNode.classList.toggle('open');
            }
        });
    });
});
</script>

funktioniert es bei mir.

Sofern jetzt noch gewünscht, könntest Du Farbe und Größe des Pfeils (eigentlich sind es zwei Diagonalen, daher auch nicht ganz trivial) mit etwas eigenem CSS unter "Einstellungen > CSS" gestalten:

<style>
#header #nav.on li.haschilds>a:after, #header #nav.on .dropdown-menu li.haschilds>a:after {
color: #F72C08;   /* setzt die Farbe */
font-size: 1.5rem; /* setzt die Schriftgröße */
}  
</style>

Viele Grüße

Tom

Hallo zusammen,

danke Drcymbal für den Hinweis, da hatte sich wohl beim Kopieren ein Fehler eingeschlichen
Dann warten wir mal ab, ob das Skript hoffentlich auch bei arnevolk tut