Responsive Webdesign - SubNav Android

[Kapalla]

Hallo zusammen!

Ich setze gerade ein responsive Design um und habe folgendes Problem:

Als CMS kommt ein T3 System zu Einsatz. Die Navigation besteht aus 2 Navigationen. Extra für die mobile Version lade ich die Navigationen via Ajax und füge sie so als eine zusammen. Die Navigation beinhaltet 2 Unterstufen. Die Navi habe ich nun mit CSS angepasst. Die mobilen Endgeräte iPhone und iPad kommen super mit der Nav klar. Tippe ich einmal auf einen Hauptnav Punkt so fährt das erste Submenü runter. Tippe ich noch einmal auf diesen Navpunkt, so öffnet er die Seite. Bei Android sieht es allerdings ein wenig anders aus. Tippe ich einmal auf den Navpunkt (kurz) so öffnet er zwar auch das Submenü aber er lädt auch direkt die Seite des Hauptnavpunktes. Das ist so nicht gewollt. Klar kann ich den Navpunkt länger halten aber dann erscheint erst das Contextmenü von Android und das ist ja nicht gerade das, was man sich wünscht. Kennt einer eine Möglichkeit, wie ich das umsetzen kann? Ich hatte schon an jQ gedacht aber da bekomme ich dann gff. wieder Probleme mit der Performance.

Ich hatte Anfangs auch erst das jQ Plugin superFish eingesetzt aber da bekomme ich wiederum Probleme mit iOS Geräten....

Wie kann ich das Menü erstellen, so dass auch Android mit einem Tipp auf einem Navpunkt das Submenü ausfährt? Gibt es da ggf. schon eine Lösung führ?


Grüße

 

[threadi]

Um einen Menüpunkt auf mobilen Geräten die mit Touchscreen arbeiten aus zuklappen, genügt es i.d.R. die CSS-Pseudoklasse hover zu verwenden.

<ul>
<li>Obernavigationspunkt
  <ul>
   <li>Unternativationspunkt</li>
</li>

li:hover ul { display: block; }

Tipps man den Obernavigationspunkt an, wirken die Eigenschaften von o.g. hover-Angabe.

Moderation: Verschoben von HTML zu CSS.

 

[Kapalla]

Hi threadi,
das klappt aber nur unter iOS. Auf den Androids will der nicht so recht. Ich habe mir aber nun aber eine Methode mit jQuery geschrieben. Das Funktioniert super. Die Pseudo-Klasse hover funktioniert halt nur bei manchen Androids -> Warum auch immer. Eigentlich sollte es auf einem Android funktionieren, wenn man den NavPunkt ganz schnell antippt. Nicht aber auf meinem Node oder Galaxy. Naja, hab es ja nun gelöst.

Greezy

 

[threadi]

Mit welchem Browser auf Android? Chrome selbst oder hast Du einen alternativen? Welche Android-Version hast Du denn? Wenn es "nur bei manchen" funktioniert, dann hängt es entweder mit der Version, dem Touchscreen oder dem verwendeten Browser zusammen.

 

[Kapalla]

Hi,

ich habe auf dem Note ICS drauf 4.0.1 und auf dem Galaxy 2.3.1 und es werden die Standard-Browser verwendet.

 

[pax]

Das passt jetzt nicht zu Deinem Problem, aber ist vielleicht trotzdem nützlich. Das Einbinden eines alternativen Menüs über Ajax finde ich etwas umständlich. Du kannst im TypoScript den Useragent abfragen und so auf Anhieb das gewünschte Menü übermitteln.

TYPO3.net - Das deutsche TYPO3-Portal:useragent

 

[Kapalla]

Ja schon klar. Aber die Navigation besteht im normalfall aus 2 Navigationen. Diese mussten aber zusammengelegt werden in der mobile ansicht. Daher werden sie über Ajax geladen. Es ist ja auch kein alternatives Menü. Es ist das selbe wie in der Webansicht. Nur wird es vorher einmal zusammengelegt und dann ausgegeben. Das erspart einem viel Ärger mit css und jQ. Die zweite Nav ist nämlich die eigentliche Subnav der ersten nav. Nur hat die 2te Nav selber auch noch Subnavs. Ich hatte es zwar so positionieren und ausrichten können, dass es wie ein einzelnes Aussah, aber war viel zu kompli und beim weiteren anpassen gab es immer wieder Probleme. Vor allem wenn man die ganzen unterschiedlichen Auflösungen bedenkt. Daher lieber einmal neu ausgeben und eine neue id zuweisen und über css schnell anpassen. Und via jQ eben Android freundlich gestalten.

LG