10 fragmentów kodu CSS i JavaScript do tworzenia responsywnych nawigacji

Jedną z najbardziej złożonych części dobrej, responsywnej strony jest nawigacja. Może to trochę potrwać, a jest wiele samouczków, które w tym pomogą. Ale jestem też fanem używania fragmentów kodu, takich jak te, które zebraliśmy w tym artykule.

Wszystkie te responsywne fragmenty nawigacji można edytować i klonować do własnych projektów. Posiadają również różne style, więc znajdzie się tutaj coś, co będzie działać na wszystkich typach witryn.

1. Responsywny układ całej strony autorstwa Johnny'ego Mango

Ten responsywny przykład pokazuje, jak daleko możesz posunąć się w fazie prototypowania witryny. Zauważysz, że nawigacja ma interesującą funkcję, gdy najedziesz kursorem i automatycznie ustawisz ostrość na linkach. Ten efekt można zmienić na „żywej” witrynie internetowej z tą samą nawigacją, ale w tym przykładzie przydatne jest pokazanie interfejsu użytkownika/UX strony.

Zobacz demonstrację Pen Responsive Navigation z Kube autorstwa Johnny'ego Mango

2. Rozwijany pasek nawigacyjny autorstwa Tani Rascia

Jeśli potrzebujesz dłuższych elementów rozwijanych w nawigacji, to menu może działać lepiej. Jest to silna alternatywa dla bardziej podstawowych nawigacji, które zawierają tylko kilka pozycji menu. W tym przypadku znajdziesz prostą listę linków z bardzo małym menu rozwijanym. Łącza podmenu pojawiają się tylko przy zdarzeniu kliknięcia, które jest obsługiwane przez jQuery. Możesz to zmienić na tylko CSS, ale stracisz wyzwalacz kliknięcia.

Mimo to, jak na tak przejrzysty projekt, jestem zaskoczony, jak dużą wszechstronność ten fragment oferuje programistom.

Zobacz rozwijany pasek nawigacyjny reagujący na pióro autorstwa Tania Rascia

3. Układ jednostronicowy autorstwa Jana Czizikowa

Jednostronicowe menu nawigacyjne potrzebują miłości, tak jak wszystkie inne. To doskonały przykład nawigacji na jednej stronie w akcji. Łącza przewijają się w dół z płynną animacją, ale nie czekaj zbyt długo.

Nie wspominając, że automatycznie dopasowują się do rozmiaru, niezależnie od rozmiaru przeglądarki. Ten rodzaj nawigacji poleciłbym głównie dla strony sprzedaży lub prostej witryny z portfolio. Jest czysty i zawiera kilka doskonałych funkcji animacji wraz z technikami responsywnymi.

Zobacz pióro W pełni responsywna nawigacja z animacjami CSS i jQuery autorstwa Jana Czizikowa

4. Czerwone menu rozwijane autorstwa Stephanie Walter

Deweloper Stephanie Walter stworzył kilka ekscytujących projektów internetowych. Ten fragment to tylko jeden przykład z jasnoczerwoną, responsywną nawigacją.

Linki mają trochę więcej pizzazz z niestandardowo wybraną funkcją i ładnym efektem najechania na start. Po zmianie rozmiaru zauważysz, że nawigacja używa przesuwanego menu rozwijanego. Prawie wybrałbym listę linków na poziomie bloku dla urządzeń mobilnych, ale działa to znacznie lepiej, biorąc pod uwagę podmenu.

Zobacz wielopoziomową nawigację Pen Responsive autorstwa Stephanie Walter

5. Czysty projekt CSS autorstwa Ahmada Hjazy

Oto unikalny projekt wykorzystujący czysty CSS do nawigacji. Jest to pionowe menu z linkami nawigacyjnymi naśladującymi układ okresowy pierwiastków.

Efekty zawisu są nieco opóźnione, ale niewątpliwie interesujące. Nie wspominając o responsywnym stylu, który jest zaskakująco użyteczny. Być może najbardziej imponującą częścią jest to, że cały ten przykład używa wyłącznie CSS .

Zobacz responsywne menu nawigacji pióra CSS autorstwa Ahmada Hjazy

6. Responsywny Sticky Header autorstwa Marca Libunao

Wspomniałem o projektowaniu pojedynczej strony we wcześniejszym fragmencie, a ten responsywny nagłówek podąża podobną trajektorią. Jedyną różnicą jest to, że ta nawigacja ma nieco większy blok na stronie i nieco inaczej obsługuje responsywne projektowanie stron.

Kiedy zmienisz rozmiar przeglądarki, zauważysz, że w tym przykładzie użyto ikony hamburgera z zabawną animacją. Fajnie biorąc pod uwagę styl, ale może nie każdy.

Zobacz lepką nawigację nagłówka Pen Responsive autorstwa MarcLibunao

7. Responsywne i przyjazne dla dotyku przez Dragoeco

Wszystkie dobre strony internetowe powinny być domyślnie przyjazne dla dotyku, co sprawia, że ​​nawigacja ta jest jeszcze bardziej atrakcyjna dla projektantów.

Każdy link prowadzi do nowej strony, ale możesz dotknąć, aby z łatwością najechać na rozwijane menu na dowolnym urządzeniu dotykowym. Tej funkcji często brakuje w menu nawigacyjnych i jest to jeden z powodów, dla których zaprojektowanie listy rozwijanej może być trudne.

Zobacz rozwijaną nawigację pióra: responsywna i przyjazna w dotyku autorstwa Dragoeco

8. Proste łącza nawigacyjne autorstwa AnabolicHippo

Kiedy myślę o prostych menu nawigacyjnych, myślę o takim projekcie. Każde łącze pojawia się jako własny element blokowy, nawet na mniejszych ekranach. Nie ma menu hamburgerów ani ukrytej animowanej funkcji menu. Zamiast tego linki zmieniają rozmiar i dzielą się na osobne wiersze.

Najtrudniejszą częścią jest obsługa efektu rozwijanego na urządzeniach mobilnych. Wiele linków ma podmenu i będą działać tak samo na mniejszych ekranach.

Twierdzę, że działa to najlepiej w przypadku witryn z niewielką ilością podmenu lub bez nich, ale warto wypróbować na urządzeniu mobilnym, aby zobaczyć, co myślisz o tym doświadczeniu.

Zobacz menu nawigacji reagujące na pióro opracowane przez AnabolicHippo

9. Playstation Curtain Menu autorstwa Louisa Chenais

Deweloper Louis Chenais stworzył jedną z moich ulubionych responsywnych nawigacji opartą na witrynie PlayStation. Louis nazywa to „zasłoną menu”, gdzie pojawia się w widoku, wyprzedzając całą stronę. Jest to powszechne w przypadku interfejsów mobilnych i szybko staje się popularne również wśród projektantów stron internetowych.

Jedną z rzeczy, które naprawdę lubię, jest styl animacji. Jest elegancki i wystarczająco szybki, aby wyświetlać linki bez znudzenia użytkowników. A co najlepsze, wydaje się, że może działać na stronie produkcyjnej.

Zobacz zasadę nawigacji reagującej na pióro nr 3 — menu kurtynowe autorstwa Louisa Chenais

10. Responsywne Mega-Menu Samira Alley

Możesz przeszukiwać sieć i znaleźć setki przykładów mega menu nawigacyjnego. Zazwyczaj pojawiają się one na większych blogach i witrynach z wiadomościami, ale są również popularne w sklepach eCommerce lub dużych witrynach agencji. Najtrudniejszą częścią mega-menu jest jego pełna responsywność. Dzięki temu małemu fragmentowi możesz z łatwością przerobić projekt mega menu, aby dopasować go do dowolnego ekranu.

Na urządzeniu mobilnym używa przesuwanej nawigacji, aby wyświetlić wszystkie wewnętrzne linki w jednym menu. Może się to wydawać trochę denerwujące, ale możesz również użyć jQuery, aby ukryć linki podrzędne, jeśli ma to sens. Jest to nadal jedno z najlepszych responsywnych rozwiązań, jakie widziałem, do uruchamiania mega menu na komputerze bez zrażania użytkowników mobilnych.

Zobacz Mega Menu Responsive Pen – Nawigacja przy Samir Alley