Jak edytować menu mobilne w Webflow

Proste i intuicyjne menu nawigacyjne to jeden z najważniejszych elementów projektu Twojej strony internetowej. Działa jak mapa, prowadząc odwiedzających poza stronę główną. Wraz z rosnącą liczbą osób korzystających z internetu na urządzeniach mobilnych, Twoja strona internetowa powinna również posiadać przyjazne dla urządzeń mobilnych menu nawigacyjne.

Na szczęście Webflow ułatwił dodanie zwijanego paska menu hamburgera, który usprawni Twoją witrynę mobilną. Czytaj dalej, aby dowiedzieć się, jak edytować to menu mobilne w Webflow.

Jak dodać pasek nawigacji

Menu hamburgerów 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:

1. Stuknij ikonę „+” u góry lewego panelu, aby otworzyć panel „Dodaj”.
   
2. Przewiń w dół do sekcji „Komponenty”.
   
3. Kliknij i przytrzymaj element „NavBar”.
   
4. Przeciągnij element do nagłówka strony.
   

Jak edytować menu mobilne

Po dodaniu paska nawigacyjnego do witryny istnieje kilka sposobów na dodanie stylu i osobowości do tego menu.

Jak dodać więcej linków do menu

Element paska nawigacyjnego zawiera przycisk menu i menu nawigacyjne, przy czym to drugie zawiera łącza nawigacyjne. Gdy dodasz go do swojego projektu, pojawi się kilka symboli zastępczych linków, które możesz usunąć lub edytować za pomocą linków do swojej witryny.

Wykonaj następujące kroki, aby dodać więcej łączy nawigacyjnych:

1. Kliknij dowolny element na pasku nawigacyjnym.
   
2. Przejdź do panelu „Ustawienia elementów” po prawej stronie.
   
3. Naciśnij ikonę koła zębatego, aby otworzyć „Ustawienia”.
   
4. Przewiń do sekcji „Ustawienia paska nawigacyjnego”.
   
5. Stuknij przycisk „Dodaj link”.
   

Teraz, gdy masz wystarczającą liczbę linków do wszystkich odpowiednich stron witryny, nadszedł czas, aby utworzyć rzeczywiste łączenie.

1. Wybierz łącze nawigacyjne.
2. Przejdź do panelu „Ustawienia elementów”.
   
3. Znajdź sekcję „Ustawienia łącza”.
   
4. Wprowadź wskazany 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 kliknie przycisk menu. Możesz wybrać jeden z trzech rodzajów animacji ujawniania:

• Rozwijane — domyślnie menu mobilne zostanie rozwinięte z paska nawigacyjnego, gdy użytkownik dotknie przycisku menu. Zajmie całą szerokość okna przeglądarki.
• Over Right – jeśli wybierzesz tę animację ujawniania, twoje menu mobilne pojawi się z prawej strony ekranu. To menu zajmie całą wysokość okna przeglądarki.
• Over Left – Ten typ menu jest identyczny z Over Right, z wyjątkiem tego, że menu nawigacyjne zostanie przesunięte z lewej strony ekranu.

Aby ustawić żądaną animację odsłonięcia, wykonaj następujące czynności:

1. Wybierz dowolny element na pasku nawigacyjnym.
   
2. Przejdź do panelu „Ustawienia elementów” po prawej stronie ekranu.
   
3. Stuknij ikonę koła zębatego, aby uruchomić „Ustawienia”.
   
4. Przejdź do sekcji „Ustawienia paska nawigacyjnego”.
   
5. Kliknij opcję „Typ”.
   
6. Wybierz preferowany styl z menu rozwijanego.
   

W sekcji „Ustawienia paska nawigacyjnego” możesz także kontrolować następujące elementy:

• Wygładzanie otwarcia: typ krzywej używany do animowania otwartego przejścia.
• Złagodzenie zamknięcia: typ krzywej używany do animowania przejścia zamknięcia.
• Czas trwania: jak długo trwa wyświetlenie menu.

Należy pamiętać, że czas trwania przejścia jest mierzony w milisekundach.

Jak zmienić styl menu

Webflow ułatwił stylizowanie dowolnej części paska nawigacyjnego, umożliwiając bezproblemowe dopasowanie mobilnego menu do projektu witryny.

Aby nadać styl przyciskowi menu, wykonaj następujące czynności:

1. Wybierz przycisk menu.
   
2. 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:

1. Przejdź do sekcji „Tła”.
   
2. Stuknij ikonę kropli koloru, aby otworzyć „Próbnik kolorów”.
   
3. Wybierz żądany kolor.
   

Jeśli chcesz zmienić rozmiar ikony hamburgera, wykonaj następujące kroki:

1. Przejdź do sekcji „Typografia”.
   
2. 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 dostosowywania przycisku menu, nie można go zastąpić elementem tekstowym ani niestandardowym obrazem.

Łatwa nawigacja mobilna

Projektując mobilne menu, chcesz jak najlepiej wykorzystać dość ograniczoną przestrzeń. Staraj się więc nie przepełniać menu opcjami, aby uniknąć dezorientacji odwiedzających. Upewnij się również, że opcje menu są krótkie, jasne i łatwe do odczytania.

Następnie możesz bawić się stylem i animacją menu, aby zainteresować odwiedzających na każdym kroku.

Czy próbowałeś dodać mobilne menu do swojej witryny? Ile opcji uwzględniłeś? Daj nam znać w sekcji komentarzy poniżej.