Cum să creați un meniu glisant în Divi

Anteturile mari, cu o mulțime de legături de navigare, pot ocupa o mulțime de bunuri imobiliare valoroase pe site-ul dvs. (mai ales deasupra pliantei). De aceea, meniurile care apar pop-up și slide-in devin din ce în ce mai populare. De cele mai multe ori, meniurile care glisează pentru a vizualiza rămân deasupra conținutului paginii, ascunzând anumite elemente. Cu toate acestea, un meniu push glisant funcționează puțin diferit. Efectul de împingere glisant este unic prin faptul că meniul alunecă din partea de sus a paginii în timp ce împinge simultan conținutul paginii în jos, astfel încât nimic să nu fie ascuns vizualizării.

În acest tutorial, vă vom arăta cum să creați un meniu push glisant de la zero folosind Divi Theme Builder. Odată ce meniul este construit, acesta devine un instrument versatil pentru toate tipurile de aplicații, deoarece veți putea completa secțiunea cu orice conținut doriți folosind Divi Builder.

Să ajungem la asta!

Trage cu ochiul

Iată o privire rapidă asupra meniului glisant push pe care îl vom construi în acest tutorial.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în Divi Theme Builder, navigați la Divi Theme Builder.

Faceți clic pe pictograma de portabilitate.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, șablonul de secțiune va apărea în Divi Theme Builder.

Să trecem la tutorial, nu-i așa?

Construirea meniului glisant Push cu Divi Theme Builder

Crearea unui nou meniu global

Pentru a crea meniul, vom construi un nou antet global în cadrul Divi Theme Builder.

Navigați la Divi> Theme Builder.

Apoi faceți clic pe zona „Adăugați antet global” din șablonul de site implicit. Din meniul derulant, selectați „Construiți antet global”.

Acest lucru vă va duce la editorul global de aspect al antetului.

Odată ce vă aflați în Global Header Layout Editor, alegeți opțiunea „Build From Scratch.

Crearea meniului Push

Primul element pe care îl vom construi împreună este secțiunea de meniu push. Această secțiune va conține elementele de meniu care vor comuta în jos și în sus când faceți clic pe butonul de comutare a meniului.

Setări secțiune

Deschideți setările secțiunii implicite și actualizați setările după cum urmează:

fundal

• Culoare fundal: # 1a1e36

Căptușeală

• Căptușeală: 0 px sus, 0 px jos

Clasa CSS

Sub fila avansată, adăugați următoarea clasă CSS, care va fi utilizată ulterior în codul nostru JS.

• Clasa CSS: et-push-menu

CSS personalizat (tabletă)

Apoi, trebuie să ajustăm înălțimea secțiunii de pe dispozitivul mobil folosind o înălțime calculată pentru a se potrivi cu bara principală de antet pe care o vom adăuga. Acest lucru va face, în esență, secțiunea să se întindă pe întreaga înălțime a ferestrei de pe mobil atunci când utilizatorul comută meniul deschis.

Adăugați următorul CSS personalizat numai la elementul principal de pe tabletă:

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

Adăugați rândul 1

Odată ce setările secțiunii sunt terminate, creați un rând cu o coloană în cadrul secțiunii.

Setările rândului 1

Apoi actualizați setările rândului după cum urmează:

Proiecta

• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 1280 px
• Garnitura: 3vh sus, 3vh jos
• Lățimea marginii inferioare: 1 px
• Culoare margine inferioară: rgba (255,255,255,0,2)

CSS personalizat

Sub fila avansată, adăugați următorul CSS personalizat la elementul principal:

Sub Desktop ...

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

Sub tabletă ...

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

Setări coloană

După ce setările de rând sunt terminate, deschideți setările pentru coloană și adăugați un fragment CSS personalizat la elementul principal:

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

Aceasta va centra conținutul coloanei atât pe verticală, cât și pe orizontală.

Adaugă buton

Acum suntem gata să începem să adăugăm elementele de meniu folosind module de butoane. Începeți prin adăugarea unui buton nou în coloană.

Setări buton

Apoi actualizați setările butonului după cum urmează:

Conţinut

• Text buton: Design
• Adresa URL a linkului butonului: # (înlocuiți-o cu propria adresă URL personalizată mai târziu)

Proiecta

• Culoarea textului butonului: #ffffff
• Lățimea chenarului butonului: 0 px
• Buton Font: Montserrat
• Buton Font Greutate: greu
• Pictogramă buton: [alegerea dvs.]
• Plasare pictogramă buton: stânga

Duplicarea coloanei

Acum, pentru a crea butoanele suplimentare pentru meniu, putem duplica coloana. Pentru acest design, să duplicăm coloana de 4 ori pentru a ne oferi un total de 5 elemente / butoane de meniu. într-un rând de cinci coloane.

Adăugați rândul 2

Odată ce primul rând este complet, suntem gata să adăugăm un alt rând de butoane care pot fi utilizate pentru un set diferit de elemente de meniu.

Pentru a crea următorul rând, copiați rândul 1.

Ștergeți toate coloanele, cu excepția uneia

Apoi ștergeți toate coloanele, cu excepția uneia din rândul duplicat.

Setările rândului 2

Actualizați setările pentru rândul 2 după cum urmează:

• Lățime maximă: 1080px
• Lățimea marginii inferioare: 0 px

Setări coloană

Apoi adăugați un chenar la coloană după cum urmează:

• Lățimea marginii drepte: 1 px
• Culoare margine dreaptă: rgba (255.255.255,0.2)

Actualizați setările butonului

După ce coloana are marginea dreaptă, deschideți setările pentru buton și actualizați următoarele:

• Dimensiune text buton: 14 px
• Distanța dintre litere și butoane: 2 px
• Buton Font Greutate: Semi Bold
• Stil Font Buton: TT
• Afișează pictograma butonului: NU

Duplicați coloana

La fel cum am făcut înainte, să duplicăm coloana pentru a crea butoane și coloane suplimentare. Pentru acest design, să duplicăm coloana de 3 ori pentru a ne oferi un total de 4 butoane pe un rând cu 4 coloane.

Ștergerea marginii ultimei coloane

Deoarece nu dorim ca ultima coloană să aibă marginea dreaptă, deschideți setările pentru coloana 4 și actualizați lățimea marginii:

• Lățimea marginii drepte: 0 px

Crearea barei principale de antet

Apoi, vom crea secțiunea pentru bara principală de antet. Această bară de antet va rămâne vizibilă întotdeauna și va fi cea care deține sigla site-ului nostru, un CTA și butonul nostru de comutare a meniului.

Adăugați secțiune

Înainte de a adăuga noua secțiune, este o idee bună să actualizați eticheta secțiunii anterioare pentru a citi „Push Menu Section”.

Apoi creați o nouă secțiune sub prima secțiune.

Setări secțiune

Acum actualizați eticheta din noua secțiune pentru a citi „Secțiunea antet”. Apoi deschideți setările secțiunii și actualizați următoarele:

Căptușeală

• Căptușeală: 0 px sus, 0 px jos

Adăugați rând

După ce a fost adăugată umplutura secțiunii, adăugați un rând cu trei coloane la secțiune.

Setări rând

Deschideți setarea rândului și actualizați următoarele:

Dimensionare

• Lățimea jgheabului: 1
• Lățime: 90%
• Înălțime: 70 px

Căptușeală

• Garnitura: Garnitura: 0 px sus, 0 px jos

CSS personalizat

Sub fila avansată, adăugați următorul CSS personalizat la elementul principal:

display:flex;
align-items:center;

Aceasta va centra vertical coloanele din rând.

Adaugă buton

Pentru a crea CTA principal în secțiunea antet, putem folosi un buton din al doilea rând din secțiunea de sus. Copiați butonul din coloana 1 din rândul 2 al secțiunii superioare și lipiți-l în coloana 1 a rândului din secțiunea antet.

Actualizați setările butonului

Apoi deschideți setările butonului pentru butonul duplicat și actualizați următoarele:

• Text buton: Înscrieți-vă
• Dimensiune text buton: 14 px
• Culoarea textului butonului: # 1a1e36
• Afișează pictograma butonului: DA
• Pictogramă buton: Săgeată dreapta (vezi captura de ecran)

Adăugați sigla

În coloana din mijloc, adăugați un modul de imagine. Acesta va fi modul în care adăugăm în mod dinamic sigla site-ului.

Plasați cursorul peste caseta de imagine și faceți clic pe pictograma „Utilizați conținut dinamic”. Din meniul derulant, selectați „Logo-ul site-ului”.

Setări imagine

Apoi, sub fila Design, actualizați următoarele:

• Aliniere imagine: centru
• Înălțime maximă: 55 px

Adăugați pictograma Hamburger personalizat

Am putea folosi o pictogramă obișnuită printr-un modul de blurb ca comutare a meniului nostru, dar pentru acest tutorial, am crezut că vom adăuga o comutare de meniu personalizată cu un efect de tranziție rece.

Adăugați un modul de text

Pentru a crea pictograma meniului, vom folosi un modul text cu un anumit HTML personalizat care va fi stilizat cu CSS extern.

Continuați și adăugați un modul text în coloana 3.

Adăugați text HTML modul

Apoi adăugați următorul HTML la conținutul modulului text:

<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>

fundal

Acordați modulului text o culoare de fundal:

• Culoare fundal: # 1a1e36

Proiectare text

Apoi actualizați setările de proiectare după cum urmează:

• Lățime: 70 px
• Alinierea modulului: corect
• Înălțime: 70 px
• Căptușeală: 20 px sus, 20 px jos, 16 px stânga, 16 px dreapta

Clasa CSS

Sub fila avansată, adăugați următoarea clasă CSS:

• Clasa CSS: et-push-menu-toggle

Adăugați cod

Pentru a aduce acasă funcționalitatea de care avem nevoie pentru ca acest meniu push glisant să funcționeze, vom adăuga CSS și jQuery personalizate la un modul de cod.

Continuați și adăugați un modul de cod în coloana 3 de sub modulul text.

Apoi lipiți următorul cod (important: înfășurați acest cod în etichete de stil pentru a funcționa corect):

  .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;
  }

Apoi, copiați și lipiți acest cod direct sub el (important: înfășurați acest cod în etichete de script pentru a funcționa corect):

(function($) {
  $(document).ready(function(){
    $('.et-push-menu-toggle').click(function(){
      $(this).toggleClass('open');
      $('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
    });
  });  
})( jQuery );

Actualizați textul butonului și linkurile

În cele din urmă, putem actualiza toate butoanele cu textul butonului necesar și adresele URL ale linkurilor.

Asta e!

Salvează setările

Nu uitați să salvați aspectul și setările pentru generatorul de teme.

Rezultat final

Pentru a vizualiza rezultatul final, consultați o pagină live de pe site-ul dvs.

Făcându-l lipicios

Dacă doriți o versiune „lipicioasă” a meniului, tot ce trebuie să faceți este să adăugați următorul fragment de CSS la modulul de cod (între etichetele de stil ):

  header {
    position: sticky;
    top:0;
    z-index:9999;
  }
  #page-container {
    overflow-y: visible !important;
  }

Și iată rezultatul.

Gânduri finale

Sper că vă place acest meniu glisant. Efectul este unic și deschide ușa pentru anteturi mai creative pe drum.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!