Divi: Cum se creează un meniu glisant și push

de Gaetan | Divi, Divi Tutoriale

Doriți să creați un meniu glisant și push în DIVI care nu ascunde elemente ale paginii tale?

Antetele mari cu multe link-uri de navigare pot ocupa spațiu valoros pe dvs site-ul web. Acesta este motivul pentru care meniurile contextuale și glisante devin din ce în ce mai populare. De cele mai multe ori, meniurile care glisează pentru a fi afișate rămân deasupra cuprins a paginii, ascunzând anumite elemente. 

Cu toate acestea, un meniu push glisant funcționează puțin diferit. Efectul de alunecare este unic prin faptul că meniul glisează din partea de sus a paginii în timp ce apăsați simultan cuprins de la pagină până în jos, astfel încât nimic nu este ascuns vederii.

În acest tutorial, vă vom arăta cum să creați un meniu push glisant de la zero folosind Divi Theme Builder.

Să mergem!

studiu

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

divi-cum-se-creați-un-meniu-glisant-și-împingere

Construiește meniul glisant push cu generatorul de teme Divi

Crearea unui nou meniu global

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

Accesați Divi > Theme Builder.

Citiți și: Cum se creează antet global cu formularul de conectare în DIVI

Apoi faceți clic pe zona „Adăugați un antet global” din șablon de site în mod implicit. Din lista drop-down, selectați „Build Global Header”.

divi-cum-se-creați-un-meniu-glisant-și-împingere

Crearea meniului push

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

Setări secțiune

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

fundal

  • Fundal: #1a1e36

Marja internă

  • Marja internă: 0px de sus, 0px de jos

CSS

Sub fila avansat, adăugați următoarea clasă CSS care va fi folosită mai târziu în codul nostru JS.

  • Clasa CSS: et-push-menu

Adăugați linia 1

Odată definiți parametrii secțiunii, creați un rând cu o singură coloană în secțiune.

Linia 1 Parametri

Apoi, actualizați parametrii de linie după cum urmează:

dimensionarea

  • Utilizați lățimea jgheab personalizată: DA
  • Distanța între coloane: 1
  • Lățime maximă: 100%
  • Lățimea maximă: 1 pixeli

spaţierea

  • Marja: 3vh de sus, 3vh de jos

frontieră

  • Lățimea marginii inferioare: 1px
  • Culoarea marginii inferioare: rgba(255,255,255,0.2)

CSS personalizate

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

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

Parametrii coloanei

Odată ce setările rândului sunt definite, deschideți setările coloanei și adăugați un fragment CSS personalizat la elementul principal:

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

Aceasta va centra cuprins a coloanei atât pe verticală cât și pe orizontală.

Adăugați un buton

Acum suntem gata să începem să adăugăm elementele de meniu folosind modulul Button. Începeți prin a adăuga un nou buton la coloană.

Consultați și ghidul nostru despre: Cum se creează un meniu de navigare vertical în DIVI

Setări buton

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

Conținut

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

Stil

  • Utilizați stiluri personalizate pentru Buton: DA
  • Culoarea textului butonului: #ffffff
  • Lățimea chenarului butonului: 0 pixeli
  • Font pentru butoane: Montserrat
  • Buton de lumină moale: greu
  • Buton pictogramă: DA
  • Buton pictogramă: [alegerea dvs.]
  • Afișați doar pictograma pe butonul Hover: NU
  • Amplasarea pictogramei butonului: stânga

Coloana duplicat

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 articole/butoane de meniu într-un rând de cinci coloane.

Adăugați linia 2

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

Citiți și: Cum să adăugați un formular de contact la un antet global în DIVI

Pentru a crea următoarea linie, duplicați linia 1.

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

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

Linia 2 Parametri

Actualizați parametrii liniei 2 după cum urmează:

  • Lățimea maximă: 1 pixeli
  • Lățimea marginii de jos: 0px

Parametrii coloanei

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

  • Lățimea marginii din dreapta: 1px
  • Culoarea marginii din dreapta: rgba(255,255,255,0.2)

Actualizați setările butonului

Odată ce coloana are chenarul din dreapta, deschideți setările butonului și actualizați următoarele:

  • Dimensiunea textului butonului: 14px
  • Buton Soft Light: text îngroșat
  • Spațiere între litere de la butoane: 2 px
  • Stilul de copiere a butonului: TT
  • Buton pictogramă: NU

Coloana duplicat

Așa 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 într-un rând de 4 coloane.

Eliminați chenarul din ultima coloană

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 din dreapta: 0px

Crearea barei de antet principale

În continuare, vom crea secțiunea principală a barei de antet. Această bară de antet va rămâne întotdeauna vizibilă și va fi ceea ce conține sigla site-ului nostru, un îndemn la acțiune și butonul nostru de comutare a meniului.

Adăugați o 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”.

Vezi și: Cum se creează un antet global cu Theme Builder în DIVI

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

divi-cum-se-creați-un-meniu-glisant-și-împingere

Setări secțiune

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

spaţierea

  • Marja internă: 0px de sus, 0px de jos

Adăugați un rând

Odată ce umplutura secțiunii este setată, adăugați un rând cu trei coloane la secțiune.

Setări de linie

Deschideți parametrul rând și actualizați următoarele:

dimensionarea

  • Lățimea jgheabului: 1
  • Lățime: 90%
  • Înălțime: 70px
divi-cum-se-creați-un-meniu-glisant-și-împingere

spaţierea

  • Marja internă: 0px de sus, 0px de jos
divi-cum-se-creați-un-meniu-glisant-și-împingere

CSS personalizate

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

display:flex;
align-items:center;

Acest lucru va centra vertical coloanele din rând.

Adăugați un buton

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

divi-cum-se-creați-un-meniu-glisant-și-împingere

Actualizați setările butonului

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

  • Textul butonului: Înregistrare
  • Dimensiunea textului butonului: 14px
  • Culoarea textului butonului: #1a1e36
  • Buton pictogramă: DA
  • Buton pictogramă: săgeată la dreapta (vezi captura de ecran)

Adăugați o siglă

În coloana din mijloc, adăugați un modul Imagine. Acesta va fi modul în care vom adăuga dinamic sigla site-ului.

Plasați cursorul peste zona imaginii și faceți clic pe pictograma „Utilizați conținut dinamic”. Din meniul drop-down, selectați „Sigla site-ului”.

Setări imagine

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

  • Alinierea imaginii: centrată
  • Înălțimea maximă: 55 pixeli

Adăugați o pictogramă de hamburger personalizată

Am putea folosi o pictogramă obișnuită printr-un modul de aspect ca comutare de meniu, dar pentru acest tutorial m-am gândit să adăugăm o comutare de meniu personalizată cu un efect de tranziție grozav.

Adăugați un modul de text

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

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

Adăugați cod HTML la modulul de text

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

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

fundal

Dați modulului de text o culoare de fundal:

  • Culoare de fundal: #1a1e36

Formatarea textului

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

  • Latime: 70px
  • Alinierea modulului: dreapta
  • Înălțime: 70px
  • Marja internă: 20px Sus, 20px Jos, 16px Stânga, 16px Dreapta

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 Cod la coloana 3 sub modulul Text.

Apoi lipiți următorul cod (NB: înfășurați acest cod în etichete stil pentru ca acesta să funcționeze 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 inserați acest cod direct dedesubt (important: includeți acest cod în etichete de script pentru ca acesta să funcționeze 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 necesar pentru buton și URL-urile de link.

E gata !

Salvați setările

Nu uitați să salvați aspectul și setările Theme Builder.

divi-cum-se-creați-un-meniu-glisant-și-împingere

Rezultat final

Pentru a vedea rezultatul final, verificați pagina de pe dvs site-ul web.

divi-cum-se-creați-un-meniu-glisant-și-împingere

Faceți lipicios

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

header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
  overflow-y: visible !important;
}
divi-cum-se-creați-un-meniu-glisant-și-împingere

Iată rezultatul.

Descărcați DIVI acum!!!

Concluzie

Sperăm să vă bucurați de acest meniu alunecant. Efectul este unic și deschide ușa către anteturi mai creative. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.

Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...

Posteaza comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.