GoldenLine
Zaloguj się
Konrad Karpieszuk

Konrad Karpieszuk WordPress Plugin
Compatibility
Assurance for WPML

Temat: przerobienie :hover menu na urządzenia dotykowe

witam

Mam na stronie menu. struktura z zapisie zencoding:

ul>li>a
li ma czasem podmenu a+ul>li, które to podmenu pojawia się, gdy rodzic li ma :hover

w html:



<ul>

    <li><a href="#"></a></li>

    <li>

        <a href="#"></a>

        <ul>

            <li><a href="#"></a></li>

            <li><a href="#"></a></li>

            <li><a href="#"></a></li>

        </ul>

    </li>

    <li><a href="#"></a></li>

    <li><a href="#"></a></li>

</ul>


generalnie jest to standardowe menu rozwijane, napisane w czystym css, oparte na umieszczaniu kursora nad danym li by rozwinąć podmenu

czy jest jakiś szybki sposob by przepisac to menu tak by dzialalo tez na urzadzeniach dotykowych? teraz jest tak, ze jak sie dotknie ktoregos z top-menu to wtedy element <a> rejestruje klikniecie i przenosi na podstrone zanim ktos zdąży wybrac cos z podmenu

rozwiazanie nie musi byc w samym css, moze byc tez jquery. wazne by dzialalo :)Ten post został edytowany przez Autora dnia 15.10.13 o godzinie 12:42
Link do wypowiedziLink

konto usunięte

Temat: przerobienie :hover menu na urządzenia dotykowe

Spróbuj zmienić :hover > ul (hover na <li>) na :hover + ul (hover na <a>). Powinno łyknąć.
Link do wypowiedziLink

konto usunięte

Temat: przerobienie :hover menu na urządzenia dotykowe

+ trzeba będzie obsłużyć hover na samej ul'ce :/ Możesz to zrobić na 2 sposoby:

a) brak odstępu pomiędzy <a> i <ul>
b) opóźnić "zniknięcie" ul'ki (np transition-delay)
Link do wypowiedziLink

konto usunięte

Temat: przerobienie :hover menu na urządzenia dotykowe

No akurat ':hover' na urządzeniach dotykowych raczej nie zadziała - z tej prostej przyczyny, że nie ma tam myszy ;)

Jedyne sensowne rozwiązanie to przechwycenie odpowiedniego zdarzenia na linku ('click' lub 'touchstart') i zablokowanie domyślnej akcji. Pozostaje nam jedynie pokazanie danej sekcji nawigacji.

Rozumiem, że problemem może być zablokowanie dostępu do strony z poziomu 'top-menu' - w takim przypadku konieczne będzie przebudowanie nawigacji (co najmniej wizualnie). Przykładową opcją jest pokazanie tych ukrytych sekcji od razu albo dopiero po przejściu na stronę z poziomu 'top-menu'.

Inspiracje:
http://bradfrost.github.io/this-is-responsive/patterns...
Link do wypowiedziLink

konto usunięte

Temat: przerobienie :hover menu na urządzenia dotykowe

Waldek M.:
No akurat ':hover' na urządzeniach dotykowych raczej nie zadziała - z tej prostej przyczyny, że nie ma tam myszy ;)

Złej baletnicy przeszkadza brak myszy... czy coś. Jest hover, ale jest trochę tricky. Jeśli element ma podpiętą akcję ma hover (element, nie rodzic, czy dziecko) to ta akcja wykona się po pierwszym "tapnięciu". Kolejne "tapnięcie" triggeruje właściwy click. Zmontowałem na kolanie przykład (sprawdzony pod androidem i iOS): http://jsfiddle.net/s4K6y/3/
Link do wypowiedziLink

konto usunięte

Temat: przerobienie :hover menu na urządzenia dotykowe

Rafał K.:
Złej baletnicy przeszkadza brak myszy... czy coś. Jest hover, ale jest trochę tricky.

Gratuluję pomysłowości, ale Twoje rozwiązanie jest faktycznie "trochę tricky", bo na starszym Androidzie (np. 2.3.6) jakoś mi to niespecjalnie działa. Rozumiem, że dobre baletnice nie tańczą w gorszych teatrach?

Poza tym w przypadku, gdy nawigacja będzie w układzie pionowym ( http://jsfiddle.net/s4K6y/7/ ), po pokazaniu się pierwszego 'submenu' blokujemy sobie inne linki z poziomu 'top-menu' bez możliwości ukrycia tego 'submenu'.

I na koniec pytanie od strony UX - czy użytkownik ma się domyślić, że aby dostać się na stronę z poziomu 'top-menu' musi wykonać podwójne 'tapnięcie'?
Link do wypowiedziLink

konto usunięte

Temat: przerobienie :hover menu na urządzenia dotykowe

Na pewno da się jeszcze więcej hejtów na mój post napisać, ale:

- kolega szukał prostego rozwiązania; oto ono
- do rzeczy, które opisałeś (pionowe menu) służy raczej accordion (submenu przykrywające pozostałe opcje? c'mon)
- problem z ux przy podwójnym tapnięciu nie wynika z samego rozwiązania, raczej z tego, że z g%$na się bata nie ukręci; to nie jest pattern nawigacji (wielokrotnie zagłębione, bazujące na hoverze menu) sprawdzający się idealnie na ekranach dotykowych (bez urządzenia wskazującego, palca nie licząc). Jasne, że napiszesz js, który to ogarnie przy odpowiedniej gimnastyce palca, ale kto tu przed chwilą pisał o ux?

Z argumentem o starym androidzie ciężko się nie zgodzić. Podobny problem będzie na kindlu, nokii z symbianem i na lodówce.
Link do wypowiedziLink

konto usunięte

Temat: przerobienie :hover menu na urządzenia dotykowe

Ja robię jednak główny element mający czajldy jako pustak - np. w Joomli biorę separator.
Nauczyłem się w jednej z prac (heh), że ze względu właśnie na brak prawdziwego hovera na mobilach trza umożliwić klik (w sensie "tap") + rozwinięcie (czyli najczęściej po prostu parent nie jako link, tylko pustak). Na desktopie wtedy działa jako hover, a na mobilach musi być klik, czyli wszystko gra. Z wdrożeń na innych systemach to na WP robiłem to bodajże via jQuery, że z hasza robił takiego pustaka. Z mojej strony polecam takie podejście - dużo jakby "wyczyszcza" z obiekcji. Nie ma prawdziwego hovera na mobilach i nie ma co się kłócić. Wydaje mi się, że trzeba tu jakiś kompromis przyjąć.Ten post został edytowany przez Autora dnia 17.10.13 o godzinie 22:47
Link do wypowiedziLink
Paweł Pawlas

Paweł Pawlas HTML Ninja

Temat: przerobienie :hover menu na urządzenia dotykowe

Jeżeli nie udało Ci się jeszcze rozwiązać problemu zerknij na to: https://github.com/izilla/jQuery-touchMenuHover

:hover poprawnie działa na ios, niestety z androidami bywa różnie
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Menu rozwijalne w CSS




Wyślij zaproszenie do
Anuluj