Jak utworzyć rozszerzające się lepkie menu po najechaniu kursorem za pomocą Divi

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowania Divi, pokażemy, jak stworzyć rozszerzające się lepkie menu po najechaniu myszą za pomocą pakietu Divi's Mechanic Layout Pack. Zajmiemy się dwoma różnymi przykładami projektów, które możesz odtworzyć od podstaw i zastosować do dowolnego rodzaju tworzonej witryny! Menu zostanie wyświetlone po najechaniu kursorem na rozmiary ekranu komputera stacjonarnego i aktywowane po kliknięciu na urządzeniach mobilnych.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Przykład 1

Pulpit

mobilny

Przykład #2

Pulpit

mobilny

Ogólne kroki

Wyłącz ustaloną nawigację

Przejdź do opcji motywu Divi

Zaczniemy od kilku ogólnych kroków. Te kroki są takie same dla obu przykładów i są niezbędne do osiągnięcia pożądanego rezultatu.

Jeśli planujesz używać rozwijanego przyklejonego menu u dołu strony, możesz pominąć główny pasek menu u góry. Aby to zrobić, musisz przejść do opcji motywu Divi.

Wyłącz ustaloną nawigację

Tam będziesz chciał wyłączyć opcję stałego paska nawigacyjnego, aby upewnić się, że u góry strony nie pozostanie żadne miejsce.

• Naprawiono pasek nawigacyjny: wyłączony

Ukryj główny pasek menu na stronie

Otwórz ustawienia strony

Przejdź do strony, do której chcesz dodać rozwijane menu przyklejone, i otwórz ustawienia strony.

Dodaj niestandardowy CSS

Ukryj menu główne, dodając do strony następujące wiersze kodu CSS.

#main-header {
display: none;
}

Dodaj nową sekcję na końcu strony

Niezależnie od tego, który przykład chcesz odtworzyć, niektóre podstawowe kroki pozostają takie same. Pierwszym krokiem jest dodanie zwykłej sekcji na dole strony.

Rozstaw

Otwórz ustawienia sekcji i usuń wszystkie niestandardowe górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj nowy wiersz

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć całą szerokość ekranu.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Główny element

Pozwalamy, aby cały wiersz przyklejał się do dołu naszej strony, dodając dwa pojedyncze wiersze kodu CSS do głównego elementu wiersza.

bottom: 0px;
position: fixed;

Indeks Z

I upewnimy się, że wiersz (i moduł tekstowy, który dodamy w kolejnych krokach) pozostanie nad całą zawartością strony, zwiększając indeks Z w ustawieniach widoczności wiersza.

• Indeks Z: 99

Dodaj moduł kodu do kolumny

Dodaj kod CSS między tagami stylu

Ostatnią częścią ogólnych kroków jest dodanie modułu kodu do nowego wiersza. Kod CSS, który dodamy w tym module kodu, pomoże nam osiągnąć efekt odsłaniający po najechaniu myszą. Wklej następujące wiersze kodu CSS do modułu:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Odtwórz przykład nr 1

Dodaj moduł tekstowy do kolumny

Dodaj zawartość

Teraz, gdy przeszliśmy przez wszystkie kroki, możemy zacząć koncentrować się na dwóch różnych przykładach projektowych, zaczynając od pierwszego! Dodaj moduł tekstowy do kolumny swojego wiersza. W polu treści używamy stylu akapitu, aby wyświetlić kopię „≡ Menu”. Umieszczamy zatem wszystkie pozycje menu na nieuporządkowanej liście. Dodamy również link do każdego tytułu strony z osobna.

Domyślny kolor tła

Przejdź do ustawień tła modułu i zmień kolor tła.

• Kolor tła: #ffffff

Wskaż kolor tła

Zmodyfikuj ten kolor tła po najechaniu myszą.

• Kolor tła: rgba (255,255,255,0.83)

Tło gradientowe

Dodaj również domyślne tło gradientowe.

• Kolor 1: rgba (255,255,255,0)
• Kolor 2: #ffffff
• Pozycja końcowa: 60%

Domyślne ustawienia tekstu

Kontynuuj, przechodząc do zakładki projektu i modyfikując ustawienia tekstu.

• Czcionka tekstu: Khand
• Grubość czcionki tekstu: pogrubiona
• Kolor tekstu: #021827
• Rozmiar tekstu: 3vh
• Orientacja tekstu: Środek

Ustawienia tekstu najechania kursorem

Zmodyfikuj niektóre ustawienia tekstu po najechaniu myszą.

• Kolor tekstu: rgba (255,255,255,0)
• Rozmiar tekstu: 0vh

Ustawienia tekstu łącza

Następnie przejdź do ustawień tekstu linku i zmień kolor tekstu linku.

• Kolor tekstu łącza: #000000

Domyślne ustawienia tekstu listy

Przejdź do domyślnych ustawień tekstu listy i wybierz dowolny styl. Upewnij się, że używasz „0px” jako rozmiaru tekstu w stanie domyślnym.

• Nieuporządkowana czcionka listy: Khand
• Styl czcionki nieuporządkowanej listy: wielkie litery
• Nieuporządkowane wyrównanie tekstu listy: do środka
• Kolor tekstu listy nieuporządkowanej: rgba (255,255,255,0)
• Nieuporządkowany rozmiar tekstu listy: 0px
• Nieuporządkowana wysokość linii listy: 0em
• Pozycja stylu listy nieuporządkowanej: Wewnątrz

Ustawienia tekstu listy podręcznej

Następnie zmodyfikuj niektóre wartości po najechaniu kursorem, aby umożliwić wyświetlenie elementów menu.

• Kolor tekstu listy nieuporządkowanej: #000000
• Rozmiar tekstu listy nieuporządkowanej: 2vh
• Nieuporządkowana wysokość linii: 2,1 em

Domyślne odstępy

Przejdź do ustawień odstępów i nadaj kształt modułowi tekstowemu.

• Lewy margines: 45vw (komputer stacjonarny), 39vw (tablet), 33vw (telefon)
• Prawy margines: 45vw (komputer stacjonarny), 39vw (tablet), 33vw (telefon)
• Górna wyściółka: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)
• Dolna wyściółka: 2vw (komputer), 4vw (tablet), 6vw (telefon)

Odstępy najechania

Zmodyfikuj te same wartości po najechaniu myszą.

• Lewy margines: 14vw
• Prawy margines: 14vw
• Górna wyściółka: 8vw
• Dolna wyściółka: 8vw

Domyślna ramka

Przejdź do ustawień obramowania i upewnij się, że każdy z zaokrąglonych rogów ma wartość „0px”.

Wskaż granicę

Włącz opcje najechania na zaokrąglone rogi i zmień górne lewe i prawe górne wartości.

• U góry po lewej: 50vw
• U góry po prawej: 50vw

Cień Pudełka

Kontynuuj, nadając modułowi trochę głębi za pomocą cienia pudełkowego. Dzięki temu menu nie pozostanie niezauważone na stronie.

• Siła rozmycia cieni w pudełku: 1000 ms
• Kolor cienia: rgba(0,0,0,0.68)

Klasa CSS

Do modułu dodajemy również klasę CSS.

• Klasa CSS: dt-menu

Przejścia

Na koniec skróć czas trwania przejścia w ustawieniach przejść.

• Czas trwania przejścia: 100 ms

Odtwórz przykład nr 2

Dodaj moduł tekstowy do kolumny

Dodaj zawartość

Przejdźmy do drugiego przykładu! W tym miejscu ponownie dodamy '≡ Menu' używając stylu tekstu akapitowego, a pozycje menu używając nieuporządkowanej listy. Dodamy również link do każdego z elementów menu z osobna.

Domyślny kolor tła

Przejdź do ustawień tła i zmień kolor tła.

• Kolor tła: #ffffff

Wskaż kolor tła

Zmodyfikuj kolor tła po najechaniu myszą.

• Kolor tła: #f71535

Domyślne ustawienia tekstu

Następnie przejdź do zakładki projektu i wprowadź zmiany w wyglądzie kopii akapitu.

• Czcionka tekstu: Khand
• Kolor tekstu: #021827
• Rozmiar tekstu: 3vh

Ustawienia tekstu najechania kursorem

Zmodyfikuj te ustawienia po najechaniu myszą.

• Kolor tekstu: rgba (255,255,255,0)
• Rozmiar tekstu: 0vh

Ustawienia tekstu łącza

Przejdź do ustawień tekstu i zmień kolor tekstu linku.

• Kolor tekstu linku: #ffffff

Domyślne ustawienia tekstu listy

Zmień również ustawienia projektu nieuporządkowanych elementów listy.

• Nieuporządkowana czcionka listy: Khand
• Styl czcionki nieuporządkowanej listy: wielkie litery
• Nieuporządkowane wyrównanie tekstu listy: do środka
• Kolor tekstu listy nieuporządkowanej: rgba (255,255,255,0)
• Nieuporządkowany rozmiar tekstu listy: 0px
• Nieuporządkowana wysokość linii listy: 0em
• Pozycja stylu listy nieuporządkowanej: Wewnątrz

Ustawienia tekstu listy podręcznej

I zmodyfikuj niektóre z tych wartości po najechaniu myszą.

• Kolor tekstu nieuporządkowanej listy: #ffffff
• Rozmiar tekstu listy nieuporządkowanej: 2vh
• Nieuporządkowana wysokość linii listy: 2,1 em

Domyślne odstępy

Następnie przejdź do ustawień odstępów i daj modułowi trochę miejsca.

• Prawy margines: 88vw (komputer stacjonarny i tablet), 71vw (telefon)
• Górna wyściółka: 6vw (komputer stacjonarny), 10vw (tablet), 18vw (telefon)
• Dolna wyściółka: 4vw (komputer stacjonarny), 10vw (tablet), 12vw (telefon)
• Lewa wyściółka: 1vw

Odstępy najechania

Zmodyfikuj wartości po najechaniu myszą.

• Prawy margines: 59vw
• Górna wyściółka: 13vw
• Dolna wyściółka: 8vw
• Lewa wyściółka: 1vw
• Prawa wyściółka: 13vw

Granica

Aby stworzyć ten projekt ćwiartki koła, zmienimy prawą górną ramkę w ustawieniach obramowania.

• U góry po prawej: 50vw

Cień Pudełka

Dodamy również cień pudełka, aby nadać stronie głębię.

• Siła rozmycia cieni w pudełku: 1000px
• Kolor cienia: rgba(0,0,0,0.68)

Klasa CSS

Następnie dodamy klasę CSS na karcie Zaawansowane.

• Klasa CSS: dt-menu

Przejścia

I skróć czas trwania przejścia w zakładce Zaawansowane, aby utworzyć szybkie przejście.

• Czas trwania przejścia: 100 ms

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Przykład 1

Pulpit

mobilny

Przykład #2

Pulpit

mobilny

Końcowe przemyślenia

W tym poście pokazaliśmy, jak stworzyć rozszerzające się lepkie menu za pomocą pakietu Divi's Mechanic Layout Pack. Zajęliśmy się dwoma różnymi przykładami projektów, które możesz odtworzyć i wykorzystać na dowolnym rodzaju tworzonej witryny! Mamy nadzieję, że podoba Ci się ta ciągła inicjatywa projektowa Divi, w której każdego tygodnia staramy się dodawać coś dodatkowego do Twojego zestawu narzędzi projektowych. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.