Navigationsmodul im HTML per Media-Querie austauschen?

[Schnippel]

Hi Leute,

auf meiner Contao 4 Site habe ich 2 Navigations-Module eingebunden:

- Navigationsmenü für die horizontale Navigation
- eine individuelle Navigation für Meta-Daten.

Nun möchte ich, daß bei SMALL-Ansichten, z.B. auf einem Smartphone,
diese beiden Naviationen zusammen angezeigt werden.

Hier ein Beispiel:
Unbenannt-16.jpg

Demo-Seite: https://kulturbanause.de/

Wie lässt sich sowas realisieren?




Meine Gedanken wären folgende:

- eine weitere Navigation anlegen, die alle Seiten der beiden Navigationsmodule beinhaltet (also die der horizontalen und Meta-Navigation)
- per CSS und Media-Queries bei der SMALL-Ansicht diese anzeigen lassen, und bei der LARGE-Ansicht ausblenden
- per CSS und Media-Queries die beiden oberen Navigationen bei SMALL ausblenden und bei LARGE einblenden

Problem dabei ist: im HTML sind 3 Navigations-Module.

Gibt es eine Möglichkeit, per Media-Queries im HTML dies zu steuern, sodaß bei SMALL-Ansicht andere Navigations-Module angezeigt werden als bei LARGE-Ansicht?

[folkfreund]

Hallo Schnippel,

bei kulturbanause ist das Menü links (Web-Design etc.) die erste Unterebene zum Punkt 'Agentur'. Es handelt sich da also in der Desktopansicht nur um ein Menü.

Außerdem scheint es mir, als wenn du dir für die SMALL-Ansicht ein Mobil-Menü wünschen würdest (Hamburger, wie bei kulturbanause). Dafür kenne ich auch nur die Lösung mit zwei getrennten Navigationen.

Gruß, folkfreund

[Schnippel]

Interessant, aber macht das Sinn die eigentlichen Punkte der Hauptnavigation in eine Unterebene zu stecken? Ich denke da an SEO...

Eine Möglichkeit, Navigationsmodule im HTML per Media-Queries auszutauschen, gibt es sowas?
Ich würde da lieber ein Modul extra für die SMALL-Ansicht einbinden, bei der die Haupt- und Meta-Navigation zusammengelegt sind.

[tab]

Media Queries können lediglich bewirken, dass das entsprechende CSS berücksichtigt wird beim Rendern oder eben nicht. Sie ändern nicht den HTML-Quellcode.