Proste i intuicyjne menu nawigacyjne to jeden z najważniejszych elementów projektu Twojej witryny. Działa jak mapa, prowadząc odwiedzających poza stronę główną. W obliczu rosnącej liczby osób korzystających z Internetu na urządzeniach mobilnych, Twoja witryna powinna posiadać również menu nawigacyjne dostosowane do urządzeń mobilnych.
Na szczęście Webflow ułatwił dodanie składanego paska menu hamburgerowego, który usprawni Twoją witrynę mobilną. Czytaj dalej, aby dowiedzieć się, jak edytować to menu mobilne w Webflow.
Jak dodać pasek nawigacji
Menu hamburgerowe jest istotnym elementem projektu podczas pracy z ograniczoną przestrzenią poziomą. Eliminuje potrzebę stosowania nieporęcznego, stałego paska nawigacyjnego, który zajmuje cenne miejsce.
W Webflow to menu i jego funkcje są wbudowane w element NavBar. Dodanie tego elementu do projektu wymaga czterech prostych kroków:
- Kliknij ikonę „+” u góry lewego panelu, aby otworzyć panel „Dodaj”.
- Przewiń w dół do sekcji „Komponenty”.
- Kliknij i przytrzymaj element „NavBar”.
- Przeciągnij element do nagłówka strony.
Jak edytować menu mobilne
Po dodaniu paska nawigacyjnego do swojej witryny istnieje kilka różnych sposobów na dodanie stylu i osobowości do tego menu.
Jak dodać więcej linków do menu
Element paska nawigacji zawiera przycisk menu i menu nawigacji, przy czym to ostatnie zawiera linki nawigacyjne. Po dodaniu go do projektu pojawi się kilka elementów zastępczych linków, które można usunąć lub edytować za pomocą łączy do witryny.
Wykonaj poniższe kroki, aby dodać więcej łączy nawigacyjnych:
- Kliknij dowolny element wewnątrz paska nawigacyjnego.
- Przejdź do panelu „Ustawienia elementów” po prawej stronie.
- Naciśnij ikonę koła zębatego, aby otworzyć „Ustawienia”.
- Przewiń do sekcji „Ustawienia paska nawigacyjnego”.
- Naciśnij przycisk „Dodaj link”.
Teraz, gdy masz już wystarczającą liczbę linków do wszystkich odpowiednich stron witryny, czas zająć się właściwym linkowaniem.
- Wybierz łącze nawigacyjne.
- Przejdź do panelu „Ustawienia elementów”.
- Znajdź sekcję „Ustawienia łącza”.
- Wpisz wyznaczony adres URL strony internetowej w polu „URL”.
Jak zmienić animację menu
W Webflow możesz także zmienić sposób wyświetlania menu mobilnego, gdy odwiedzający klikną przycisk menu. Możesz wybrać jeden z trzech typów animacji odsłaniania:
- Rozwijane – domyślnie menu mobilne będzie rozwijane z paska nawigacyjnego, gdy odwiedzający dotknie przycisku menu. Zajmie całą szerokość okna przeglądarki.
- Po prawej stronie — jeśli wybierzesz tę animację odsłaniania, menu urządzenia mobilnego pojawi się po prawej stronie ekranu. To menu zajmie całą wysokość okna przeglądarki.
- Nad lewą stroną – ten typ menu jest identyczny jak nad prawym, z tą różnicą, że menu nawigacyjne będzie przesuwane z lewej strony ekranu.
Aby ustawić żądaną animację odsłaniania, wykonaj następujące czynności:
- Wybierz dowolny element wewnątrz paska nawigacyjnego.
- Przejdź do panelu „Ustawienia elementów” po prawej stronie ekranu.
- Kliknij ikonę koła zębatego, aby uruchomić „Ustawienia”.
- Przejdź do sekcji „Ustawienia paska nawigacyjnego”.
- Kliknij opcję „Typ”.
- Wybierz preferowany styl z menu rozwijanego.
W sekcji „Ustawienia paska nawigacyjnego” możesz także kontrolować następujące elementy:
- Łagodzenie otwierania: typ krzywej używany do animacji przejścia otwartego.
- Łagodzenie zamykania: typ krzywej używany do animacji bliskiego przejścia.
- Czas trwania: czas potrzebny na wyświetlenie menu.
Należy pamiętać, że czas trwania przejścia mierzony jest w milisekundach.
Jak zmienić styl menu
Webflow ułatwił stylizację dowolnej części paska nawigacyjnego, umożliwiając płynne dopasowanie menu mobilnego do projektu witryny.
Aby nadać styl przyciskowi menu, wykonaj następujące czynności:
- Wybierz przycisk menu.
- Przejdź do panelu „Styl” po prawej stronie (ikona pędzla).
Panel Styl umożliwia zmianę każdego aspektu przycisku menu. Najczęściej projektanci zmieniają kolor i rozmiar tła przycisku.
Aby zmienić kolor tła, wykonaj następujące czynności:
- Przejdź do sekcji „Tła”.
- Kliknij ikonę kropli koloru, aby otworzyć „Próbnik kolorów”.
- Wybierz żądany kolor.
Jeśli chcesz zmienić rozmiar ikony hamburgera, wykonaj następujące kroki:
- Przejdź do sekcji „Typografia”.
- Zwiększ lub zmniejsz rozmiar ikony w polu „Aa”.
Możesz także zmienić kolor ikony w powyższym polu, oznaczonym literą A i kroplą koloru.
Chociaż istnieje wiele sposobów dostosowania przycisku menu, nie można go zastąpić elementem tekstowym ani niestandardowym obrazem.
Łatwa nawigacja mobilna
Projektując mobilne menu, chcesz maksymalnie wykorzystać dość ograniczoną przestrzeń. Staraj się więc nie przepełniać menu opcjami, aby nie dezorientować odwiedzających. Upewnij się także, że opcje menu są krótkie, jasne i łatwe do odczytania.
Następnie możesz pobawić się stylem i animacją menu, aby zainteresować odwiedzających na każdym kroku.
