Responsive Drop Down Menu

Właśnie zauważyłam, że dawno nie pisałam tutaj nic o tworzeniu stron, kodowaniu i tym podobnych tematach. Głównie o rowerach. Teraz też powinnam napisać “kilka” słów o rowerach a konkretnie naszym pobycie w Szwajcarii na UECT 2013 w Yverdon les Bains. Ale od powrotu nie mam na to czasu. Ogarnęło mnie znów kodowanie. I stąd ten post.

Definicji słowa “responsive” chyba nie muszę tutaj tłumaczyć. Jest to ta część tworzenia strony www, która w ostatnim czasie stała się dla wszystkim wielkim priorytetem. I nic dziwnego. Urządzenia mobilne z dostępem do internetu to teraz coś zupełnie naturalnego i dostępnego pod względem finansowym właściwie dla każdego.

Dostosowanie struktury kodu HTML5/CSS do wielu rozdzielczości jednocześnie nie jest już wielką męczarnią – istnieje wiele frameworków, które są przy tym niezwykle pomocne. Ja osobiście stosuję Foundation Zurb. Oparty jest o łatwy w użyciu gotowy grid 12-kolumnowy gdzie szerokości zdefiniowane są w procentach. Zawiera wiele gotowych rozwiązań cssowych oraz jsowych (jak tabele, buttony, formularze, nawigacja, popupy i wiele innych).

Ale mimo tych dodatków zawsze muszę poświęcić chwilę na przemyślenie nawigacji i jej zachowanie na mniejszych ekranach. Co prawda Foundation posiada menu responsywne oraz wersję offcanvas (specjalne layouty z opcjami wysuwania menu z różnych krawędzi ekranu), ale nie zawsze dokładnie to rozwiązanie jest odpowiednie. Dlatego zaczęłam się ostatnio rozglądać za innymi narzędziami i troszkę ich znalazłam.

Oto te, które wydają mi się dość mądrze napisane i funkcjonalne.

Responsive and Touch-Friendly

responsivemenu1

Big Menus, Small Screens: Responsive, Multi-Level Navigation

responsivemenu2

Google Nexus Website Menu

responsivemenu3

Responsive Multi-Level Menu

responsivemenu4

Responsive Retina-Ready Menu

responsivemenu5

CSS3 animated dropdown menu

Ostatnio korzystałam z tego narzędzia. Bardzo łatwy do stylowania, dobrze zachowuje się na desktopie i na smartphonie. Widoczny jest na górze wpisu.
responsivemenu6

Vertical Responsive Navigation ($5)

responsivemenu7

Orion – Responsive Menu ($5)

responsivemenu8

Życzę miłego testowania tych rozwiązań 🙂