Responsive Navigation und Sub Navigation?

**xkoy** · 16.02.2013, 14:43

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

**ciaobello** · 17.02.2013, 01:00

Zitat von xkoy

Doch wie setze ich eine Sub-Navi ein? Dropdown? Oder im Layout #left oder#right?

Ich kann Dir da nur vorschlagen mal eine Demo an zugucken wo Du auch runter laden und im BE angucken kannst.

Meiner Ansicht nach (als Android User) ist ein separates Menu zwingend. Es ist eine zu grosse Fummelei mit Desktop Drop-Down menus auf Mobilen Geräten ... speziell wenn es kleinere Geräte sind (und man eh schon eine Lesebrille braucht

)

Hier ein Beispiel wie es vernünftig gelöst wurde.

**Seitenmaler** · 17.02.2013, 07:17

Hallo,

ich habe gerade meine erste Mobil-Variante einer bestehenden Seite erstellt.
Nach vielem hin und her, probieren und verwerfen habe ich mich für eine Navigation am Ende der Seite entschieden, mit einem Verweis vom Header. Ein Toogle-Menü war mir zu aufwendig und ein Select-Menü ist wirklich nicht so toll. Navigationen der Desktop-Version habe ich zusammen gefasst.
Vielleicht ist die Variante etwas für Dich.

Die Seite ist noch in Arbeit.
Vorläufige Domain: http://web137.sv4.inetrobots.com/
Am Ende der Seite ist der Toggle-View-Link.
Mobil-Ansicht ist erst ab < 767px. Das Iphone zeigt noch eine modifizierte Desktop-Ansicht.
Ein gutes Tool zum testen, falls Du es nicht schon nutzt.
http://responsivepx.com/

Gruß
Michael

**ciaobello** · 17.02.2013, 12:41

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):

Skandeborg (1).jpg

Skandeborg (2).jpg

**Seitenmaler** · 17.02.2013, 16:38

Hallo Ciaobello,

Steinmaler ist auch schön. Ich sollte mal schauen, ob die Domain noch zu haben ist

Deine Anmerkung werde ich berücksichtigen. Die Schriftfarbe ist ja schon durch den Kontrast grenzwertig, dann sollte die Schriftgröße wenigstens passen. Den Link des Navigationsbalken nur auf die Schrift zu setzen ist natürlich blöd. Das sind die Feinheiten.
Vielen Dank für das Testen und die Rückmeldung.

Gruß
Michael

**xkoy** · 18.02.2013, 08:56

Hi,

also ne Lösung ist das für mich nicht :/
Ganz unten ist immer das Menu, da swiped man ja ewig.

Sowas dachte ich:

http://webdesign.tutsplus.com/tutori...el-navigation/

Werd das als 2. Menu anlegen, und eben display:none, je nach größe reinballern. Mal schaun.

**xkoy** · 18.02.2013, 18:21

So muss das: demo.pixelgenau.at

**Madob** · 12.05.2013, 18:10

Hallo,

ich bin auch auf der Suche nach einer mobilen Navigation, etwa wie auf dieser Seite hier.

weiss jemand, ob das rein per CSS zu bewerkstelligen ist, oder ob ich da auch ins Template eingreifen muss?

Über Hilfe wäre ich sehr dankbar

**Seitenmaler** · 14.05.2013, 18:12

Hallo,

ist, wenn ich nicht etwas übersehen habe, ähnlich wie das Beispiel aus Zillgens Buch Responsive Webdesign.
Funktioniert mit der Pseudoklasse target.

http://media.kulturbanause.de/blog/2...rget-demo.html
http://responsive-webdesign-buch.de
http://codepen.io/chriscoyier/pen/umEgv

Ich habe eine Umsetzung in Contao noch nicht hinbekommen, aber vielleicht inspiriert es Dich.

**Lego2013** · 14.05.2013, 18:46

weiss jemand, ob das rein per CSS zu bewerkstelligen ist, oder ob ich da auch ins Template eingreifen muss?

Das kannst Du auf jeden Fall mit CSS erreichen. An den entsprechenden Breakpoints wird aus dem normalen Menü eben das Dropdown Menü aus Deinem Beispiel. Schau mal in Peter Müller's Buch "Webseiten erstellen mit Contao 3", da wird das gut beschrieben.

Ausserdem kannst Du mit Contao 3 ein spezielles CSS für "Mobile" über den Server mit angepasstem HTML ausliefern (Stichwort RESS). Da bleiben keine Wünsche mehr offen.

**pmmueller** · 15.05.2013, 07:16

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).

**Seitenmaler** · 15.05.2013, 08:31

Damit man das Menü und die Buttons vernünftig gestalten kann, werden die beiden IDs zum Schließen und Öffnen an body und header vergeben. Es hat eine Weile gedauert, bis ich das begriffen hatte, aber die IDs, die an die URL gehängt werden, müssen überhaupt nichts mit der Navigation zu tun haben.

An den IDs bin ich letztendlich gescheitert bzw. habe ich entnervt aufgegeben. Vielleicht lag es daran. Vielen Dank für den Link und die Ausführungen.

**pmmueller** · 15.05.2013, 12:48

Die IDs dienen ja nur als Trigger für die Pseudoklasse :target. Sie könnten auch dichter an der Navigation sitzen, aber zum Gestalten ist es einfacher, wenn sie Vorfahrenelementen wie #wrapper oder body zugewiesen werden.

**illplanet** · 25.06.2013, 16:57

Zitat von pmmueller

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.

Finde diese Lösung echt sehr elegant, Peter. Versuche gerade, deine Navigation aus dem Beispiel in Contao umzusetzen. Dabei habe ich leider das Problem, dass ich in der mobilen Ansicht im Menü immer die Startseite als aktiv angezeigt bekomme. Zwar kann ich eine andere Seite anwählen, dass Menü fährt dann wieder zusammen und ich lande auch auf der richtigen Seite, aber sobald ich wieder den Menübutton drücke bin ich auf der Startseite. Das Menü merkt sich quasi nicht die aktive Seite von der aus es aufgerufen wird. Hast du eine Idee, woran es liegen könnte? In deinem Beispiel läuft es ja wie geschmiert.

**pmmueller** · 25.06.2013, 17:04

Zitat von illplanet

... sobald ich wieder den Menübutton drücke bin ich auf der Startseite. Das Menü merkt sich quasi nicht die aktive Seite von der aus es aufgerufen wird.

1. Springt Contao zur Startseite, sobald du den Menübutton drückst?
Keine Ahnung. Welches Gerät, OS und Browser?

2. Oder zeigt Contao im ausgeklappten Menü die Startseite als aktive Seite an, auch wenn du woanders bist?
Dann stimmt dein CSS nicht. Achte auf die Klasse .active, die Contao vergibt. Das ist nicht dasselbe wie die Pseudoklasse :active. Beliebter Fehler.

**illplanet** · 25.06.2013, 17:22

Zitat von pmmueller

1. Springt Contao zur Startseite, sobald du den Menübutton drückst?
Keine Ahnung. Welches Gerät, OS und Browser?

Genau, sobald ich den Menübutton drücke geht das Menü auf, und ich lande auf der Startseite. Sowohl im Browser als auch auf Android.

Ich vermute, dass ich

Code:

  #menuopen:target ul#menu{
    max-height: 25em;
    transition: 1s;
  }

noch hinsichtlich des aktiven Menüpunktes konkretisieren muss, bekomme es aber gerade nicht hin.
Dachte an

Code:

#menuopen:target ul#menu li.active

aber das funktioniert leider nicht.

**pmmueller** · 25.06.2013, 17:46

Woher hast du denn #menuopen? Bei Contao hat body doch die ID top.

**Seitenmaler** · 25.06.2013, 17:57

Der Anker muss mit {{env::request}} versehen werden.

<div class="menubutton">
<a href="{{env::request}}#menuopen" class="showmenu">Menü</a>
<a href="{{env::request}}#menuclosed" class="hidemenu">Menü</a></div>

Ich habe die ID des body auch geändert, da es sonst nicht funktionierte. Bisher habe ich noch keine Ausfälle finden können bzw. das, worauf sich die ID "top" bezog. Die Top-Links funktionieren trotzdem. Das war die einzige Idee die ich dazu hatte.
Die Navigation läuft bis jetzt auf allen Geräten die ich testen konnte.

**illplanet** · 25.06.2013, 18:17

Zitat von Seitenmaler

Der Anker muss mit {{env::request}} versehen werden.

Ah, nice, da kommen wir der Sache ja schon näher. Jetzt habe ich nur das Problem, dass ich bei mehreren Unterebenen, sprich Seite 1, Seite 1.1, Seite 1.2... alle markiert bekomme und nicht nur die Seite, auf der ich tatsächlich bin.

Bzgl. der ID im Body: die hatte ich im fe_page template umbenannt.

**pmmueller** · 25.06.2013, 18:28

Du kannst sogar eine ID weglassen:

Das mit der Markierung von mehreren Ebenen ist denke ich nur ein CSS-Problem. Das kriegst du hin

**illplanet** · 25.06.2013, 18:52

Ja, war ein CSS-Problem.

Super Sache!

**kischd** · 19.02.2014, 11:28

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?

**kischd** · 19.02.2014, 12:04

bzw. wo habt ihr das

eingefügt?

**Seitenmaler** · 21.02.2014, 18:41

Hallo,

ich erstelle immer ein neues Modul (Eigener HTML-Code) mit den Inhalten
<div class="menubutton">
<a href="{{env::request}}#menu" class="showmenu">Menü</a>
<a href="{{env::request}}" class="hidemenu">Menü</a>
</div>
und füge es dann als Oberstes in der Kopfzeile ein.

**Acta** · 03.03.2014, 12:54

Leider ist die Anleitung von PMüller nicht mehr zu sehen.

Hat jemand noch ne gute Main Navigation Responsive anleitung?

Die Umsetzung wie Sie auf Contao.org oder bei Peter Müllers seite ist, finde ich sehr gut!

**Acta** · 03.03.2014, 13:04

Mein Ansatz wäre jetzt... auf die Schnelle:

Modul Quicknavigation -> Oder irgendwas eigenes und das anzeigen ab - ne bestimmten pixel zahl.

**xkoy** · 03.03.2014, 13:10

Ich setze gerade wieder eine Resp Website um. Habe zum 3. mal eine off canvas Navi eingebaut:

http://www.posthotel-zillertal.at

Script heisst "sidebars", einfach Googeln. Gibt ja genug Resp Navis. Hier hab ich auch noch ein anderes Script benutzt: http://www.unterkunft-zillertal.at

Und hier noch ein Navi die mit "height" arbeitet:

http://responsive-nav.com

**pmmueller** · 03.03.2014, 13:51

Zitat von Acta

Leider ist die Anleitung von PMüller nicht mehr zu sehen.

Unter dem Link oben war nur ein Beispiel zu sehen. Das kannst du jetzt auf pmueller.de sehen, wenn du das Browserfenster verkleinerst. Übrigens gibt es für die mobile Version noch eine andere Navigation (mit einem select-Menü).

Eine Anleitung dazu findest du in Kapitel 11 von Flexible Boxes (oder im gleichnamigen Videotraining).

**Bas** · 03.03.2014, 14:41

Weil's zum Grundthema passt ... Links für die etwas anspruchsvolleren

http://tympanus.net/codrops/2013/04/...ti-level-menu/
http://tympanus.net/codrops/2013/08/...vel-push-menu/

**Acta** · 03.03.2014, 14:44

Hallo peter

ich hab es mir jetzt schnell einfach gemacht und das ganze mit Quicknavigation gelöst!..

Den rest muss ich mir mal anschauen wenn ich wieder etwas mehr zeit habe!