Ich passe eine Website an, damit sie sich auf dem iPad nativ anfühlt.
Diese Website verfügt über eine Navigation, die ein Drop-down mit der Unter-Navigation bei Hover anzeigt. Das funktioniert wie ein Zauber auf dem iPad. Wenn Sie das Subnav berühren, öffnet und schließt es sich, wenn Sie anderswo klicken / berühren.
Jetzt habe ich die Anforderung, es wieder zu schließen, wenn der Navigationspunkt erneut berührt wird.
Ich dachte, ich könnte einfach pointer-events:none auf Hover & amp; aktiv für das iPad, aber das flackert die Subnavigation und es funktioniert nicht ...
Ich habe auch versucht, den Navigationspunkt mit Element-Set mit dem Vorher-Selektor abzudecken und seine Zeiger-Ereignisse auf none zu setzen, aber das funktioniert nicht ...
Irgendeine Idee, wie ich dieses Problem nur mit CSS lösen könnte. (Ich kann weder HTML noch JS ändern)
PS: Sie können dies zum Beispiel auf www.macprime.ch reproduzieren (klicken Sie oben auf die Hauptnavigation, und versuche das Dropdown erneut zu schließen)
edit ok ich habe fast alles versucht, was nur mit CSS möglich war. Ich denke nicht, dass es möglich ist. Wenn mir jemand sagen kann, warum, bekommt er / sie die Bounty Belohnung.
Sie könnten ein zweites transparentes Element haben, das über dem angetippten Element angezeigt wird. Wenn der Benutzer erneut tippt, wird das andere Element ausgewählt, und der erste verliert den Status "Schwebeflug":
%Vor%Das wird sich natürlich negativ auf den Desktop auswirken, also sollten Sie etwas wie:
machen %Vor%AKTUALISIEREN Onclick-Ereignisse hinzugefügt, um sie anklickbar zu machen.
Sie können eine funktionierende Demo hier sehen: Ссылка
Leider konnte ich keine Lösung finden, die keine HTML- oder JavaScript-Änderungen erfordert, aber ich konnte sie auf ein Minimum beschränken.
Sie müssten insgesamt zwei nicht-CSS-Änderungen vornehmen:
onclick="void()" ) und eine eindeutige Kennung hat, die es mit dem Menü verknüpfen kann. Sie können diese beiden Dinge mit CSS erledigen, aber ich bin mir nicht sicher. Die Erkennung von Tablets wäre in CSS ein wenig skizzenhaft und ich denke nicht, dass Sie mit einem: before oder: after Pseudo-Selektor etwas Kompliziertes machen können.
Das ist eine interessante Frage und ähnlich der, die ich in letzter Zeit hatte. Wie heiratet man ein Standard-Dropdown-Menü, das bei Hover mit einer Touch-Ereignisschnittstelle angezeigt wird? Die Verwendung des Hover-Ereignisses als Auslöser funktioniert auf einem Desktop sehr gut. In einer Welt ohne Hover-Ereignisse (Tablets und Smartphones), nicht so sehr.
In meinem Fall bin ich auf die Idee gekommen, die Verhaltensweisen zu definieren: Click / Touch-Event würde das Triggern auslösen, Hover-Event würde subtile Hinweise geben. Für weitere Details zu diesem Gedankengang siehe: Ссылка
Für das Problem, das Sie überwinden möchten, frage ich mich, ob die Verwendung von @media -Abfragen in Ihrem CSS eine bessere Lösung ist ...
Dadurch würden Sie mehr von einer nativen Benutzeroberfläche auf dem iPad erstellen. Wenn diese Route jedoch vom Tisch ist, ist etwas wie das, was Brian oben hat, besser. Ich wollte dir nur eine Alternative geben.
Tags und Links css css3 mobile-safari