Webflow: Dokowanie menu

Webflow 2020+

0:00Witaj w kolejnej lekcji w której zajmiemy się menu.

0:02Jego osadzenie na stronie, a także wariantami responsowymi.

0:05To, że korzystamy z gotowego komponentu navbar niesie ze sobą szereg korzyści

0:09m.in. już w tej wersji tabletowej nawet mamy rozwijane menu. Ono działa i jest super.

0:15Natomiast z drugiej strony jest zawsze

0:17używanie tego typu gotowców. Ma też pewne ograniczenia musimy zawsze znaleźć pewien

0:22rozsądny kompromis pomiędzy tym jak długo i jak daleko chcemy pójść z edytowaniem.

0:26Jak bardzo customowy chcemy zrobić taki element.

0:29Jeżeli chcemy zrobić zupełnie coś innego no to nie ma sensu korzystać z navbara.

0:34Lepiej byłoby przygotować te wszystkie sekcje osobno, rozwijaną sekcje

0:39ukrywać je. Odkrywać w momencie gdy ktoś

0:41np. najedzie czy pokazywać w inny sposób.

0:43Natomiast korzystając navbara znacznie przyspieszamy sobie pracę ale też tak jak

0:47wspomniałem są z tym związane jakieś ograniczenia.

0:50Zobaczymy przykładowo czy dla wariantu responsywnego będziemy w stanie zrobić tak menu bo

0:54tutaj na dole mamy ten hamburger menu oraz stan otwarty. Wygląda zupełnie inaczej.

1:00No ok to zabierzmy się do pracy.

1:02Pierwsza rzecz którą chciałbym zrobić to osadzić menu w ten sposób aby nie

1:06skrolowało się razem ze stroną tylko pozycję fixed.

1:09Powstaje pytanie teraz który element

1:11chcemy osadzić jako fixed czy content czy navabar, czy całą sekcję.

1:15I tu odpowiedź na to pytanie jest takie, że będziemy chcieli na pewno zrobić jakieś

1:19tło w momencie gdy strona sobie jeździ pod spodem.

1:22Nie chcemy, żeby na te obrazki na napisy itd. więc chcemy

1:26zrobić dla takiej sekcji tło czyli tło powinno być jak największe więc będziemy

1:30operować na section. Natomiast do navbar dodaliśmy wcześniej margines od góry

1:36i teraz gdybyśmy to tak zostawili to strona, przejeżdżając sobie podmenu.

1:41Nawet jeśli to zrobimy tło byłaby widoczna w tym miejscu.

1:44Dlatego musimy trochę zmodyfikować naszą strategię i zrobimy także dla navbar.

1:49Wyzerujemy ten margines ten sposób,

1:52a zamiast tego ustawiamy sobie padding dla sekcji.

1:55W ten sposób uzyskaliśmy identyczny efekt ale będziemy mogli całą sekcję wypełnić

2:01Teraz tłem. Takim jak mamy przy body no i przy okazji jak już jesteśmy w background

2:07to żeby re-używać tego koloru w webflow.

2:10Można kliknąć na małą ikonkę plusa.

2:13W ten sposób dodamy ten kolor. Ja go nazwę light blue.

2:18Do tak zwanych swatch-y będziemy mogli bardzo łatwo zawsze tego koloru użyć to

2:22samo możemy sobie zrobić z naszym kolorem głównym czyli midi night blue

2:26całkiem fajnie nazwał go webflow. Zostawiam to nazwę i teraz możemy przejść z powrotem do

2:32sekcji i spowodować że background color będzie ustawiony na nasz kolor light blue.

2:38Ok to kolor ustawiony ale najważniejsza jest dla nas pozycja.

2:41Pozycję zmieniamy static na pozycję fixed teraz ponieważ jest to kurs podstawowy.

2:46Mam nadzieję że pamiętasz to wszystko z HTML - a ale krótko.

2:51To charakteryzuje static to domyślny pozycja dla wszystkich elementów normalny obieg dokumentu.

2:55Normalnie ustawiamy rozmiary szerokość itd. To gdzie robi się ciekawie.

3:00To relativ, absolut ponieważ są to dwie

3:03opcje które pozwolą nam pozycjonować taki element i przesunąć go

3:08np. od lewej, prawej, górnej i dolnej krawędzi w kontekście jego rodzica ale nie dowolnego

3:13rodzica tylko pierwszego rodzica który zawiera też nadaną taką właściwość.

3:19Relativ albo absolut jeżeli takiego rodzica nie ma wtedy będziemy mogli

3:23przesuwać i pozycjonowanie względem całego body dokumentu.

3:27Czym się różni relativ od absolut.

3:29Otóż tym, że gdy nałożymy relativ to

3:32tak jakby element pozostał w normalnym obiegu. Układzie dokumentu czyli inne

3:37elementy w dokumencie myślą że on tam dalej jest jakby zajmuje tą swoją

3:41przestrzeń, a my względem tej przestrzeni możemy go przesuwać.

3:44Natomiast pozycjonowanie absolutnym on

3:46wypada z normalnego obiegu dokumentu czyli tak jakbyśmy wycięli go nożyczkami inne

3:51elementy po prostu zaczną to miejsce które on zajmował wypełniać, a

3:55my będziemy mogli go pozycjonowanie wtedy absolutnie. Pozycja fixed jest dość

4:00podobna do pozycji absolutnej ponieważ też powoduje, że taki element wyciągamy z

4:05normalnego obiegu dokumentu tak jakbyśmy go wycięli.

4:08Natomiast jego dodatkową cechą jest to, że taki element zostanie zadokowany i będzie

4:14zawsze widoczny w tym samym miejscu w oknie przeglądarki

4:17np. dwadzieścia pikseli od góry albo dwadzieścia procent

4:19od góry i możemy tę opcję teraz ustawić czyli wybieramy fixed.

4:23I teraz co się stało.

4:25Zgodnie z tym co powiedziałem.

4:26Pozostałe elementy skoczyły na jego miejsce bo już nie widzę tego elementu.

4:30On jest jakby wycięty z normalnego obiegu dokumentu, a my teraz musimy ustawić

4:34jak on ma się zachowywać względem górnej, lewej, dolnej, prawej krawędzi.

4:38Czego.

4:38Otóż body ponieważ pozycjonujemy teraz relatywnie do całego dokumentu.

4:44Więc to co możemy zrobić łatwo w webflow lub po prostu wybrać jedną z tych opcji

4:48np. gdy chcemy zablokować do lewej górnej krawędzi albo prawej dolnej krawędzi.

4:51Ale możemy też zadokować to do góry wtedy

4:55zobacz jak zmienią się te opcje zero, zero, zero i auto czyli dostaniemy.

5:00Przy ściągnięcie tego elementu automatycznie

5:02rozściągniemy go na całą szerokość od lewej do prawej i przeciągniemy do góry.

5:07No i wygląda na to, że to jest dokładnie to czego oczekiwaliśmy.

5:11To co musimy poprawić to jest druga sekcja która wskoczyła została przyciągnięta.

5:14Teraz do góry bo nie widzi już tego menu nie. Jest wyciągnięta z obiegu dokumentu więc dla

5:18tej sekcji musimy ustawić od góry margines.

5:20Ja to zrobię np. na sto dwadzieścia pikseli na razie może później

5:23jeszcze dokładniej dostosujemy ale mając już takie coś zobaczę. Ja mogę skrolować.

5:28I rzeczywiście menu zostaje w dobrym

5:31miejscu jeżeli command "P" wybiera sobie podgląd. To teraz mamy i tło pod menu.

5:36To widać nie będą te elementy przysłaniały nam menu będą wchodziły pod

5:41spód i dlaczego one wchodzą akurat pod spód.

5:44Jest to zdeterminowane w tym momencie nie

5:47właściwościami z-indeks o który pewnie słyszałeś będziemy jeszcze później

5:50zmieniać ale po prostu kolejnością w dokumencie.

5:52Ten element jest wyżej w strukturze w

5:54hierarchii ten element jest niżej będzie. Wjeżdżał pod spód.

5:57No i super czyli mamy zrobione menu które jest zadokowane.

6:00Dodatkowo w wariancie tabletowym to co chciałbym zrobić to dlatego navbara.

6:05Chciałbym jeszcze zostawić go w tym trybie czyli nie włączać tutaj hamburgera.

6:10Zmieści się tutaj spokojnie.

6:11Nasze menu oraz rozwijane menu.

6:13Jedyne co musimy zrobić to przejść do właściwości samego navbara.

6:18Po jego oznaczeniu, a następnie zmienić to tak aby to menu ikon pojawiło się

6:23dopiero w widoku phone czyli dopiero w mniejszej rozdzielczości.

6:26Tu jest teraz trochę mniej miejsca ale

6:29zobacz że w tym widoku tabletowym po prostu ukrywamy numer telefonu więc tak

6:33powinniśmy też zrobić zaznacz my cały DiV block który jest z numerem telefonu.

6:37Przejdźmy do jego właściwości.

6:39DiV block to może nie jest jakaś idealna nazwa czyli zmienimy nazwę tej klasy na phone, a

6:44następnie wybierzmy dla niej display none zostanie to ukryte w tym widoku, a to co

6:49jeszcze powinniśmy zrobić to zmienić dla całej sekcji.

6:52Ten margines od góry.

6:54Warto by było to sprawdzić oczywiście z designem.

6:56Jak duży jest margines zatem jest dwadzieścia cztery

6:59więc możemy zmienić to na dwadzieścia cztery. Teraz jest w porządku.

7:04Spróbujmy teraz rozwinąć dropdown mogę to zrobić tutaj przez sekcję open menu

7:08wygląda. Ok. Pamiętaj proszę że jest to najmniejsza z tych rozdzielczości które

7:13musimy obsłużyć w tym break poincie . Dalej będzie dotyczył tylko większych

7:18rozdzielczości czyli będziemy szli w górę i tutaj też jest ok.

7:21Wszystkie sekcje są widoczne myślę, że jak najbardziej może tak zostać.

7:24Natomiast w tym widoku telefonowym już oczywiście będziemy mieli.

7:29Hamburger menu tym jak go dostosować.

7:31Zajmiemy się w kolejnej lekcji. Do usłyszenia.