Rozwiń mnie, za pierwszym razem na urządzeniach mobilnych

Rozwiń mnie, za pierwszym razem na urządzeniach mobilnych

W dzisiejszym wpisie chcę Ci pokazać proste rozwiązanie, aby na urządzeniach mobilnych uzyskać efekt, gdzie dopiero po drugim kliknięciu odnośnika przejdziemy do zawartości na jaką wskazuje.

Będzie to ekstremalnie prosty do dołączenia do kodu skrypt jQuery, który rozwiąże cały problem. Aby dokładniej zobrazować istotę problemu, zobacz poniższą animację. Przygotowałem dwie wersje menu, jedna dla urządzeń z dużym ekranem (jak np. laptopy) gdzie menu jest rozwinięte oraz oraz drugie dla urządzeń mobilnych (np. telefony, tablety), gdzie domyślnie jest zwinięte. O ile na dużych ekranach, gdzie menu jest od razu rozwinięte nie widać żadnego problemu – klikasz link i przenosi na odpowiedni odnośnik, jednak w przypadku telefonu takie zachowanie nie jest pożądane, ponieważ drugi poziom nawigacji jest ukryty, pierwsze kliknięcie powinno tylko i wyłącznie rozwinąć drugi poziom menu.

Jak widzisz, na urządzeniu mobilnym drugi poziom menu jest rozwijany z równoczesnym przejściem na stronę Wikipedii. Takie zachowanie jest nieprawidłowe, naprawmy je prostym w użyciu skryptem.

Struktura HTML menu jest następująca.

See the Pen doubletaptogo example by Tomasz Wikło (@studioleopard) on CodePen.19725

W pierwszej kolejności pobierz i dołącz bibliotekę jQuery, a następnie doubleTapTogo.

<script src=”jquery-latest.min.js”></script>
<script src=”jquery.doubletaptogo.min.js”></script>

Zwróć uwagę na kolejność dołączania skryptów, najpierw jQuery a dopiero później doubleTapTogo. Gdy upewnisz się, że wszystko załadowałeś poprawnie, wystarczy jedna linijka kodu. W jQuerowym $(”) określasz selektor (klasę, identyfikator, znacznik), na jakiej ma zostać uruchomiony skrypt, w naszym przypadku będzie to $(‘.doubleTapToGo’).doubleTapToGo(); ponieważ taką mamy strukturę HTML.

See the Pen doubletaptogo example by Tomasz Wikło (@studioleopard) on CodePen.19725

Jeżeli wszystko zadziałało poprawnie, to rozwiązaliśmy nasz problem, zobacz animację poniżej. Od teraz na urządzeniach mobilnych pierwsze kliknięcie rozwinie menu, a drugie przejdzie na stronę pod tym odnośnikiem.

Zwróć uwagę na konsole, gdy skrypt nie wykryje urządzenia mobilnego, to zwróci komunikat false. Możesz sprawdzić to dodając do kodu console.log($(‘.doubleTapToGo’).doubleTapToGo());. W przeciwnym wypadku, otrzymamy poprawny obiekt jQuerowy a tym samym upewnimy się, że wszystko zostało załadowane poprawnie.

Kliknij tutaj aby pobrać omawiamy przykład. Nie zapomnij przełączyć Twojej przeglądarki w tryb urządzenia mobilnego.

Mam nadzieję, że skrypt Ci się przyda. Daj znać w komentarzu, czy rozwiązał Twój problem z odnośnikami i rozwijanym menu na urządzeniach mobilnych.

 

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.