Jak utworzyć menu przesuwania w dół w Divi

Duże nagłówki z dużą ilością linków nawigacyjnych mogą zająć dużo cennych nieruchomości w Twojej witrynie (szczególnie w części strony widocznej na ekranie). Dlatego coraz popularniejsze stają się wyskakujące i wsuwane menu. W większości przypadków menu, które można wyświetlić, znajdują się nad zawartością strony, ukrywając pewne elementy. Jednak przesuwane menu push działa nieco inaczej. Efekt przesuwania jest wyjątkowy, ponieważ menu przesuwa się od góry strony, jednocześnie przesuwając zawartość strony w dół, dzięki czemu nic nie jest ukryte.

W tym samouczku pokażemy, jak zbudować od podstaw przesuwane menu push za pomocą Divi Theme Builder. Po zbudowaniu menu staje się wszechstronnym narzędziem dla wszystkich typów aplikacji, ponieważ będziesz mógł wypełnić sekcję dowolną treścią, którą chcesz za pomocą Divi Builder.

Weźmy się za to!

zapowiedź

Oto krótkie spojrzenie na przesuwane menu push, które zbudujemy w tym samouczku.

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

Aby zaimportować układ sekcji do Divi Theme Builder, przejdź do Divi Theme Builder.

Kliknij ikonę przenoszenia.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu szablon sekcji pojawi się w Divi Theme Builder.

Przejdźmy do samouczka, dobrze?

Tworzenie przesuwanego menu Push za pomocą Divi Theme Builder

Tworzenie nowego menu globalnego

Aby stworzyć menu, zbudujemy nowy globalny nagłówek w Divi Theme Builder.

Przejdź do Divi > Kreator motywów.

Następnie kliknij obszar „Dodaj globalny nagłówek” w domyślnym szablonie witryny. Z menu wybierz „Zbuduj globalny nagłówek”.

Spowoduje to przejście do edytora globalnego układu nagłówka.

Po przejściu do edytora układu globalnego nagłówka wybierz opcję „Buduj od podstaw.

Tworzenie menu Push

Pierwszym elementem, który wspólnie zbudujemy, jest sekcja menu push. W tej sekcji znajdują się elementy menu, które będą przełączać się w dół i w górę po kliknięciu przycisku przełączania menu.

Ustawienia sekcji

Otwórz ustawienia sekcji domyślnej i zaktualizuj ustawienia w następujący sposób:

Tło

• Kolor tła: #1a1e36

Wyściółka

• Padding: 0px na górze, 0px na dole

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

Niestandardowy CSS (tablet)

Następnie musimy dostosować wysokość sekcji na urządzeniu mobilnym, używając obliczonej wysokości, aby pomieścić główny pasek nagłówka, który dodamy. Zasadniczo sprawi to, że sekcja zajmie całą wysokość okna na urządzeniu mobilnym, gdy użytkownik przełączy otwarte menu.

Dodaj następujący niestandardowy kod CSS tylko do elementu głównego na tablecie:

height: calc(100vh - 70px);
overflow:scroll !important;
overscroll-behavior: contain;

Dodaj wiersz 1

Po zakończeniu ustawień przekroju utwórz jednokolumnowy wiersz w obrębie przekroju.

Ustawienia rzędu 1

Następnie zaktualizuj ustawienia wiersza w następujący sposób:

Projekt

• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 1280 pikseli
• Wyściółka: 3vh na górze, 3vh na dole
• Szerokość dolnej granicy: 1px
• Kolor dolnej krawędzi: rgba (255,255,255,0.2)

niestandardowe CSS

Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do głównego elementu:

Pod Pulpitem…

display:flex;
justify-content:center;
align-items:center;

Pod tabletem…

display:flex;
flex-direction:column;
align-items:center;

Ustawienia kolumny

Po zakończeniu ustawień wiersza otwórz ustawienia kolumny i dodaj niestandardowy fragment kodu CSS do głównego elementu:

display:flex;
align-items:center;
justify-content:center;

Spowoduje to wyśrodkowanie zawartości kolumny zarówno w pionie, jak iw poziomie.

Dodaj przycisk

Teraz jesteśmy gotowi do rozpoczęcia dodawania naszych elementów menu za pomocą modułów przycisków. Zacznij od dodania nowego przycisku do kolumny.

Ustawienia przycisków

Następnie zaktualizuj ustawienia przycisków w następujący sposób:

Zadowolony

• Tekst przycisku: projekt
• URL linku przycisku: # (zastąp go później własnym niestandardowym adresem URL)

Projekt

• Kolor tekstu przycisku: #ffffff
• Szerokość obramowania przycisku: 0px
• Czcionka przycisku: Montserrat
• Grubość czcionki przycisku: Ciężka
• Ikona przycisku: [Twój wybór]
• Umieszczenie ikony przycisku: w lewo

Powielanie kolumny

Teraz, aby utworzyć dodatkowe przyciski do menu, możemy powielić kolumnę. W tym projekcie zduplikujmy kolumnę 4 razy, aby otrzymać w sumie 5 pozycji/przycisków menu. w pięciokolumnowym rzędzie.

Dodaj wiersz 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.

Aby utworzyć następny wiersz, zduplikuj wiersz 1.

Usuń wszystkie kolumny z wyjątkiem jednej

Następnie usuń wszystkie kolumny z wyjątkiem jednej w zduplikowanym wierszu.

Ustawienia rzędu 2

Zaktualizuj ustawienia wiersza 2 w następujący sposób:

• Maksymalna szerokość: 1080px
• Szerokość dolnej krawędzi: 0px

Ustawienia 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)

Aktualizuj ustawienia przycisku

Gdy kolumna ma prawe obramowanie, otwórz ustawienia przycisku i zaktualizuj następujące elementy:

• Rozmiar tekstu przycisku: 14px
• Odstępy między przyciskami: 2px
• Grubość czcionki przycisku: pół pogrubiona
• Styl czcionki przycisku: TT
• Pokaż ikonę przycisku: NIE

Powiel kolumnę

Tak jak poprzednio, zduplikujmy kolumnę, aby utworzyć dodatkowe przyciski i kolumny. W tym projekcie zduplikujmy kolumnę 3 razy, aby otrzymać łącznie 4 przyciski w 4-kolumnowym rzędzie.

Usuwanie obramowania 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 sekcję dla głównego paska nagłówka. Ten pasek nagłówka pozostanie zawsze widoczny i będzie zawierał logo naszej witryny, wezwanie do działania i przycisk przełączania menu.

Dodaj sekcję

Zanim dodamy nową sekcję, dobrze jest zaktualizować etykietę poprzedniej sekcji, aby przeczytać „Sekcja menu Push”.

Następnie utwórz nową sekcję poniżej pierwszej sekcji.

Ustawienia sekcji

Teraz zaktualizuj etykietę w nowej sekcji, aby brzmiała „Sekcja nagłówka”. Następnie otwórz ustawienia sekcji i zaktualizuj następujące elementy:

Wyściółka

• Padding: 0px na górze, 0px na dole

Dodaj wiersz

Po dodaniu wypełnienia sekcji dodaj do sekcji wiersz z trzema kolumnami.

Ustawienia wiersza

Otwórz ustawienie wiersza i zaktualizuj następujące elementy:

Rozmiary

• Szerokość rynny: 1
• Szerokość: 90%
• Wysokość: 70px

Wyściółka

• Wypełnienie: Wypełnienie: 0px na górze, 0px na dole

niestandardowe CSS

Na karcie Zaawansowane dodaj następujący niestandardowy kod CSS do elementu głównego:

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 z drugiego wiersza w górnej sekcji. Skopiuj przycisk z kolumny 1 w wierszu 2 górnej sekcji i wklej go w kolumnie 1 wiersza w sekcji nagłówka.

Aktualizuj ustawienia przycisku

Następnie otwórz ustawienia przycisku duplikatu i zaktualizuj następujące elementy:

• Tekst przycisku: Zarejestruj się
• Rozmiar tekstu przycisku: 14px
• Kolor tekstu przycisku: #1a1e36
• Pokaż ikonę 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 pole obrazu i kliknij ikonę "Użyj zawartości dynamicznej". Z menu wybierz „Logo witryny”.

Ustawienia obrazu

Następnie w zakładce projekt zaktualizuj następujące elementy:

• Wyrównanie obrazu: środek
• Maksymalna wysokość: 55px

Dodaj niestandardową ikonę hamburgera

Moglibyśmy użyć zwykłej ikony za pośrednictwem modułu notatek jako naszego przełącznika menu, ale w tym samouczku pomyślałem, że dodamy niestandardowy przełącznik menu z fajnym efektem przejścia.

Dodaj moduł tekstowy

Aby utworzyć ikonę menu, użyjemy modułu tekstowego z niestandardowym kodem HTML, który będzie stylizowany za pomocą zewnętrznego CSS.

Śmiało i dodaj moduł tekstowy do kolumny 3.

Dodaj moduł tekstowy HTML

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

Projekt tekstu

Następnie zaktualizuj ustawienia projektu w następujący sposób:

• Szerokość: 70px
• Wyrównanie modułu: prawo
• Wysokość: 70px
• Padding: 20px góra, 20px dół, 16px po lewej, 16px po prawej

Klasa CSS

W zakładce Zaawansowane dodaj następującą klasę CSS:

• Klasa CSS: et-push-menu-toggle

Dodaj kod

Aby zapewnić funkcjonalność, której potrzebujemy do działania tego przesuwanego menu push, dodamy nasz niestandardowy CSS i jQuery do modułu kodu.

Śmiało i dodaj moduł kodu do kolumny 3 pod modułem tekstowym.

Następnie wklej następujący kod (ważne: zapakuj ten kod w tagi stylu, 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 pod nim (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 );

Aktualizuj tekst przycisku i linki

Na koniec możemy zaktualizować wszystkie przyciski o niezbędny tekst przycisku i adresy URL linków.

Otóż ​​to!

Zapisz ustawienia

Nie zapomnij zapisać układu i ustawień kreatora motywów.

Ostateczny wynik

Aby zobaczyć ostateczny wynik, sprawdź aktywną stronę w swojej witrynie.

Sprawia, że ​​jest lepki

Jeśli chcesz „lepką” wersję menu, wystarczy dodać 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;
  }

A oto wynik.

Końcowe przemyślenia

Mam nadzieję, że spodoba ci się to przesuwane menu push. Efekt jest wyjątkowy i otwiera drzwi dla bardziej kreatywnych nagłówków w przyszłości.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!