Webflow: Menu dla telefonów

Webflow 2020+

0:00Witaj kolejnej lekcji. Teraz zajmiemy się menu w widoku telefonowym.

0:04Czyli mamy. Tutaj hamburger menu i po kliknięciu na hamburger otwiera się tego

0:09typu menu. Jest ono zupełnie inne niż to co mamy dostępne teraz.

0:13Zobaczmy w tym widoku mobile landscape jak to się w ogóle prezentuje.

0:16Po kliknięciu na hamburger

0:18rozwija się i tutaj możemy jeszcze zwinąć czy rozwinąć services.

0:21No ale wygląda to zupełnie inaczej.

0:24No i z drugiej strony pytanie czy, aż tak uda nam się to menu dostosować.

0:27Może to być dość trudne w przypadku gdy

0:29skorzystaliśmy z gotowego komponentu być może pójdziemy na jakieś kompromisy ale na

0:33razie spróbujmy dostosować to na tyle, na ile możemy.

0:37Więc przede wszystkim zobaczmy ten default state.

0:40Mamy tutaj hamburger. On ma też jakiś cień.

0:43Chcemy przerobić na pewno trochę ten

0:45element czyli menu button mogę zaznaczyć jestem widoku mobile landscape i zawsze staram się

0:50pracować na widoku, a nie zaczynam nigdy od nowa.

0:52Mobile portrait dlaczego oszczędza sobie w ten sposób pracy.

0:55Po prostu tak to jest dziedziczone.

0:57Ten model co tutaj zmienia więc zawsze robimy tutaj.

1:00A jak już koniecznie trzeba to też w tym

1:02widoku mobile portrait ok teraz przestylujmy ten menu button.

1:06Przede wszystkim wygląda to tak, że mamy tutaj wypełnienie granatowe.

1:10Mamy shadow dwa, dwa, osiem, i przezroczystość trzydzieści pięć.

1:15Najpierw postawimy te właściwości czyli tak ustawiamy zaokrąglenie narożników może

1:19najpierw zmienia kolor tła na nasz midnight blue Teraz ustawiamy zaokrąglenie narożników.

1:26Może zamiast na dwadzieścia to po prostu na dwieście żeby to na pewno było kułeczko. Wejdę jeszcze

1:30do środka i zmienię kolor ikonki tak żeby było ją widać na kolor biały,

1:36a następnie wrócę do menu button i ustawimy tutaj jeszcze box shadow.

1:40To było po " X" Iksie i po "Y" igreku więc zostawimy

1:42sto trzydzieści pięć i zrobimy tutaj dwa, osiem z tego co pamiętam trzydzieści pięć oppacity .

1:50Ustawmy to na kolor czarny i teraz jest w porządku.

1:53Poza ikonką którą musimy podmienić więc z ikonką zrobimy tak, że dorzucimy tu

1:58obrazek. Image mogłem po prostu kliknąć albo możemy to zrobić tak

2:02wybieram obrazek . Dokładam tu obrazek hamburger z plików źródłowych do tej lekcji

2:07i na razie go ustawiam, a ikonki się zbędne po prostu.

2:11Teraz widzę że zrobiło się trochę jajko a

2:14to dlatego że pewnie ten image nie ma idealnie kwadratowych rozmiarów.

2:18Zobaczmy to jest dwadzieścia, szesnaście rzeczywiście więc

2:20po prostu będziemy musieli ustawić trochę inaczej paddingi szesnaście od góry i czternaście od boków.

2:27Czyli zróbmy to.

2:28Na tym elemencie tutaj zmieńmy to na szesnaście.

2:33A tutaj na czternaście.

2:37Wygląda ok teraz jak menu button przesunąć na dół.

2:40Dokładnie tak samo jak zrobiliśmy

2:42wcześniej z całą sekcją przypniemy go z pomocą pozycji fixed zamiast relativ w

2:47ustawiamy pozycję na fixed . Umieścimy to w prawym dolnym rogu.

2:51Natomiast nie przyciągają do samego dołu.

2:54Możemy zmienić te wartości.

2:56One są tutaj w procentach jeżeli klikniesz na takim polu i zaczniesz

3:00strzałka w górę zmieniać wartości i będziesz mógł zmieniać o jeden.

3:04Z shiftem strzałka w górę będzie zmieniała wartości o dziesięć.

3:07No dobrze a co z jednostkami bo mamy tutaj procenty.

3:10No i są to procenty szerokości i wysokości więc gdybyśmy tutaj ustawili dziesięć to

3:14ustawili dziesięć to naturalnie nie będzie to równo.

3:17No bo mamy zdecydowanie wyższy ekran niż szerszy, a to bierze relatywną wartość więc

3:21chcemy to zmienić i chcemy podać tą wartość piksela.

3:24Przykładowo gdybyśmy chcieli podać sześćdziesiąt

3:27pikseli możemy po prostu wpisać sześćdziesiąt px i na dowolne jednostki EM, REM-y,

3:32piksele, procenty. Możemy w ten sposób zamieniać.

3:35Z prawej strony moglibyśmy też zrobić sześćdziesiąt pikseli i możemy wpisać px albo kliknąć na

3:41jednostkę i zobaczyć jakie mamy tutaj jednostki do dyspozycji. Wpisujemy pikseli

3:45i to jest chyba za dużo więc robimy czterdzieści pikseli tutaj i czterdzieści pikseli od dołu.

3:51Teraz zbieramy command shift "P" podgląd.

3:53Szczerze mówiąc jak na to patrzę to nadal nie jest to idealnie okrągłe teraz się tym

3:56zajmiemy ale nie działa i na razie się rozwija.

3:59Zobaczymy co dalej z tym będziemy mogli zrobić.

4:01Command shift "P" wracam z trybu podglądu i zmienimy to tak żeby było na pewno dobrze.

4:07Czyli padding wyzerujemy.

4:08A może zrobimy to w ten sposób wyzeruje padding.

4:11Następnie szerokość i wysokość zrobie

4:13dokładnie tak jak jest tutaj czyli na czterdzieści osiem pikseli. Zróbmy czterdzieści osiem weight, czterdzieści osiem high.

4:20W ten sposób po prostu na tym elemencie i image ustawiamy sobie odpowiednio marginesy.

4:25Zdaje się że to było szesnaście.

4:27A tutaj było czternaście i teraz powinno być ok.

4:31Nie wiem jak zaokrągleniem.

4:32Możliwe że będzie trzeba dać

4:34np. tutaj trzynaście pikseli żeby było idealnie ale w porządku.

4:37Wydaje mi się że teraz to jest trochę bardziej kuloodporne rozwiązanie.

4:40No i mamy działający navbar ale nie do końca tak jak chcemy.

4:44Przejdźmy do jego właściwości.

4:46Klikamy w navbar i klikamy settings.

4:48Tutaj możemy zasymulować otwarcie takiego menu.

4:51Zobaczmy jakie mamy tu opcje.

4:53Przede wszystkim jest coś takiego jak dropdown

4:55czyli typ tego menu. Możemy zrobić coś takiego jak over right i over left.

5:01To jest coś co nam odpowiada.

5:03Fajnie to wygląda.

5:04A możemy też ustawić, że menu wypełnia całą wysokość strony co też jest ok.

5:11Następnie trzeba by się było zająć tym marginesem ten margines jest w zasadzie

5:14padding który pochodzi od sekcji natomiast żeby to dobrze sprawdzić to

5:19musimy jeszcze na chwilę ukryć sobie menu. Co się dzieje z logo.

5:23Znajduje się w kontenerze menu i

5:25teraz moglibyśmy ten cały kontener menu sprawić żeby to logo było jakoś w wycentrowane.

5:31Jak to zrobić.

5:32Jest akurat proste bo mamy tu flex-boxa, a więc wystarczy justify zmienić na

5:36takie wyrównanie. Natomiast będziemy chcieli zabrać z sekcji.

5:40Ten padding na pewno czyli będziemy chcieli go wyzerować po to żeby menu się zaczynał

5:45od samej góry i w tym momencie na logo możemy dodać jakiś margines czyli

5:50wybierzmy sobie brand, a następnie dodajemy na niego margines.

5:55Zobaczmy, jak to jest w projekcie.

5:58Zatem dwadzieścia cztery. Ok no to ustawiamy dwadzieścia cztery i teraz

6:03jest ok, a samo menu i w momencie gdy je rozwiniemy powinno też zachowywać się tak

6:08że jest dokładnie na całą wysokość od góry.

6:10Jak sprawić żeby było teraz na całą

6:12szerokość to znaczy samo navmenu i przejdźmy do jego ustawień.

6:16Jego właściwości. Szerokość możemy tutaj zmienić na sto procent i w tym momencie

6:21powinno już nam przykryć całą szerokość dokumentu.

6:24Przykryło nam też guzik ponieważ

6:27guzików warto teraz ustawić po prostu większą wartość z-Index niż mamy tutaj

6:33to w navmenu ma ustawioną pozycję absolut więc ma też do dyspozycji z-indeks.

6:37Nam zależy na tym żeby na menu button dorzucić z-indeks np.

6:41dziesięć i już będzie się tutaj pojawiał.

6:43Zobaczymy czy to w ogóle działa command shift "P".

6:45Warto to podejrzeć.

6:48I wygląda na to że działa dokładnie tak jak chcieliśmy.

6:51Wypada teraz tylko dostać te elementy.

6:53Proponuję zrobić krótką przerwę i w następnej lekcji stylujemy.