mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 25.09.2021 20:59 Benutzername: Passwort: Auto-Login

Thema: Javascript / jQuery: Menü mit Hover bzw. Touch-Events vom 16.06.2013


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Javascript / jQuery: Menü mit Hover bzw. Touch-Events
Autor Nachricht
easteregg
Threadersteller

Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 33
Geschlecht: Männlich
Verfasst So 16.06.2013 01:25
Titel

Javascript / jQuery: Menü mit Hover bzw. Touch-Events

Antworten mit Zitat Zum Seitenanfang

Servus und guten Abend,

ich zermatere mir nun schon stundenlang den Kopf, wie ich ein Menü umsetzen kann. Das Menü ist ein Drop-Down per Hover-Selektor. Jetzt will ich das Menü auch auf Touch Devices verfügbar machen, allerdings liegt hier der Fuchs begraben.

Mein aktueller Stand: http://jsfiddle.net/fvNXX/

Wo es jetzt aber hapert: Wenn ich schnell hintereinander zwei Menüs öffne, bleiben beide offen. Das letzt-geöffnete noch mit dem Pseudo-Hover Effekt (mit Box-Shadow), das vorherige lediglich mit durch jQuery geöffnetem Bereich (ohne Box-Shadow).
Das ist natürlich nicht Sinn der Sache, offen sein soll immer nur das letzt-geöffnete Menü.

Wo liegt mein Denkfehler?
Oder gibt es sogar einen einfacheren Ansatz, auf den ich bisher nicht gestoßen bin?

Danke euch im Voraus!
  View user's profile Private Nachricht senden
Karlarsch

Dabei seit: 05.02.2007
Ort: -
Alter: 55
Geschlecht: Männlich
Verfasst So 16.06.2013 07:28
Titel

Antworten mit Zitat Zum Seitenanfang

Es gibt für Touchdisplays kein Pendant zu "onmouseover".
Eine benutzerfreundliche Navigation für Touch hat keine hover-Funktionalität.

Das von dir verwendete "ontouchstart" ist vergleichbar mit "onmousedown" ... und du würdest doch wirklich niemandem eine Navigation vorsetzen wollen die nur aufklappt/funktioniert, wenn permanent die linke Maustaste gedrückt ist.

Gruß
Karl
  View user's profile Private Nachricht senden
Anzeige
Anzeige
easteregg
Threadersteller

Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 33
Geschlecht: Männlich
Verfasst So 16.06.2013 11:51
Titel

Antworten mit Zitat Zum Seitenanfang

Hey Karlarsch, da stimme ich dir komplett zu. Im Script prüfe ich deshalb auch nur, ob "ontouchstart" ein vorhandenes Event wäre - sozusagen zum Erkennen, ob gerade ein Touch Device das Script aufruft (und für den IE10 das Pendant window.navigator.msPointerEnabled als Check).
Der eigentliche Aufruf der Funktion erfolgt beim click-Event.

Was nun das Problem ist: Wenn ich das Menü bei Punkt 3 per Touch (=click-Event), per Touch wieder schließe, per Touch erneut öffne - und nun Menü "Punkt 2" per Touch öffne: Dann bleibt Punkt 3 gleichzeitig mit Punkt 2 ausgeklappt. Eigentlich sollte in dem Fall Punkt 3 einklappen, und nur Punkt 2 ausgeklappt sein.

Vielleicht steh ich gerade auch etwas auf dem Schlauch. Wie könnte ich denn im click-Event prüfen, ob andere Menüpunkte offen sind, und diese ggf. schließen?
  View user's profile Private Nachricht senden
easteregg
Threadersteller

Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 33
Geschlecht: Männlich
Verfasst So 16.06.2013 16:26
Titel

Antworten mit Zitat Zum Seitenanfang

Habs jetzt gelöst bekommen:
Die CSS-Klasse mit :hover-Effekt per jQuery vom Element entfernt, dafür dann bei click das übliche auf- & zu-sliden.
Zusätzlich werden alle anderen Elemente gehided, wenn sie es eh noch nicht sind, per:
Code:
$("#nav-wrapper ul li a.arrow-up").not(this).removeClass('arrow-up').next().hide();

(Die Klasse arrow-up gebe ich den Elementen beim aufsliden und entferne beim zusliden. Daher targete ich hier nur die, die noch nicht zugeslidet wurden)

Vielleicht habe ich es mir jetzt zu kompliziert gebaut, aber funktioniert immerhin (Anregungen / Tipps zur noch besseren Umsetzung sind dennoch gerne gesehen).
Bisher erfolgreich getestet mit iPhone (iOS) & Acer Tablet (Windows 8, auch IE10 macht mit).

Fiddle: http://jsfiddle.net/fvNXX/1/
  View user's profile Private Nachricht senden
sahnemuh

Dabei seit: 19.06.2003
Ort: /dev/null
Alter: 40
Geschlecht: Männlich
Verfasst Mo 17.06.2013 22:25
Titel

Antworten mit Zitat Zum Seitenanfang

Ich hatte langeweile und habe da mal ein wenig Hand angelegt:
http://jsfiddle.net/fvNXX/5/

Was habe ich getan?
- Deine Navigationspunkte in die richtige Reihenfolge im Markup gebracht und das CSS so geändert, dass dies auch möglich ist. Deine Float-Geschichte da war ja totaler murks.
- Das CSS entschlackt und von unnötigen Selektoren befreit. zudem alle verweise auf die ID entfernt ( http://screwlewse.com/2010/07/dont-use-id-selectors-in-css/ )
- Die Ausklapplogik des Menüs auf CSS3-Transitions umgestellt (ggf. müsste man hier für ältere Browser noch einen Fallback bauen, der das Menü einfach mit display: none; / block anzeigt)
- Das Javascript runderneuert. Nur noch Touch-Devices brauchen jetzt welches (siehe Kommentare im JS)
- Das Verhalten für Touch-Devices wie folgt umgestellt: Tappt man auf den eigentlichen Text, wird der Link ausgeführt. Tappt man auf den Pfeil rechts vom Menüpunkt, wird das Untermenü ausgeklappt

Bei Fragen: Fragen.
  View user's profile Private Nachricht senden
 
Ähnliche Themen jQuery - Hover
Hover mit JQuery flackert
jQuery hover über größere Grafik
Hover Dropdown Menü mit CSS und Java
Logik Problem: Bei hover über Menü wird DIV über Text gelegt
[Javascript] Hover und Aktiv Script
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.