Czy chcesz wykazać się kreatywnością, tworząc rozwijalne lepkie menu po najechaniu myszą za pomocą Divi ?
W tym samouczku pokażemy, jak utworzyć rozwijalne lepkie menu po najechaniu myszą za pomocą od Divi's Mechanic Layout Pack .
Zajmiemy się dwoma różnymi przykładowymi projektami, które możesz odtworzyć od podstaw i zastosować do dowolnego typu Witryna internetowa które tworzysz!
Menu zostanie wyświetlone po najechaniu kursorem na pulpicie i aktywowane po kliknięciu na urządzeniach mobilnych.
Chodźmy!
badanie
Zanim zagłębimy się w ten samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.
Przykład 1
Komputer stacjonarny
Aplikacje mobilne
Pobierz DIVI teraz !!!
Przykład 2
Komputer stacjonarny
Aplikacje mobilne
Pobierz DIVI teraz !!!
Ogólne kroki
Wyłącz naprawioną nawigację
Uzyskaj dostęp 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.
Czytaj także: Jak tworzyć niestandardowe nakładki obrazów w Divi
Do tego będziesz musiał iść Divi >> Opcje motywu z pulpitu WordPress
Wyłącz naprawioną nawigację
Tam będziesz musiał dezaktywować „Stały pasek nawigacji” aby upewnić się, że u góry strony nie ma już wolnego miejsca.
- Naprawiono pasek nawigacji: 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 swojej strony następujące wiersze kodu CSS.
#main-header {
display: none;
}
Dodaj nową sekcję na końcu strony
Bez względu na przykład, który 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 zmień następujące ustawienia w zakładce Wnętrze pod opcją Rozstaw.
- Dopełnienie (góra i dół): 0px
Dodaj nową linię
Struktura kolumny
Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:
zaklejania
Nie dodając jeszcze żadnych modułów, otwórz ustawienia linii i zmień następujące ustawienia, w zakładce Wnętrze pod opcją Dobór
- Użyj niestandardowej szerokości rynny: TAK
- Szerokość rynny: 1
- Szerokość: 100%
- Maksymalna szerokość: 100%
rozstaw
Następnie usuń domyślnie całą górną i dolną wyściółkę, pod opcją Rozstaw.
- Dopełnienie (góra i dół): 0px
Główny element
Pozwalamy, aby cały wiersz przyklejał się do dołu naszej strony, dodając dwie proste linie kodu CSS do głównego elementu wiersza.
bottom: 0px;
position: fixed;
Indeks Z
I upewnimy się, że linia (i moduł Tekst, który dodamy w kolejnych krokach) pozostanie na wierzchu treść strony zwiększając indeks Z, Rozwiń opcję Pozycja.
- 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 Code do nowego wiersza. Kod CSS, który dodamy w tym module Code, pomoże nam osiągnąć efekt odsłaniający po najechaniu myszą.
Zobacz także: Jak utworzyć menu obracającego się koła po najechaniu kursorem w Divi
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>
Przykładowy projekt #1
Dodaj moduł tekstowy do kolumny
Dodaj treść
Teraz, gdy wykonaliśmy już wszystkie kroki, możemy zacząć koncentrować się na dwóch różnych przykładach projektowych, zaczynając od pierwszego!
Dodaj moduł Tekst do kolumny swojego wiersza. W obszarze treść, do wyświetlenia tekstu używamy stylu akapitowego „≡Menu”.
Następnie umieszczamy 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.
- Tło: #ffffff
Kolor tła po najechaniu myszą
Zmień ten kolor tła po najechaniu myszą.
- Tło (najechanie): rgba (255,255,255,0.83)
Tło gradientowe
A także dodaj domyślne tło gradientowe.
- Kolor po lewej: rgba (255,255,255,0)
- Właściwy kolor: #ffffff
- Pozycja prawa: 60%
Domyślne ustawienia tekstu
Kontynuuj przechodząc do zakładki Wnętrze i zmiana ustawień tekstu.
- Czcionka tekstu: Khand
- Waga czcionki: pogrubiona
- Kolor tekstu: #021827
- Rozmiar tekstu: 3vh
- Orientacja: Centrum
Wskaż ustawienia tekstu
Zmień niektóre ustawienia tekstu po najechaniu kursorem.
- Kolor tekstu (najechanie: rgba (255,255,255,0)
- Rozmiar tekstu (najechanie): 0vh
Ustawienia tekstu linku
Następnie przejdź do ustawień tekstu linku i zmień kolor tekstu linku.
- Kolor tekstu łącza: #000000
Lista wartości domyślnych (komputer)
Przełącz się na domyślne ustawienia tekstu listy i dostosuj je według własnego uznania. Upewnij się, że używasz „0px” jako rozmiaru tekstu w stanie domyślnym.
- Nieuporządkowana czcionka listy: Khand
- Styl czcionki listy: TT
- Wyrównanie tekstu listy: wyśrodkowane
- Nieuporządkowany kolor tekstu: rgba (255,255,255,0)
- Nieuporządkowany rozmiar tekstu listy: 0px
- Waga tekstu listy: 0em
- Pozycja stylu listy nieuporządkowanej: Wewnątrz
Ustawienia listy podręcznej
Następnie zmień niektóre wartości po najechaniu kursorem, aby umożliwić wyświetlanie elementów menu.
- Kolor tekstu listy (najechanie): #000000
- Rozmiar tekstu listy nieuporządkowanej (najechanie kursorem): 2vh
- Nieuporządkowana wysokość tekstu listy (najechanie): 2,1 em
Domyślne odstępy (komputer)
Następnie przejdź do ustawień odstępów (opcja Rozstaw) i nadaj kształt modułowi Text.
- Margines (lewy i prawy): 45vw (komputer), 39vw (tablet), 33vw (telefon)
- Wypełnienie (góra i dół): 2vw (komputer), 4vw (tablet), 6vw (telefon)
Odstępy najechania
Zmodyfikuj te same wartości po najechaniu myszą.
- Margines (lewy i prawy): 14vw
- Wyściółka (góra i dół): 8vw
Domyślna ramka (komputer)
Przejdź do ustawień obramowania i upewnij się, że każdy z zaokrąglonych rogów ma wartość „0px”.
Obramowanie po najechaniu
Włącz opcje najechania na zaokrąglone rogi i zmień wartości na lewy górny i prawy górny.
- U góry po lewej: 50vw
- U góry po prawej: 50vw
Pole cienia
Kontynuuj, nadając głębi modułowi za pomocą cienia pudełkowego. Dzięki temu menu nie pozostanie niezauważone na stronie.
- Siła rozmycia cieni w pudełku: 1000px
- Kolor cienia: rgba (0,0,0,0.68 XNUMX)
Klasa CSS
Do modułu dodajemy również klasę CSS.
- Klasa CSS: dt-menu
Przejścia
Na koniec zmniejsz czas trwania przejścia w ustawieniach przejść.
- Czas trwania przejścia: 100ms
Przykładowy projekt #2
Dodaj moduł tekstowy do kolumny
Dodaj treść
Przejdźmy do drugiego przykładu! Tutaj ponownie dodamy „≡Menu” za pomocą stylu tekstu akapitowego i elementów menu za pomocą nieuporządkowanej listy. Dodamy również link do każdej pozycji menu z osobna.
Domyślny kolor tła (komputer)
Przejdź do ustawień tła i zmień kolor tła.
- Tło: #ffffff
Kolor tła po najechaniu myszą
Zmień kolor tła po najechaniu myszą.
- Tło (najechanie): #f71535
Domyślne ustawienia tekstu (komputer)
Następnie przejdź do zakładki Wnętrze i wprowadź pewne zmiany w wyglądzie tekstu.
- Czcionka tekstu: Khand
- Waga czcionki: pogrubiona
- Kolor tekstu: #021827
- Rozmiar tekstu: 3vh
Umieszczaj ustawienia tekstu
Zmień te ustawienia po najechaniu myszą.
- Kolor tekstu (najechanie): rgba (255,255,255,0)
- Rozmiar tekstu (najechanie): 0vh
Ustawienia tekstu linku
Przejdź do ustawień tekstu i zmień kolor tekstu linku.
- Kolor tekstu linku: #ffffff
Domyślne ustawienia tekstu listy
Zmień także ustawienia projektu nieuporządkowanych elementów listy.
- Nieuporządkowana czcionka listy: Khand
- Styl czcionki nieuporządkowanej listy: TT
- Wyrównanie tekstu listy: do środka
- Kolor tekstu listy nieuporządkowanej: rgba (255,255,255,0)
- Rozmiar tekstu listy: 0px
- Nieuporządkowana wysokość linii listy: 0em
- Pozycja stylu listy nieuporządkowanej: Wewnątrz
Ustawienia listy podręcznej
I zmień niektóre z tych wartości po najechaniu kursorem.
- Kolor tekstu nieuporządkowanej listy: #ffffff
- Rozmiar tekstu listy: 2vh
- Nieuporządkowana wysokość linii listy: 2,1 em
Domyślne odstępy (komputer)
Następnie przejdź do ustawień odstępów i daj modułowi trochę miejsca.
- Margines (po prawej): 88 vw (komputer stacjonarny i tablet), 71 vw (telefon)
- Wypełnienie (góra): 6 vw (komputer)), 10 vw (tablet), 18 vw (telefon)
- Wypełnienie (u dołu): 4 vw (komputer), 10 vw (tablet), 12 vw (telefon)
- Lewa wyściółka: 1vw
Odstępy najechania
Zmień wartości po najechaniu.
- Margines (Prawy): 59vw
- Wyściółka: (góra)13vw, (dół)8vw, (lewo)1vw, (prawo)13vw
Granica
Aby stworzyć ten projekt kwadrantu, zmienimy prawą górną ramkę w ustawieniach obramowania.
- U góry po prawej: 50vw
Pole cienia
Dodamy również cień pudełka, aby stworzyć głębię na stronie.
- Siła rozmycia cieni w pudełku: 1000px
- Kolor cienia: rgba (0,0,0,0.68 XNUMX)
Klasa CSS
Następnie dodamy klasę CSS w zakładce Zaawansowane.
- Klasa CSS: dt-menu
Przejścia
I skróć czas trwania przejścia w zakładce Zaawansowane aby stworzyć szybkie przejście.
- Czas trwania przejścia: 100ms
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
Przykład nr 1
Biuro
Aplikacje mobilne
Pobierz DIVI teraz !!!
Przykład nr 2
Komputer stacjonarny
Aplikacje mobilne
Pobierz DIVI teraz !!!
Wnioski
W tym artykule pokazaliśmy, jak stworzyć rozwijalne lepkie menu za pomocą pakietu Divi Mechanic Layout Pack. Omówiliśmy dwa różne przykłady projektów, które można modyfikować i używać na dowolnym typie Witryna internetowa które tworzysz!
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów. Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
