Jak w prosty sposób stworzyć responsywną nawigację?


15 sierpnia 2013 / Mr.Mr


Czytając w sieci publikacje na temat tego jak projektować nawigacje stron responsywnych natknąłem się na mnóstwo dziwnych i trudnych metod, które miały niezorientowanym przybliżyć sposób na stworzenie responsywnej nawigacji. Wiele z nich były zwykłym przerostem formy nad treścią, więc postanowiłem opisać jak szybko stworzyć nawigację strony, która będzie ergonomiczna również na urządzeniach mobilnych.

1. Wprowadzenie

Założenie jest proste. Chcemy aby nawigacja strony w wersji desktopowej wyświetlała się ergonomicznie i estetycznie również na urządzeniach mobilnych. Oczywiście chcielibyśmy też aby zachowała swoją funkcjonalność jednocześnie stając się intergralną częścią strony dostosowanej do wyświetlaczy urządzeń mobilnych.

Zadanie to możemy osiągnąć dzięki wykorzystaniu mediaqueries, dzięki którym buduje się strony responsywne. Mając je do dyspozycji „wystarczy” zmienić wygląd menu i użyć odrobiny JavaScriptu aby zmienić funkcjonowanie menu. Ten ostatni fragment jest szczególnie ważny ponieważ na urządzeniach mobilnych miejsce jest jeszcze cenniejsze niż na konwencjonalnych stronach. Dlatego dla zapewnienia funkcjonalności musimy zmienić nasze statyczne menu w coś trochę bardziej dynamicznego. W tym celu wykorzystamy znany schemat…

2. HTML

Przypuśćmy, że struktura naszego kodu HTML wygląda w ten sposób:

Głównie interesować będzie nas element nav oraz link o klasie .open-menu. Te dwa elementy będziemy zmieniać przy pomocy mediaqueries. Reszta strony nas właściwie nie interesuje.

3. CSS

Dla uproszczenia przyjmiemy, że wszystko cos znajduje się poniżej szerokości 960px jest urządzeniem mobilnym. W tym przykładzie wprowadzimy, więc dwie wersje menu, aczkolwiek stosując większą ilość tzw. breakpointów (wyznaczanych przez mediaqueries) możecie stworzyć nawet kilka wersji nawigacji.

Kod CSS dla menu w wersji desktopowej jest następujący:

Jak widać mamy tutaj bardzo prostą strukturę CSS. Linki z klasami .hide i .open-menu ukrywamy ponieważ nie są one potrzebne użytkownikom komputerów.

W dalszej kolejności ustalamy wygląd menu poniżej 960px. To w większości wystarczy aby otrzymać zadowalający efekt, ale my pójdziemy o jeden krok dalej. Kod CSS wygląda następująco:

Najważniejsze w powyższych deklaracjach są następujące aspekty:

  1. Wyłączamy wyświetlanie elementu nav co będzie nam potrzebne z punktu widzenia interakcji obsługiwanej przez kod JavaScript
  2. Nadajemy elementowi nav pozycję absolutną tak aby nachodził na inne elementy strony.
  3. Zmieniamy szerokość linków o klasie .btn na 100%
  4. Linkom o klasach .open-menu i .hide nadajemy wyświetlanie blokowe tak aby stały się widoczne na stronie

W ten sposób nasza domyślna nawigacja znika, a zamiast niej pojawia się guzik (link o klasie .open-menu) służący do wysuwania nawigacji.

4. Interakcja z menu

Teraz wystarczy, że napiszemy kod, który sprawi, iż kliknięcie w link o klasie .open-menu otworzy naszą nawigację. Zrobimy to przy użyciu jQuery, które i tak pewnie będziecie używać ;)

Dzięki zastosowaniu mediaqueries, pośród linków w menu pojawił się link o klasie .hide. Kliknięcie go zamyka nawigacje.

Jedną nowością jest dodanie klasy .show. To dynamiczne przypisywanie jej i usuwanie w związku z wydarzeniem kliknięcie linków .hide i .open-menu powoduje, że nawigacja pojawia się i znika. Deklaracja klasy .show jest banalnie prosta:

5. Podsumowanie

Jak widać stworzenie otwieranej nawigacji, które wyświetla się ergonomicznie na urządzeniach mobilnych można zrobić w sposób prosty i szybki. Wystarczy znajomość arkuszy stylów ;) i jQuery, dlatego nie widzę sensu w rozwiązaniach „na około”, które czasami można znaleźć w internecie…

Demo zostanie zaktualizowane w najbliższym czasie.

Zobacz demo on-line Pobierz pliki źródłowe

Image courtesy of Stuart Miles at FreeDigitalPhotos.net



16 odpowiedzi na “Jak w prosty sposób stworzyć responsywną nawigację?”

  1. Marcin Jagielnicki pisze:

    Po akcjach w takiej kolejności: zmniejszenie rozdzielczości, otwarciu i zamknięciu nawigacji a następnie zwiększeniu rozdzielczości, menu znika.

  2. DMati pisze:

    Dorzuciłbym pozostałe mediaqueries z bootstrapa, albo jedynie dla width max 600px mobilne a dla max 960px „w pół drogi”.

    • Mr.Mr pisze:

      W artykule jest jedynie przykład zastosowania. W prawdzimy projekcie powinno się wyznaczyć co najmniej 4 breakpointy.

      • Adam pisze:

        W prawdziwym projekcie wystarczy jeden breakpoint, a stronę zakodować jako liquid layout.

      • Mr.Mr pisze:

        To duże uproszczenie. Mimo wszystko strony liquid nie są lekarstwem na każde zło. Najczęściej dużo lepsze efekty otrzymuje się stosują podejście RWD w stylu serwowania róznych wersji strony przy różnych breakpointach.

  3. Guest pisze:

    mega spoko dzięki:)

  4. Krzysiek pisze:

    Pomysł jest dobry, ale jak zwykle można ciut inaczej.

    Ja zrobiłem responsywne menu zmieniające się z pomocą mediaqueries i oczywiście z jquery. Menu to jest oparte o menu i odpowiednio sformatowane. Gdy rozdzielczość jest mniejsza niż 768 px zwykłe menu zamieniam w select i sprawdza się to doskonale. Pozwolę sobie przytoczyć przykład jaki umieściłem na stronie http://www.elbox.info. Jak by było zainteresowanie mogę napisać krótki tutorialek.

  5. Damian pisze:

    W momencie, gdy mam włączone rozwijane menu dla rozdzielczości mniejszej niż 960px, chciałbym aby po kliknięciu na daną pozycję Menu zamykało się automatycznie. Da się zrobić coś takiego?

  6. Szyszka pisze:

    Odpaliłam pliczek, by zobaczyć, jak to wygląda, i w ani desktopowym firefoxie, ani w desktopowej operze nie reaguje na kliknięcie na menu (obie najnowsze wersje). Wrzuciłam link do opery mobilnej i na telefonie wyszło cacy. Pytanie następuje: czemu nie chce działać normalnie? Spotkał się ktoś z tym problemem?

  7. netteria.net pisze:

    Ładnie opisane, starannie, itd. Mam tylko pytanie, czy nie prościej użyć bootstrapa i dostosować jedynie sam wygląd?

  8. Jagoda pisze:

    Po tym jak menu zmieni się w jeden button, po jego kliknięciu nic się nie dziej.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *