Webflow: Gotowe menu

Webflow 2020+

0:00No to lecimy dalej. Ze stylowaniem nawigacji zaznaczyłem navabar po to żebym mógł

0:03w jego ustawieniach wybrać polecenie open menu.

0:06Trzeba to zmienić kilka rzeczy przede wszystkim.

0:08Zerknijmy. Jak wygląda struktura bo jeśli chodzi o dropdown to mamy trochę inną strukturę

0:13niż te wszystkie pozostałe navigation-link ale dropdown sam w sobie jest na tyle inteligentny, że

0:18zawiera ten sam element czyli też navigation-link.

0:21Tę klasę którą stworzyliśmy więc jeśli

0:23będziemy chcieli zmienić kolor to możemy zmienić to właśnie tutaj na kolor biały.

0:28Teraz całe nav-menu możemy zmienić jeśli chodzi o background kolor wybierzmy nasz midnight blue.

0:34Super i dodatkowo jeśli chodzi o nav-menu.

0:37Warto by było zrobić dodatkowe odstępy, dodatkowe marginesy.

0:41Zobaczmy, jak to wygląda u nas.

0:43Mamy jakieś czterdzieści sześć pikseli marginesu z lewej strony, zróbmy od razu.

0:48To nie będzie margines, tylko padding oczywiście.

0:50Zróbmy czterdzieści sześć z lewej ale może w sumie też od góry.

0:54Na razie zrobimy czterdzieści sześć z prawej strony.

0:57Spójrzmy jeszcze na projekt.

0:58No właśnie tutaj znajduje się jeszcze logo juice z prawej strony, w prawym górnym rogu więc

1:03powinniśmy je wrzucić jako osobny element do nav-menu. Wybieram w menu wybieram sobie

1:07DiV block i upewniam się, że jest umieszczone tutaj, a następnie wrzuce do

1:13niego obrazek image i zobaczymy czy już mam załadowane.

1:19Mamy już białe logo juice więc umieścimy je tutaj.

1:21Teraz zadbamy o pozycję tego elementu.

1:24Zaznaczam cały DiV block i w zasadzie gdybyśmy dla DiV blocka wybrali

1:29wyrównanie do prawej strony to zadziała dlatego, że to działa

1:32obrazki na tekst więc jest ok.

1:34DiV block trzy to nie jest dobra nazwa możemy dać menu logo alt czyli to drugie

1:40alternatywne logo i pamiętajmy jeszcze o tym, że jak cokolwiek dodajemy w HTML-u to

1:46oczywiście nie doda się tylko w widoku telefonowym.

1:48Ale da się we wszystkich innych.

1:50Więc tutaj musimy to logo usunąć czy zrobić to w tym widoku.

1:54Oczywiście że nie.

1:55Najlepiej zrobić to od razu tutaj ponieważ jeśli desktopie wybierzemy display na none

2:01to jest to dziedziczone automatycznie na tablet.

2:04Automatycznie jest dziedziczone tutaj

2:06aczkolwiek tu właśnie w tym widoku będziemy chcieli to logo odkryć więc

2:11wybiorę dla niego display block ponieważ całe menu w tym momencie jest ukryte.

2:15To będzie pojawiało się dopiero w momencie

2:18gdy klikniemy na guzik na hamburger wybieram polecenie open. Jeszcze spróbujmy

2:23zrobić tutaj jakiś sensowny margines czyli czterdzieści sześć pikseli na całym menu.

2:29Logo alt dajmy czterdzieści sześć

2:32pikseli marginesu na dole. Zaczyna wyglądać dokładnie tak jak w

2:37projekcie poza hamburgerem który trzeba teraz przestylować.

2:41Jeśli wybierzemy button zobaczysz, że on ma dodatkową klasę open w momencie gdy nie

2:45jest otwarte dostaje jakiś dodatkowy sygnał do tego żeby

2:49np. zmienić tutaj bo rzeczywiście to tło powinno się zmienić.

2:53Ale ja wybiorę dla niego background kolor na biały.

2:57Teraz trzeba jeszcze podmienić obrazek.

2:59Pewnie przyszedł czas na rewizję tego jak umieszczamy obrazki w webflow.

3:02Pokazałem Ci w jeden sposób. Jak wiesz po

3:04HTML-u może obrazki umieszczać na dwa sposoby albo znaczniku img albo możemy

3:09osadzać je jako background w CSS. Czy webflow można wogóle to zrobić w CSS bo jak

3:14na razie pracowaliśmy z samymi osadzonymi obrazkami.

3:17Otóż można to zrobić i jeśli przejdziemy

3:20na menu button to możemy przejść do jego właściwości backgrounds.

3:25Na razie kolor ale możemy dodać image and gradient to jest właśnie to jest wszystko

3:29CSS więc to będą właściwości CSS wybieram plus.

3:32Następnie mogę

3:33wybrać sobie obrazek wybieram polecenie choose image i w tym przypadku chce skorzystać z x,

3:39a nie mam go tutaj więc ładuje x plików źródłowych.

3:43My chcemy pozycjonowania go na środku, a

3:46następnie będziemy chcieli zmienić jego szerokość weight.

3:50Ponieważ to jest SVG.

3:53To będziemy mogli zrobić z tego dwadzieścia pixeli.

3:56Natomiast high zostawimy automatyczne ale na pewno chcemy zmienić

4:01sposób wyświetlania style na pojedyncze x które będzie widoczny.

4:07No i wygląda na to, że to jest dużo

4:10prostszy sposób na umieszczenie takiego elementu, a dodatkowo będziemy mogli bardzo

4:14łatwo z pomocą tej klasy odmienić hamburger na x a więc pozostaje nam pozbyć

4:19się hamburgera który rzuciliśmy wcześniej przełączyć się nav-barze na widok

4:24zamkniętego menu. Tutaj podłożyć czy wejdziemy do tej

4:29klasy menu button tutaj podłożyć kolejne tło. Zobaczymy image and gradient. Tutaj go nie

4:35ma, a wybierzemy obrazek i będziemy chcieli wskazać ten obrazek znowu na środku.

4:41Znowu nie powielamy tego i on miał zdaje

4:44się szerokość szesnastu pikseli zobaczmy albo dwudziestu chyba dwudziestu.

4:50Ok.

4:51Z jakiego powodu wyświetla się takie jajko.

4:54Szczerze mówiąc nie wiem.

4:55Mamy czterdzieści osiem na czterdzieści osiem i nie mamy żadnych paddingów

4:58Zobaczymy na podglądzie.

5:00No właśnie czasem webflow trochę płata figle jeśli chodzi o designer.

5:04Ale zobacz że jest teraz idealnie.

5:07Dokładnie tak jak chcieliśmy.

5:08Dodatkowo ten background w css się zmienia więc

5:12mamy to fajnie zrobione został nam ostatni element układanki czyli dopracowanie submenu.

5:17Zrobimy je ciut inaczej niż w projekcie

5:19dlatego że korzystamy z tego nav-bara bardzo fajnie nam to rozsuwa, a więc nie

5:23musimy robić jakiejś dodatkowej podstrony w menu która może nie być do końca

5:27intuicyjna, a dodatkowo mamy tam grida który znacznie ułatwi nam zadanie.

5:33Więc przejdźmy do dropdown i upewnijmy się

5:35że to menu dropdown jest otwarte żebyśmy mogli zacząć je zmieniać.

5:39Często jak widzimy takie coś. To jest załamka.

5:42Tyle roboty z tym będzie teraz żeby to

5:44dostosować ale warto zatrzymać się na chwilę i trochę pomyśleć.

5:47Mamy dropdwon który jest

5:50tym kontenera który zawiera wszystkie elementy możemy go do dostylować czyli możemy

5:53przykładowo kolor biały zmienić oppacity na zero albo nawet nie na zero tylko zostawić

5:58sobie na przykład wartość pięć bo całkiem fajnie to wygląda.

6:01No i kolejno mamy submenu kontener który zawiera nasz właściwy grid.

6:06Mogę teraz edytować grid, a grid ma to do

6:08siebie że ma kolumn i rzędy. Możemy w dowolnym miejscu

6:11np. w takim break poincie momencie zmienić go tak. Żeby wyświetlał tylko jedną kolumnę.

6:15Więc jeśli pozbędziemy się dowolnej

6:16kolumny stąd będziemy mieli jedną kolumnę i całe layout nam się naprawi.

6:21Spróbujmy to zatwierdzić.

6:22Done wygląda dużo dużo lepiej.

6:25Fajnie by było jeszcze rozciągnąć te elementy na całą szerokość no i to nas

6:30sprowadza do takiego zastanowienia się czy te submenu block w momencie gdy my go zmienimy.

6:35Przecież to jest symbol.

6:36Jeżeli wejdziemy w jego edycję.

6:38Mniejsza z tym że teraz wyjdę z menu.

6:41Tak niestety działa webflow ale jestem submenu block w edycji tego symbolu tylko

6:45powstaje pytanie. Czy jak ja w symbolu zmienię szerokość

6:49np. na sto procent tak jak to powinno być

6:50teraz to czy to mi się zmieni w responsownym break poincie czy zmieni mi się we

6:55wszystkich instancjach i również na przykład na desktopie.

6:58No i okazuje się, że webflow jest taki mądry, że zmieni nam to tylko tutaj command shift "P".

7:03Jeśli przejdę w tą rozdzielczość do

7:05desktopową services zobaczy jak to działa ok.

7:08A tutaj po rozwinięciu teraz będę miał szerokość sto procent.

7:13. Ostatnia rzecz do zrobienia to zmiana

7:15fontów które są wyświetlane musimy mieć kolor biały na tych fontach więc

7:19jeszcze raz wejdziemy w navbar. Jeszcze raz.

7:21No niestety sprowadza się to czasem do

7:24kilku kliknięć ale już jesteśmy teraz po zaznaczeniu takiego

7:29submenu block. Wejdziemy do środka do jego edycji następnie zaznaczmy sobie DiV

7:34block. Mamy tak heading i tekst możemy przejść do heading ,a następnie dostylować

7:39go w ten sposób że zmienimy kolor na kolor biały.

7:43Możemy nawet zmienić krój pisma na

7:45przykład na gm sans żeby trochę inaczej to wyglądało.

7:47Sub menu tekst zostawimy szary i spróbujmy to przetestować.

7:52Zobaczymy jak to menu się wyświetla teraz, też jest całkiem nieźle.

7:57Trochę jest taki dysonans pomiędzy wielkością tego tekstu, a wielkością tego

8:02tekstu spróbujmy odrobinę zmniejszyć jeszcze ten tekst w nagłówku.

8:06Czyli heading zrobimy sobie rozmiar może dwadzieścia.

8:13Spróbujemy to zatwierdzić i teraz już powinno być ok.

8:16Podejrzymy menu.

8:18Upewnię się też, że w tym widoku desktopowym.

8:22O jest jakiś błąd wyświetlania webflow.

8:25Jeszcze raz wejdziemy i wyjdziemy ok.

8:27Czasem tak się dzieje.

8:29A tutaj jest inny font i nie musieliśmy tego robić tak jak wcześniej

8:34wchodziliśmy do edycji nagłówka czyli kodów w headzie pisaliśmy nasze własne

8:38style żeby tutaj zrobić tryb hover. Dlaczego.

8:40Dlatego, że wtedy byliśmy w tym samym jakby

8:42break poincie, a teraz tworzymy osobne style dla osobnego reponsywnego breakpointu.

8:46Czyli mniej wygląda naprawdę super i zrobiliśmy je w kilka minut,

8:51a zobaczymy jak to wygląda na tej mniejszej rozdzielczości telefonowej.

8:55No i trzeba będzie tą mniejszą rozdzielczość trochę dostosować.

8:59Czyli tak. Przejdźmy jeszcze raz tutaj.

9:02Teraz w to miejsce do nav-bara.

9:06Jeśli otworzymy sobie teraz menu to dostosuje paddingi i w taki sposób, że zmienie

9:12je z lewej i z prawej strony czyli z altem. Zostawimy powiedzmy osiem pikseli.

9:17Spróbujmy teraz rozwinąć dropdown listę i zobaczyć czy ona już się mieści.

9:22Okazuje się, że chyba się mieści i wyglądałaby dodatkowo całkiem nieźle.

9:26Spróbujmy zobaczyć to w preview na widoku.

9:30Jest super.

9:31Jedyne co można było tutaj trochę

9:32dopracować to wyświetlanie logo juice już więc command shift "P".

9:36Szybkie przełączanie się w ten tryb

9:39navbara otwartego, logo zobaczmy i menu logo alt.

9:45Dokładnie tutaj teraz możemy zadecydować

9:46może tym razem wyświetlanie byśmy je na środku.

9:49Wydaje mi się że tak jest dużo lepiej i

9:51ewentualnie możemy trochę zmniejszyć ten margines.

9:54Przykładowo do dwudziestu ośmiu pikseli.

9:57I teraz wygląda naprawdę super.

9:59Tym samym nasze menu gotowe działa dobrze w

10:02widokach tabletowych, desktopowych we wszystkich które adresowaliśmy.

10:06Zrobiliśmy je tak jak w projekcie a nawet może trochę lepiej. Użyliśmy do tego

10:10pomocy ze strony webflow w postaci gotowego komponentu, gotowego dropdowna.

10:14Więc oczywiście w jakiś sposób wpłynęło to na to co możemy z tym dalej zrobić.

10:19Gdybyś chciał dokonywać bardzo dużo

10:20modyfikacji różnego typu tutaj okazałoby się, że może być tak że ta struktura

10:26HTML ma znaczenie że lepiej by było mieć element osobno.

10:29Tymczasem tutaj często są nałożone jakieś pozycjonowania relatywne

10:33absolutne na elementy i może nie ma takiej

10:36aż dużej kontroli nad tym żeby to szczegółowo dostosować ale zobacz, że nam

10:40udało się naprawdę mocno pozmieniać to menu i ono nadal jest ok.

10:43A nie musieliśmy korzystać z żadnych

10:45fixów, haków, dopisywać jakiejś ilości swojego kodu po prostu to działa.

10:50Więc mogę już powiedzieć, że na

10:51poświęciliśmy dosyć dużo czasu na to nie wiem może uzbierało się z tego godzina ale

10:56ja przez tą godzinę tłumaczyłem ci grida tłumaczyłem pozycjonowanie.

11:01Tłumaczyłem ukrywanie elementów responsywne breakpointy, gotowe komponenty, symbole po prostu

11:06wszystko naraz więc mamy bardzo bardzo dużo wiedzy która teraz pomoże nam w webflow.

11:11Robić kolejne sekcje i jeżeli uważasz, że to na razie idzie dość wolno no to

11:17będziesz zaskoczony tym jak szybko później nam pójdzie dokładanie kolejnych elementów

11:21układanki kolejnych sekcji naszej strony po prostu najpierw to wszystko musiałem ci

11:25wytłumaczyć, a będąc uzbrojonym w tą wiedzę będziemy mogli naprawdę bardzo szybko

11:30projektować kolejne sekcje podstronę czy inne elementy, naszej witryny to wszystko.

11:35Teraz do usłyszenia.