Webflow: Podstawy menu

Webflow 2020+

0:00Część. Witaj. W kolejnej lekcji. Zgodnie z obietnicą zajmiemy się menu.

0:03I tutaj mam nadzieję że zaczniesz już dostrzegać ten ukryty potencjał webflow ponieważ

0:07webflow poza prostymi elementami które możemy dodawać zawiera też trochę bardziej

0:11złożone komponenty m.in. w sekcji komponent.

0:15Znajdziemy tutaj navbar

0:17light-boxa , slidera czy tabu.

0:18Możemy dodać navbar i po prostu przeciągnąć go na naszą górną sekcję.

0:22Co się teraz stało.

0:24Dodała specjalna sekcja navbar.

0:25Na czym ona tak naprawdę jest. Możemy zobaczyć.

0:28Nie ma nałożonych żadnych właściwości jeśli chodzi o layout.

0:31Display jest ustawiony na block wchodzimy głębiej i widzimy kontener.

0:35Kontener ma marginesy z lewej i z prawej

0:37strony ustawiony w jakiś magiczny sposób na dwieście czterdzieści dziewięć i pół dopasowane do

0:42naszego rozmiaru ale będziemy oczywiście mogli sobie zmienić.

0:45W środku znajduje się brand czyli miejsce na nasze logo.

0:49Następnie w nav-menu.

0:50Czyli menu które zawiera obecnie trzy elementy.

0:53Są to trzy nav-linki tak zwane i menu button.

0:56Gdzie jest ten menu button.

0:58Okazuje się, że menu button jest tylko w

0:59rozdzielczości od tabletowej w dół. Znajduje się tutaj.

1:03My możemy zarządzić tym we właściwościach navbara jeśli przejdziemy do properties.

1:07Od jakiej rozdzielczości się ten menu button on będzie pojawiał.

1:11Na przykład możemy to zmienić mobile-portret

1:12zostawimy sobie w rozdzielczości tabletowej.

1:15I gdybyśmy chcieli podejrzeć to command

1:17Shift "P" . Zobaczyć jak to działa to rozdzielczości tabletowej.

1:20Rzeczywiście mamy takie menu i teraz można kliknąć i się automatycznie rozwija.

1:24To wszystko naturalnie będzie działać też na telefonach.

1:27A można to ale nie na desktopie.

1:29A można to wszystko ładnie oscylować.

1:31Teraz powiem ci ja przede wszystkim przejdźmy do sekcji brand, a następnie

1:34umieszczamy tu nasze logo "J" na klawiaturze czyli assety.

1:37Muszę przeciągnąć assety z plików

1:38źródłowych do tej lekcji czyli dwa warianty logo i teraz użyjemy tego właśnie.

1:42Logo juice które przeciągne tutaj i opuszcze. Właśnie na brand i zobacz że zostało ono

1:47dodane jako obrazek pod spodem mamy jednak pliki z svg, więc będzie elegancko skalował

1:51się na różne rozdzielczości to co możemy też zmienić to w nav-linki

1:55są to na razie zwykłe linki które mogą prowadzić do dowolnej

1:59np. podstrony naszej witryny albo pod jakiś adres URL.

2:01Nam jednak zależy na tym aby jeden z tych nav-linków zgodnie z projektem tak jak mamy

2:06tutaj zawierał drop down czyli ten link services.

2:10Jak to zrobić jeśli wybierzemy " A " mamy tutaj możliwość dodania czegoś takiego jak

2:14dropdown i właśnie ten dropdown. Powinniśmy dodać właśnie gdzieś tutaj w tym miejscu

2:19jak widzisz został on automatycznie umieszczony wewnątrz naszego menu.

2:23My będziemy mogli zmienić to na services.

2:27Kolejno będziemy musieli zmienić te elementy. Czyli Why juice?

2:33Najpierw sobie zaznaczam. Przekleje te teksty kolejno mamy block i ostatnią sekcję

2:39get a quote też przeniosłem.

2:41Jeśli zerkniemy w style, a one nie mają jeszcze żadnych klas. No i bardzo dobrze

2:44skopiuje sobie taki nav-link i wkleje jeszcze jeden. Będzie to nasz numer telefonu czyli

2:49możemy skopiować numer telefonu i stworzyć go też jako nav-link natomiast

2:53zrobimy go trochę inaczej konstrukcyjnie zaraz dodamy jeszcze odpowiednią ikonę.

2:58Natomiast teraz nasze menu zaczyna już przybierać odpowiedni kształt, a my będziemy chcieli.

3:02Przykładowo chcemy zmienić kolor tych

3:04linków jeśli ich wybiorę w nav-link okaże się że kolor teoretycznie jest dziedziczony z

3:08body all pages ale znowu mamy taką sytuację jak poprzednio.

3:11Jest jeszcze jakiś jeden HTML, tag select

3:13czy all link który gdzieś tam jest po drodze moglibyśmy go zmodyfikować.

3:17Ale z drugiej strony jak wejdziesz przykładowo w dropdown to droga ma nieco

3:20inną strukturę, a mianowicie jest tutaj tekst block który będziemy musieli zmienić

3:24więc zamiast tego możemy command return i powiedzieć że chcemy navigation links

3:30oscylować sobie jedną klasą.

3:33No i teraz możemy spróbować to zmienić.

3:36Zmienimy kolor na inny później wklejmy dobrą wartość szesnatkową.

3:39No teraz ta klasa ta super klasa. A nam to ładnie nadpisała.

3:43Teraz nadajemy tę klasę kolejnym elementom czyli wybierzmy tutaj na nav-links

3:49Następny element command return nav-links również go z tak formatujemy

3:56tutaj zostawimy na razie, a services ten tekst też

3:59chcemy sformułować na niebiesko. Ale strzałke też zobaczmy czy cały dropdown toogle.

4:04Można by było nadać mu klasę navigator links czy to zadziała.

4:07Okazuje się że tak jak najbardziej

4:09zadziała to teraz ten ostatni element on jest trochę bardziej złożony bo ma

4:14np. ikonkę z telefonem i jakieś dodatkowe tło więc sam nav-link nam nie wystarczy.

4:17Będziemy musieli jeszcze tutaj mieć image no i prawdopodobnie warto by było zamknąć

4:21to jeszcze w jakimś dodatkowym elemencie HTML czyli wybierzmy

4:25np. zwykły div-block możemy kliknąć raz po to żeby został wstawiony.

4:29W zasadzie prawie w odpowiednie miejsce chodzi o to żeby teraz w nav-link wrzucić do

4:33środka do tego div blocka i to też jest ok, a następnie jeszcze będziemy potrzebowali

4:38w nim obrazek czyli wybierzmy image i kliknij na nim raz.

4:42Również powinien wylecieć w odpowiednie

4:43miejsce przenieśmy go tylko wyżej w hierarchii jeśli chodzi o właściwości div block

4:47to w zasadzie wystarczyłoby żebyśmy zmienili jego

4:50właściwość na inline block i już powinien wskoczyć nam w dobre miejsce do menu.

4:54Kolejno dorzućmy tu obrazek klikamy dwa razy

4:56następnie na polecenie choise image i teraz uploadować tutaj phone icon, svg.

5:02Jest plikach źródłowych automatycznie powinna tutaj podstawić. Dobra świetnie.

5:07No i teraz jeszcze takiej jeżeli chodzi o

5:09sam div block zmieńmy dla niego tło background zmienimy na kolor biały zaokrągleniu

5:14krawędzi czyli border radius ustawimy

5:17np. Na pięćdziesiąt albo sto to powinno wystarczyć bo

5:19chcę żeby były całkiem zaokrąglone jeżeli chodzi o wysokość tego elementu.

5:24Spróbujmy pobrać ją i ta wysokość będzie stała.

5:26Pobieramy ją stąd będzie miała czterdzieści cztery piksele.

5:29Czyli przejdźmy do wysokości i with and weight piszemy na sztywno czterdzieści cztery piksele.

5:36Mamy jeszcze mały problem z pozycjonowanie

5:38tych elementów to prawda ale mamy też problem

5:40np. pozycjonowanie logo juice.

5:42Generalnie powinniśmy zająć się tym aby

5:43sam kontener był zdecydowanie lepiej pozycjonowany.

5:46No i w sumie ten kontener który zawiera wszystkie elementy.

5:48Menu to jest nic innego jak ten kontener

5:51content który ma zawierać wszystkie pozostałe rzeczy tak bo on pozwala na

5:56centrowanie, a także pozwala na uzyskanie odpowiedniego marginesu więc

6:01dlaczego nie wejść do kontenera, a następnie przejść do jego klasy.

6:05Commander return i ustawić ją na content. Zobaczmy co się stanie.

6:08Wygląda że stało się dokładnie to co planowaliśmy i wszystko jest ok.

6:11Możemy tu dorzucić

6:13np. kolejną combo klasę menu i pracować na tym przykładowo zmienić display na flex .

6:17Spróbować te elementy rozróżnić od lewej do prawej.

6:20Jednak problem kontentu cały czas będzie taki że tak jak wspomniałem jest to taki

6:24magiczny kontener od webflow który stara się wszystko nam centrować.

6:27No i w niektórych sytuacjach jest to jak najbardziej fajne i przydatne.

6:30Tak jak mieliśmy tutaj również będzie nasze nagłówkach.

6:33Ale nie jest przydatne w momencie gdy mamy

6:36takie menu które chcemy rozstrzelić od skrajnie lewej do skrajnej prawej krawędzi

6:40więc co te tę zmianę i tak zostawie sobie content.

6:43On jest spoko żeby był właśnie takim ogólnym kontenerem.

6:46Natomiast dodam po prostu jeszcze jeden kontener po drodze.

6:49I może to być zwykłe DiV block który będzie

6:51nam trzymał całą zawartość czyli przerzuca go tutaj w kontencie w to miejsce, a

6:56następnie wrzuce do niego najpierw cały brand, a później jeszcze całe nav-menu.

7:01Do tego DiV-a właśnie tylko upewnijmy się

7:03że kolejność jest odpowiednia na menu button. Na razie zostawmy.

7:06Jeszcze później nim zarządzimy natomiast

7:08teraz chodzi mi o te dwa elementy brand i nav-menu.

7:11No i w tym div blocku będzie trzeba command

7:13return powiedzieć że to jest właśnie menu. To menu sobie zrobimy w taki sposób, że

7:18będzie to flex box. Ten flex box pozwoli nam teraz wyrównać po pierwsze elementy w

7:24pionie, a po drugie pozwoli nam użyć tej opcji space between tak żeby były te

7:29elementy przyklejone do lewej i prawej krawędzi.

7:33To jest dokładnie to o co nam chodzi i

7:35został zostaną do zrobienia jeszcze ten nieszczęsny nav-link który tutaj jest.

7:39Natomiast nic też nie stoi na przeszkodzie żeby w nav-menu również jako flex child dziecko

7:44samo miało ustawione display na flex to niewiele tutaj zmieni poza tym, że możemy

7:48ustawić wycentrować ten element teraz w pionie i sam DiV block.

7:53Jeśli jego rodzic jest też

7:55jest on z flex-child-em to też może mieć ustawione w tym momencie

7:59flex layout i też możemy dzięki temu wyrównać elementy w pionie.

8:04Przejdźmy teraz do obrazka i ustaw na

8:06nim odpowiedni margines ale najpierw nadamy mu klase phone ikon. Teraz ustawiamy szesnaście pikseli z

8:14prawej strony margines sprawdziłem to designie i podobnie marginesy będziemy

8:18chcieli ustawić dlatego w nav-linku skąd te marginesy bierze ten padding.

8:22Pewnie ze wszystkich linków więc znów command return i zróbmy tutaj

8:26phone number.

8:28A następnie zresetujmy te paddingi możemy zresetować z wciśniętym shiftem.

8:32Shiftem będziemy zmieniali wszystkie cztery wartości, a przypominam ze altem będziemy

8:37zmieniali tylko tę wartość czyli ustalimy to na szesnaście czy może ustawimy na dziesięć,

8:44a tu ustawiamy na szesnaście tak jak ma telefon i teraz wygląda to dużo lepiej.

8:49Ostatnia rzecz którą możemy zrobić na tym DiV blocku to ustawić cień czyli box shadow.

8:54Jest to cień na dole, a my powinniśmy ustawić wartości na trzydzieści, trzydzieści.

8:59Jeśli chodzi o przezroczystość to zrobimy tutaj dziesięć.

9:04Dobra wygląda całkiem spoko przejdźmy do samego nav-bara.

9:08Musimy zmienić na nim tło command return i nadajemy mu klasę na navbar.

9:13A następnie ustawiamy dla tła na razie przezroczystość na zero.

9:17Być może później będziemy chcieli jeszcze to zmienić.

9:19Wydaje mi się że jest ok. Command shift "P"

9:21nam podejrzeć to tak jakbyśmy mieli w przeglądarce i poza tym cieniem który być

9:26może będę chciał dostosować jest prawie ok.

9:28Jedna rzecz którą jeszcze musimy zrobić to powinniśmy mieć czterdzieści sześć pikseli marginesu od

9:34górnej krawędzi strony więc ten margines command shift "P" powrócimy.

9:38Ten margines powinien się znaleźć na całej

9:42w zasadzie naszej sekcji albo na całym navbarze może navbar po prostu odsłonimy o czterdzieści sześć

9:47pikseli od góry i teraz jest dokładnie tak jak w projekcie.

9:51Rzecz jasna nasze menu jeszcze nie działa

9:53i nie wiemy jak się skanuje ale to wszystko zrobimy w kolejnej lekcji.