Responsive Navigation und Sub Navigation?
Servus,
da ich jetzt auch mal was responsive umsetzen möchte, weiss ich nicht recht wie ich mit der Navi anfangen soll. Hauptnavi ist klar. Doch wie setze ich eine Sub-Navi ein? Dropdown? Oder im Layout #left oder#right?
Was ist einfacher? Dropdown wirds nichts geben was responsive ist oder?
Dropdown Variante: 1 Seitenlayout mit Dropdownmenu (irgend eine Erweiterung Contao 3?!), und 2. Layout für Mobile, von Hand css3 Dropdown für mobile Geräte?
Weiss jetzt agr nicht wie ich da rangehen soll.
Dani
Liste der Anhänge anzeigen (Anzahl: 2)
Mobile Navigation
Hallo Seitenmaler Steinmaler,
Das menü ist vom bedienen her ok.
Für mich als Lesebrille träger aber zu kleine Schrift. Speziell zum anklicken dürfte es ein bisschen einen höheren Bereich haben. Das Menü ist genügend Gross, der Bereich zum anklicken sollte einfach noch ein wenig höher sein und die Schrift verträgt auch noch ein paar pixel mehr. Der Schwarze Navigationsbalken-Link sollte nicht nur auf der Schrift klick-bar sein.
Bei der Galery dürfte es auch 2 Bilder nebeneinander anzeigen in der Mobilen Ansicht (Hochformat; ich glaube Du hast da das selbe padding drin wie bei der Desktop version).
Hier mal 2 Printscreens von meinem Samsung Galaxy S2 (4,3 Zoll; bei einer Auflösung von 480 × 800 Pixeln):
Anhang 9989
Anhang 9990
Layout Builder, mobile Seitenlayouts und Responsive Grid
Man muss bei Contao 3 erst einmal begreifen, wie die verschiedenen Möglichkeiten ineinander greifen:
1. Layout-Builder mit Holy Grail
Trigger für die verschiedenen CSS-Layouts ist eine Media Query bei 768px.
2. Mobile Seitenlayouts (optional)
sind völlig unabhängig von der Bildschirmgröße. Trigger ist UA-Sniffing auf Grundlage der Liste in system/config/agents.php. Geht weiter als reines responsive Webdesign (=> einfache Form von RESS).
3. Responsive Grid (optional)
hat drei Stufen, die durch zwei Media Queries (980px und 768px) getriggert werden.
Fazit 1
Man kann also nur mit dem Layout-Builder und CSS ein responsive Webdesign umsetzen, hat dann aber dasselbe HTML in allen Version.
Beispiel ist die Navigation auf http://pmueller.de/testdrive/cssnav-target/, die immer auf demselben HTML basiert. Die Navigation selbst ein Mix aus diversen :target-Navigationstechniken von Aaron Gustafson, Christoph Zillgen, Brad Frost und Tim Kadlec ist.
Fazit 2
Das mobile Seitenlayout wird nur dann benötigt, wenn man für mobile Geräte ein anderes HTML ausliefern möchte, z. B. ein Frontend-Modul mit einer Select-Liste als Menü.
Beispiel ist http://pmueller.de. Dort ist beim Verkleinern des Browser-Viewport ein anderes Menü eingebaut (das unter iOS nicht funktioniert), aber per mobilem Seitenlayout wird an mobile Geräte ein anderes Frontend-Modul geliefert. Die mobile Navigation bekommt man aber nicht durch Verkleinern des Viewport zu sehen, sondern nur in der mobilen Version (Button zum Umschalten im Footer).
Liste der Anhänge anzeigen (Anzahl: 1)
Versuche mich auch gerade an einer responsive Navigation.
Leider verstehe ich nicht, wie in diesem Beispiel diese Klasse "mobile_handle" herkommt wenn ich das Browserfenster zuziehe?
Wie bekomme ich diese Klasse her?