Contao-Camp 2024
Ergebnis 1 bis 3 von 3

Thema: Frage zur "korrekten" Ausführung einer Responsive-Navigation

  1. #1
    Contao-Nutzer
    Registriert seit
    15.12.2012.
    Beiträge
    121

    Standard Frage zur "korrekten" Ausführung einer Responsive-Navigation

    Hallo zusammen,

    gerade bin ich ein wenig unschlüssig, ob denn mein Gedankengang zur Gestaltung einer Responsive-Navigation aus technischer Sicht so "in Ordnung" wäre.

    Angenommen, eine Website besitzt ein klassisches Hauptmenü. Diesem Hauptmenü würde ich nun bei den Contao Frontend-Modul-Einstellungen zwei CSS-Klassen zuweisen:

    • .navigation--viewport--default
    • .navigation--viewport--mobile


    Mein Gedanke zur CSS-Funktionalität wäre nun wie folgt:

    • Wenn Viewport >= x, dann nutze ".navigation--viewport--default"
    • Wenn Viewport < x, dann nutze ".navigation--viewport--mobile"


    Im CSS würde ich das so gestalten:

    Code:
    @media all and (min-width: 1024px) {
    
      .navigation--viewport--default {CSS:blablabla;}
      .navigation--viewport--mobile {display:none; max-height: 0; visibility:hidden;}
    }
    
    @media all and (max-width: 1023px) {
    
      .navigation--viewport--mobile {CSS:blablabla;}
      .navigation--viewport--default {display:none; max-height: 0; visibility:hidden;}
    }
    Wäre das ein adäquates Vorgehen bzw. vielleicht sogar die Standard-Ausführung, oder doch völliger Quatsch?
    Geändert von KloBoBBerLe (07.05.2021 um 19:39 Uhr)

  2. #2
    Community-Moderatorin & Contao-Urgestein Avatar von mlweb
    Registriert seit
    10.07.2011.
    Beiträge
    6.705
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Ich versuche nach Möglichkeit mit einer Navigation auszukommen.
    Ein und Ausblenden bei kleinen Viewports über Checkbox (nur CSS) oder mit ein wenig Javascript. Kommt auch etwas drauf an wieviel Navigationsebenen zu erwarten sind. Dazu passe ich das Navigationstemplate entsprechend an.
    Es gibt auch ein paar Erweiterungen (z.B. dk-mmenu oder codefog mobile_menu), die ich aber höchstens nutze wenn ein fertiges Theme diese mitbringt.
    Ich habe Dir mit meinen Hinweisen geholfen und Du möchtest Dich bedanken?
    Unterstütze bitte das Contao-Projekt (Button Links)
    Weitere Spendenmöglichkeiten
    ------------------------------------------------------------------------------------------------------
    Contao-Dokumentation: Contao-Handbuch und Contao-Entwickler-Doku
    Contao-Online-Video-Kurse: Contao Academy
    Funktionalität erweitern: Contao-Erweiterungen

    Für Dinge die man mit html5 und css3 lösen kann, braucht man kein javascript.




  3. #3
    Contao-Nutzer
    Registriert seit
    15.12.2012.
    Beiträge
    121

    Standard

    Alles klar, vielen Dank für Deine nette Rückmeldung!

    Folgender Sachverhalt stellt sich:

    • Bei "Desktop-Ansicht" soll das horizontal angeordnete Hauptmenü bis in die 2. Ebene als klassisches Dropdown-Menü arbeiten (siehe Abbildung 1).
    • Bei "Mobil-Ansicht" soll das Hauptmenü zunächst über das berühmte Hamburger-Menü geöffnet werden. Die Menüpunkte der zweiten Menüebene sollen in diesem Falle jedoch nicht mehr im/am Hauptmenü selbst, sondern in horizontaler Anordnung ein Stück weit darunter dargestellt werden (siehe Abbildung 2).


    screenshot1.png
    Abbildung 1: Klassisches Dropdown-Menü für die Menüebenen 1 und 2 bei der Desktop-Ansicht.

    screenshot2.png
    Abbildung 2: Klassisches Hamburger-Menü für die erste Menüebene bei der mobilen Ansicht, während Ebene 2 ein Stück darunter dargestellt werden soll.

    Die folgenden Fragen tun sich nun auf:

    1. Bislang habe ich noch keine Möglichkeit gefunden, die zweite Menüebene in der mobilen Ansicht ausschließlich per CSS so zu konfigurieren, dass sie auch tatsächlich mit einem gewissen Abstand zum Hauptmenü platziert werden kann. Aus diesem Grunde habe ich notdürftig ein zweites Menü in den Frontend-Modulen erstellt, welches nun lediglich für die zweite Menüebene bei der mobilen Ausgabe zum Einsatz kommt. Frage: Ist diese Lösung denn "Pfusch"?
    2. Das Dropdown-Menü bei Desktop-Ansicht wird durch Hovern ausgefahren. Eine solche Lösung würde ja bei mobiler Tablet/Smartphone-Nutzung nicht funktionieren, da hier keine Hover-Funktionalität existiert, oder? Wie könnte ich ein Smartphone-taugliches Dropdown-Menü erstellen? Der Aufwand über einen Checkbutton für jeden einzelnen Menüpunkt der Hauptnavigation wäre wohl maßlos übertrieben.


    Besten Dank für die Hilfe!

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •