responsive Navigation

**tilda** · 13.12.2015, 21:50

Guten Abend

ich habe mir für ein Menü für eine mobile Webseite gebastelt, stecke aber irgendwie fest, weil
1. das Menü klickt zu schnell weg.
2. ich es schön fände, wenn die Untermenüpunkte mit einem Pfeil als Hinweis zu sehen wären.
3. frage ich mich, ob es einfacher ist, mit mmenu zu arbeiten.

Fragen über Fragen....

Hat jemand eine Idee?

Beste GRüße
Tilda

**Samuell** · 13.12.2015, 23:54

Hi,
ich hab den Eindruck, dass die Navigation immer noch das drop-down ist, es also eher auf Hover statt auf Klick reagiert.
Wahrscheinlich wär es einfacher für Dich mit dem mmenu zu arbeiten.
Der Pfeil ist nicht weiter schwer. Entweder via Hintergrundgrafik oder oder die Pseudoelemente :before oder :after.

Allerdings solltest Du Dich dringend mehr mit CSS beschäftigen.

**tilda** · 14.12.2015, 10:01

Danke für deine Antwort.
Ich hätte noch eine weitere Frage:
Auf dem IPAD habe ich das Menü nun angepasst. Allerdings klappt es nicht, wenn ich Desktop das Browserfenster kleiner ziehe.
Muss ich da noch etwas Spezielles beachten?

**tab** · 14.12.2015, 10:21

Wie hast du das mobile Layout realisiert? Mit Media Queries oder mit dem mobilen Seitenlayout von Contao? Im letzteren Fall wird natürlich auf Änderungen der Viewportgröße nicht reagiert, sondern ausschliesslich anhand des User Agent.

**tilda** · 14.12.2015, 10:32

mhm - ich habe beides ...

Mediaqueries und das mobile Seitenlayout.
Wenn ich das mobile Seitenlayout ausschalte. Passiert aber auch nichts..?

**Samuell** · 14.12.2015, 11:00

Die oberen Punkte klappen bei mir auf Desktop.
Die unteren werden von dem Div #container, bzw. auch #main überdeckt und klappen deshalb nicht.

**tab** · 14.12.2015, 11:20

Also bei mir wird auf dem Android Phone das Menü-Zeichen angezeigt und wenn ich das anklicke, dann geht auch alles. Auf dem Desktop habe ich aber immer das Dropdown mit Hover-Effekt, auch wenn ich das Fenster klein mache.

**tilda** · 14.12.2015, 11:24

ja und auf dem Desktop hätte ich aber einer bestimmten Größe auch gerne das Menüzeichen, komme aber nicht drauf, wie ich das hinkriegen könnte.

Ich habe es als Trigger in das Seitenlayout für die mobile Seite eingebaut.
Aber was mache ich, wenn ich diesen Trigger ab einer bestimmten Browsergröße einem nicht mobilen Gerät anzeigen möchte?

**tab** · 14.12.2015, 11:54

Ah so, da kommen wir der Sache näher. Wenn du das auf dem Desktop haben willst, dann muss die mobile Navigation und der Link mit dem Menüzeichen von Anfang an (zusätzlich zur "normalen" Navigation) mit eingebunden werden im Desktop-Seitenlayout. Je nach Viewportgröße wird dann mit display:none; bzw display: block; das Erwünschte eingeblendet und das Unerwünschte ausgeblendet.

**tilda** · 15.12.2015, 09:45

Vielen Dank für den Hinweis. Das habe ich nun für die Startseite so gemacht!
Auf dem Handy funktioniert es, aber auf dem Desktop leider nicht.
Vielleicht habe ich etwas Wesentliches noch vergessen?

Muss ich noch den viewport in den head schreiben?

Code:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Das habe ich eben getan - hat aber auch nichts gebracht!

**tilda** · 15.12.2015, 20:51

So jetzt habe ich zwar ein funktionierendes Menü auf dem Handy, aber leider immer noch nicht die gewünschte Ansicht auf dem Desktop.
Mhm...
Und dann fehlt mir auch noch ein Hinweis auf die Untermenüpunkte in Form eines kleinen Pfeiles, falls es Untermenüpunkte gibt.
Derzeit erscheinen alle Menüpunkte mit Pfeil, bis auf den aktiven. Und leider auch die, die kein Untermenü haben.

Code:

#header .mod_navigation li  a:after {
  content: ">";
  width: 10px;
  height: 10px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 130px;
  vertical-align: middle;
}

Könnte mir jemand einen Tipp geben?

**tab** · 15.12.2015, 21:10

Wenn das - wie es aussieht - ein Standard-Navigationsmodul von Contao ist, dann wird jedes li, das ein Submenü enthalt, die Klasse "submenu" haben. Sollte also eigentlich reichen, im CSS zu schreiben:

Code:

#header .mod_navigation li.submenu > a:after {
  content: ">";
  width: 10px;
  height: 10px;
  display: inline-block;
  position: absolute;
  top: 0;
  left: 130px;
  vertical-align: middle;
}

Das li kann man wohl auch weglassen und nur .submenu schreiben. Wichtig ist hier m.E. das ">" (das im Selektor

), wonach das betreffende a-Tag ein direktes Kind des li-Tags sein muss. Sonst bekommen die noch tiefer liegenden Menüpunkte ja auch automatisch den Pfeil zugewiesen.

**Samuell** · 15.12.2015, 21:11

Ich sehe keinen Pfeilen bei allen Navigationspunkten.

Falls es Unterpunkte gibt fügt Contao die Klasse ".submenu" hinzu.

Aktive Navigationspunkte sind in Contao kein a, sondern ein span.

Mit den Tips solltest Du erstmal weiterkommen.

**tilda** · 15.12.2015, 21:27

Super - das hat alles geklappt! Vielen Dank.

Jetzt bleibt nur noch mein letztes Problem...
Warum habe ich die Ansicht, die auf dem Tablet und Mobile klappt, nicht auf dem Desktop.

**Samuell** · 15.12.2015, 21:35

Klingt ohne noch mal alles gelesen zu haben wie die Verwendung eines zweiten mobilen Layouts, in dem etwas anders eingestellt ist.

Allerdings weis ich auch nicht was auf der Ansicht zu sehen wäre,
somit ist es müßig zu raten.

**tilda** · 16.12.2015, 08:04

Jetzt habe ich mir nochmal alle Einstellungen angesehen.
In Contao habe ich kein zweites Mobiles Theme angelegt.

In meinem Theme gibt es einen Trigger und eine Navigation.

Im Head tag die zusätzliche Angabe

Code:

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />

Den Trigger habe ich für alle anderen Ansichten ausgeschaltet und eingeschaltet für:
@media only screen and
(min-device-width:320px) and (max-device-width:667px) and (orientation : landscape) { }
@media only screen and
(min-device-width:320px) and (max-device-width:667px) and (orientation : portrait) { }

Mit folgendem Code:

Code:

#menu_res {
	color: #000;
	cursor: pointer;
	display: block;
	font-size: 50px;
  	right:0px;
	top:60px;
    position: absolute;
}

#menu_res:hover {
  color: #ccc;
}

#menu_res_close {
  color: #000;
  cursor: pointer;
  display: none;
  font-size: 24px;
  right:0px;
  top:60px;
  position: absolute;
}
#menu_res_close:hover {
  color: #ccc;

}

Für die Tablet Version habe ich die Seite zentriert

@media only screen
and (min-device-width : 668px)
and (max-device-width : 1024px) {}

Das Problem ist, dass auf dem Desktop sich das Menü nicht entsprechend darstellt, wie in den Mediaqueries angegeben.

**tab** · 16.12.2015, 09:38

Ich denke es liegt daran, dass du min-device-width und max-device-width verwendest in den media queries. Das dürfte bei einem Desktop-Rechner die Auflösung des Bildschirms sein und nicht die Breite des Viewports, also des Browserfensters. Die Grafikauflösung verändert sich natürlich nicht wenn man das Browserfenster kleiner macht

Und zwischen 320 und 667 Pixel Auflösung werden heutzutage nur noch wenige Desktops eingestellt haben. Die Viewportbreite checkst du mit min-width und max-width, also ohne das "device".