Czy chciałbyś stworzyć? menu przesuwane i push w DIVI która nie ukrywa elementów Twojej strony?
Duże nagłówki z mnóstwem linków nawigacyjnych mogą zajmować cenne miejsce na Twoim Witryna internetowa. Dlatego menu kontekstowe i wysuwane cieszą się coraz większą popularnością. W większości przypadków menu, które można przesuwać, pozostają nad treść strony, ukrywając niektóre elementy.
Jednak przesuwane menu push działa nieco inaczej. Efekt przesuwania push jest wyjątkowy, ponieważ menu przesuwa się z góry strony, jednocześnie naciskając przycisk treść od strony do dołu, aby nic nie było ukryte.
W tym samouczku pokażemy, jak utworzyć od podstaw przesuwane menu push za pomocą Divi Theme Builder.
Chodźmy!
badanie
Oto krótkie spojrzenie na przesuwane menu push, które będziemy tworzyć w tym samouczku.
Zbuduj przesuwane menu push za pomocą kreatora motywów Divi
Tworzenie nowego menu globalnego
Aby utworzyć menu, utworzymy nowy globalny nagłówek w Divi Theme Builder.
Przejdź do Divi > Kreator motywów.
Czytaj także: Jak stworzyć globalny nagłówek z formularzem logowania w DIVI
Następnie kliknij obszar „Dodaj globalny nagłówek” w pliku szablon strony internetowej domyślnie. Z rozwijanej listy wybierz „Buduj globalny nagłówek”.
Tworzenie menu push
Pierwszym elementem, który wspólnie zbudujemy, jest sekcja menu push. Ta sekcja będzie zawierać elementy menu, które będą przełączać się w górę iw dół po kliknięciu przycisku przełączania menu.
Ustawienia sekcji
Otwórz domyślne ustawienia sekcji i zaktualizuj ustawienia w następujący sposób:
Tło
- Tło: #1a1e36
Marża wewnętrzna
- Margines wewnętrzny: 0px góra, 0px dół
Klasa CSS
W zakładce Zaawansowane dodaj następującą klasę CSS, która będzie używana później w naszym kodzie JS.
- Klasa CSS: et-push-menu
Dodaj linię 1
Po zdefiniowaniu parametrów przekroju utwórz jednokolumnowy wiersz w przekroju.
Parametry linii 1
Następnie zaktualizuj parametry linii w następujący sposób:
zaklejania
- Użyj niestandardowej szerokości rynny: TAK
- Rozstaw kolumn: 1
- Maksymalna szerokość: 100%
- Maksymalna szerokość: 1 pikseli
rozstaw
- Marża: górna 3vh, dolna 3vh
Granica
- Szerokość dolnego obramowania: 1px
- Kolor dolnej krawędzi: rgba (255,255,255,0.2)
Niestandardowy CSS
Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do głównego elementu:
display:flex;
justify-content:center;
align-items:center;
Parametry kolumny
Po zdefiniowaniu ustawień wiersza otwórz ustawienia kolumn i dodaj niestandardowy fragment kodu CSS do głównego elementu:
display:flex;
align-items:center;
justify-content:center;Spowoduje to wyśrodkowanie treść kolumny zarówno w pionie, jak i w poziomie.
Dodaj przycisk
Jesteśmy teraz gotowi do rozpoczęcia dodawania naszych elementów menu za pomocą modułu Button. Zacznij od dodania nowego przycisku do kolumny.
Zobacz także nasz poradnik na temat: Jak stworzyć pionowe menu nawigacyjne w DIVI
Ustawienia przycisków
Następnie zaktualizuj ustawienia przycisków w następujący sposób:
Treść
- Tekst przycisku: projekt
- URL linku przycisku: # (zastąp później własnym niestandardowym adresem URL)
Styl
- Użyj niestandardowych stylów dla przycisku: TAK
- Kolor tekstu przycisku: #ffffff
- Szerokość obramowania przycisku: 0 pikseli
- Czcionka przycisku: Montserrat
- Przycisk miękkiego światła: ciężki
- Ikona przycisku: TAK
- Ikona przycisku: [Twój wybór]
- Pokaż tylko ikonę na przycisku najechania: NIE
- Umieszczenie ikony przycisku: po lewej
Zduplikowana kolumna
Teraz, aby utworzyć dodatkowe przyciski do menu, możemy powielić kolumnę. W tym projekcie zduplikujmy kolumnę 4 razy, aby uzyskać w sumie 5 pozycji menu/przycisków w rzędzie pięciu kolumn.
Dodaj linię 2
Po ukończeniu pierwszego wiersza jesteśmy gotowi do dodania kolejnego wiersza przycisków, których można użyć dla innego zestawu elementów menu.
Czytaj także: Jak dodać formularz kontaktowy do globalnego nagłówka w DIVI
Aby utworzyć następny wiersz, zduplikuj wiersz 1.
Usuń wszystkie kolumny oprócz jednej
Następnie usuń wszystkie kolumny oprócz jednej w zduplikowanym wierszu.
Parametry linii 2
Zaktualizuj parametry wiersza 2 w następujący sposób:
- Maksymalna szerokość: 1 pikseli
- Szerokość dolnego obramowania: 0px
Parametry kolumny
Następnie dodaj obramowanie do kolumny w następujący sposób:
- Szerokość prawego obramowania: 1px
- Kolor prawego obramowania: rgba (255,255,255,0.2)
Zaktualizuj ustawienia przycisku
Gdy kolumna ma prawe obramowanie, otwórz ustawienia przycisku i zaktualizuj następujące elementy:
- Rozmiar tekstu przycisku: 14px
- Przycisk miękkiego światła: pogrubiony tekst
- Odstępy między literami przycisków: 2 px
- Styl kopiowania przycisków: TT
- Ikona przycisku: NIE
Zduplikowana kolumna
Tak jak poprzednio, zduplikujmy kolumnę, aby utworzyć dodatkowe przyciski i kolumny. W tym projekcie zduplikujmy kolumnę 3 razy, aby uzyskać w sumie 4 przyciski w rzędzie 4 kolumn.
Usuń obramowanie z ostatniej kolumny
Ponieważ nie chcemy, aby ostatnia kolumna miała prawe obramowanie, otwórz ustawienia dla kolumny 4 i zaktualizuj szerokość obramowania:
- Szerokość prawego obramowania: 0px
Tworzenie głównego paska nagłówka
Następnie utworzymy główną sekcję paska nagłówka. Ten pasek nagłówka zawsze pozostanie widoczny i będzie zawierał logo naszej witryny, wezwanie do działania i przycisk przełączania menu.
Dodaj sekcję
Przed dodaniem nowej sekcji dobrze jest zaktualizować etykietę poprzedniej sekcji tak, aby zawierała „Sekcja menu Push”.
Zobacz także: Jak stworzyć globalny nagłówek za pomocą Theme Buildera w DIVI
Następnie utwórz nową sekcję poniżej pierwszej sekcji.
Ustawienia sekcji
Teraz zaktualizuj etykietę nowej sekcji, aby brzmiała „Sekcja nagłówka”. Następnie otwórz ustawienia sekcji i zaktualizuj następujące elementy:
rozstaw
- Margines wewnętrzny: 0px góra, 0px dół
Dodaj wiersz
Po ustawieniu dopełnienia sekcji dodaj do sekcji trzykolumnowy wiersz.
Ustawienia linii
Otwórz parametr wiersza i zaktualizuj następujące elementy:
zaklejania
- Szerokość rynny: 1
- Szerokość: 90%
- Wysokość: 70px
rozstaw
- Margines wewnętrzny: 0px góra, 0px dół
Niestandardowy CSS
Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do głównego elementu:
display:flex;
align-items:center;Spowoduje to pionowe wyśrodkowanie kolumn w rzędzie.
Dodaj przycisk
Aby utworzyć główne wezwanie do działania w sekcji nagłówka, możemy użyć przycisku drugiego rzędu w górnej sekcji. Skopiuj przycisk z kolumny 1 wiersza 2 górnej sekcji i wklej go do kolumny 1 wiersza sekcji nagłówka.
Zaktualizuj ustawienia przycisku
Następnie otwórz ustawienia zduplikowanych przycisków i zaktualizuj następujące elementy:
- Tekst przycisku: Rejestracja
- Rozmiar tekstu przycisku: 14px
- Kolor tekstu przycisku: #1a1e36
- Ikona przycisku: TAK
- Ikona przycisku: Strzałka w prawo (patrz zrzut ekranu)
Dodaj logo
W środkowej kolumnie dodaj moduł obrazu. W ten sposób dynamicznie dodamy logo serwisu.
Najedź kursorem na obszar obrazu i kliknij ikonę „Użyj zawartości dynamicznej”. Z menu rozwijanego wybierz „Logo witryny”.
Ustawienia obrazu
Następnie na karcie Styl zaktualizuj następujące elementy:
- Wyrównanie obrazu: wyśrodkowane
- Maksymalna wysokość: 55 pikseli
Dodaj niestandardową ikonę hamburgera
Moglibyśmy użyć zwykłej ikony w module układu jako przełącznika menu, ale w tym samouczku pomyślałem, że dodamy niestandardowy przełącznik menu z fajnym efektem przejścia.
Dodaj moduł tekstowy
Do stworzenia ikony menu użyjemy modułu tekstowego z niestandardowym kodem HTML, który będzie stylizowany zewnętrznym CSS.
Śmiało i dodaj moduł tekstowy do kolumny 3.
Dodaj kod HTML do modułu tekstowego
Następnie dodaj następujący kod HTML do zawartości modułu tekstowego:
<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>
Tło
Nadaj modułowi tekstowemu kolor tła:
- Kolor tła: #1a1e36
Formatowanie tekstu
Następnie zaktualizuj ustawienia stylu w następujący sposób:
- Szerokość: 70 piksele
- Wyrównanie modułu: w prawo
- Wysokość: 70px
- Margines wewnętrzny: 20px góra, 20px dół, 16px lewy, 16px prawy
Klasa CSS
W zakładce Zaawansowane dodaj następującą klasę CSS:
- Klasa CSS: et-push-menu-toggle
Dodaj kod
Aby przywrócić funkcjonalność, której potrzebujemy, aby to wysuwane menu działało, dodamy nasz niestandardowy CSS i jQuery do modułu kodu.
Śmiało i dodaj moduł Kod do kolumny 3 poniżej modułu Tekst.
Następnie wklej następujący kod (Uwaga: zapakuj ten kod w tagi styl aby działał poprawnie):
.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
opacity: 1;
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}
.line-2 {
top: 10px;
}
.line-3 {
top: 20px;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}
Następnie skopiuj i wklej ten kod bezpośrednio poniżej (ważne: zapakuj ten kod w tagi skryptu, aby działał poprawnie):
(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );
Zaktualizuj tekst przycisku i linki
Na koniec możemy zaktualizować wszystkie przyciski o niezbędny tekst przycisku i adresy URL linków.
Zrobione !
Zapisz ustawienia
Nie zapomnij zapisać układu i ustawień Theme Buildera.
Ostateczny wynik
Aby zobaczyć ostateczny wynik, sprawdź stronę na swoim strona internetowa.
Uczyń przyklejony
Jeśli chcesz mieć „przyklejoną” wersję menu, po prostu dodaj następujący fragment kodu CSS do modułu kodu (między tagami stylu):
header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
overflow-y: visible !important;
}
Oto wynik.
Pobierz DIVI teraz !!!
Wnioski
Mamy nadzieję, że spodoba Ci się to przesuwane menu push. Efekt jest wyjątkowy i otwiera drzwi do bardziej kreatywnych nagłówków. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz jednak również skonsultować się 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.
...
