Webflow: Tworzymy Menu

0:00Ok pracujemy dalej ze stajni GM teraz

0:02przyszedł czas na nawigację więc kilka prostych rzeczy w nawigacji i zobaczymy

0:07jak wygląda struktura mamy logo link i tutaj znajduje się logo i miecz.

0:11Przejdźmy może do tego obrazka a następnie wybierz polecenie Ripley.

0:15Tutaj mamy te przykładowe obrazki które zostały przygotowane przez łapał.

0:19Ja chciałbym z naszych plików źródłowych

0:21grać tutaj dwa obrazki będzie to kart oraz logo.

0:24Logo to obrazek który właśnie wykorzystamy tutaj.

0:28Wybierzmy szerokość 120 pikseli i teraz już wygląda to dużo lepiej.

0:33Czyli mamy logo w.

0:34Teraz potrzebujemy jeszcze zmienić style dla nawigacji.

0:38Mamy poszczególne nawigacje na których chciałbym dostosować w ten sposób

0:42że przejdziemy do ustawień a następnie zmienimy front które są ustawione tutaj na

0:5012 a my zrobimy rozmiar 16 i wysokość linii 24.

0:55Poza tym użyjemy naszego poprzedniego koloru w zasadzie ten kolor.

0:59Chciałbym dodać do resetu w ten sposób będę mógł z niego

1:03łatwo korzystać wybieram polecenie Create i teraz na jeszcze raz na nawigację mnie

1:09wybierzemy sobie kolor już teraz prezentów piszemy do nawigacji.

1:14Wybiorę dekorację na brak tutaj jeszcze liter sparing z autem klik po to żeby

1:20zresetować oraz wybiorę brak opcji kapitana.

1:23Można też kliknąć

1:25żeby to zresetować teraz już wygląda to dużo lepiej jeśli chodzi o kolor

1:30to jest on zastosowany ale mamy opaski które musimy podnieść do stu.

1:35Teraz wygląda dużo lepiej.

1:37Zmienimy teraz na blok chociaż nie

1:39będziemy bloga robić ale niech to tutaj zostanie.

1:42Natomiast chciałbym dodać jeszcze jeden element z nawigacji wybieram.

1:45A przejdźmy do ostatniej sekcji czyli

1:48komponent i stąd wybieram drop down a następnie go dodaje wrzucam na samą górę.

1:52I to będzie rozwijane menu z produktami więc jako drobny tekst piszemy produkt.

1:57I teraz do środka na razie może jeszcze skierujemy jakąś wstępnie tzn.

2:01Zmienimy datę na 500 medium i upewnij się że kolor to jest nasz

2:06więc teraz wygląda to dokładnie tak jak pozostałe linki wewnątrz tej

2:10listy znajdują się linki i nie widać na razie musimy wejść do

2:14ustawień a następnie wybrać polecenie Open menu po to żeby ją pokazać.

2:18Chciałbym usunąć dwa drop down linki a do

2:21samej drobną listy dodać jeszcze jeden element i będzie to element sekcji CMS

2:26czyli Collection lista która wyświetli nam wszystkie kategorie.

2:30Chciałbym żeby dynamicznie były lokowane tutaj kategorie czyli Dress Blues Jam itd.

2:36I teraz chciałbym do środka do tego Collection list rapera

2:40dodać sobie do Collection drop down link czyli do środka.

2:45Spróbujemy go wrzucić i w ten sposób

2:47wyświetlają się wszystkie linki a oczywiście powinienem zadbać o to aby

2:51linka były dynamiczne dane czyli w ustawieniach

2:54linku wybieram opcję w link set X gdzie będziemy chcieli pobrać tekst z kategorii

3:00i wyświetlić nazwę kategorii adres bazy itd.

3:04Jest w porządku natomiast jeśli chodzi o to gdzie ma kierować ten link to zamiast

3:09pobierać URL z kategorii tam nie mamy żadnego pola typu url to wybieramy opcję

3:13Collection Page i będziemy link do obecnej strony kategorii czyli kary

3:18kategorii i teraz jest to skonfigurować jak najbardziej poprawnie.

3:22Ja tylko jeszcze wejdę do Collection list

3:23rapera a następnie upewnij się że po pierwsze jest to dobrze posegregowane

3:28czyli będziemy startowali po nazwie i alfabetycznie od A do Z.

3:32Wybieram polecenie Save

3:34ale dodatkowo chciałbym usunąć ten link do nowości czyli wybieram filarach.

3:38Nam wybierzemy Das NOT i go New.

3:42I w ten sposób wyrzuciłem ten ostatni element.

3:45Chciałbym żeby nowości znalazły się w

3:47jakiejś osobnej zakładce a tutaj były ładnie uporządkowane produkty.

3:51Teraz jeszcze możemy na samą

3:52listę trochę sterować dosłownie kilka zmian możemy wprowadzić np.

3:57zaokrąglone krawędzie na 8 i może dodać jeszcze jakiś box Shadow.

4:02Delikatne zrobimy tutaj 180 stopni a

4:05następnie zrobimy ustawienie 4 piksele 8 i rozmycie czy wielkość zostawimy na zero

4:13kolor zmienimy tak żeby był przezroczysty powiedzmy na około sześciu siedmiu

4:19procentach Alpha i teraz jest w porządku może jeszcze na pojedynczych.

4:22W sumie na tej liście jeszcze fajnie by

4:25było zmienić kolor na kolor biały a na pojedynczych elementach dopasować je

4:30trochę do linków czyli po prostu może found it zmienimy na 500 medium.

4:35Upewnij się też że kolor właściwie jest wybrany czyli deblu.

4:39Moglibyśmy jeszcze zamontować do tego jakiś stan Hoover gdzie przykładowo

4:42zmienimy trochę kolor czyli delikatnie go zaczniemy i dodatkowo jeszcze chciałbym

4:48się upewnić że tutaj kursor kursor będzie chyba ok.

4:52Jeszcze przejdźmy do podglądu zobaczmy.

4:54A ja jestem cały czas w tym trybie Hoover

4:56z pustym nie mogę tego sprawdzić muszę go zamknąć i teraz.

5:00Kursor zmieńmy asekuracyjnie na Inter bo zwykle jest źle i teraz już wygląda to OK.

5:07Mamy taki fajny stan Howard i po

5:09kliknięciu oczywiście to się będzie rozwijać będzie kierować do dynamicznych

5:13stron produktów również z kategorii również.

5:16Ich nazwy są wyświetlane dynamicznie.

5:18A gdybyśmy chcieli rozmaite rzeczy zmieniać to Pamiętaj proszę o tym że sam

5:22drop down też ma jeszcze kilka ciekawych ustawień.

5:25Przykładowo możemy otwierać to Aniu możemy zrobić jakiś diler czy jakieś opóźnienie w

5:31zamykaniu możemy sobie trochę figurował jeszcze

5:35aczkolwiek nam wystarczy tak jak zostawimy teraz w zasadzie mamy gotowe.

5:40Poza koszykiem czyli bardzo istotnym

5:42komponent który został tutaj automatycznie dodany przez łatwy i sam koszyk chciałbym

5:46omówić w osobnej lekcji w której teraz serdecznie zapraszam.