Cum să creați un meniu imbricat care se prăbușește mobil cu Divi's Theme Builder

Publicat: 2019-12-12

Cu ceva timp în urmă, am distribuit un hack de meniu mobil care vă ajută să creați un meniu imbricat care se prăbușește. Știm că mulți dintre voi l-ați folosit, dar cu noul Divi Theme Builder, abordarea devine ușor diferită. În tutorialul de astăzi, vă vom arăta cum să aplicați un efect de colapsare mobilă la modulul de meniu din Divi Theme Builder. Există trei părți principale ale acestui tutorial:

  • Configurarea meniului și atribuirea claselor corecte elementelor de meniu
  • Construirea meniului dvs. utilizând Theme Builder și modulul de meniu
  • Adăugarea codului personalizat în Theme Builder

Veți putea descărca și șablonul JSON gratuit! Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Mobil

meniu imbricat

Desktop

meniu imbricat

Descărcați Global Header Design GRATUIT

Important: după descărcarea și încărcarea fișierului JSON în generatorul de teme, va trebui să configurați manual meniul cu clasele CSS corecte + adăugați modulul de cod cu codul CSS și JQuery (pașii 1 și 3 din această postare) .

Pentru a pune mâinile pe meniul cuibărit gratuit care se prăbușește, 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

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.

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!

Abonați-vă la canalul nostru Youtube

1. Configurați meniul

Adăugați elemente de meniu și elemente de submeniu

Primul lucru pe care trebuie să-l faci este să îți creezi meniul. Adăugați subelementele la alegere.

meniu imbricat

Adăugați opțiunea CSS Class

După ce ați adăugat elementele de meniu, puteți activa opțiunea clase CSS făcând clic pe „Opțiuni ecran” și activând „Clase CSS”.

meniu imbricat

Adăugați Clasa CSS la elementele de meniu de primul nivel care conțin elemente de submeniu

Continuați adăugând o clasă CSS la elementele de meniu de primul nivel care conțin elemente de submeniu. În acest exemplu, aceasta înseamnă adăugarea clasei CSS la elementele din meniu „Serviciu” și „Portofoliu”.

  • Clase CSS: primul nivel

meniu imbricat

Adăugați clasa CSS la elementele de meniu de nivel secundar și salvați meniul

Apoi, atribuiți o altă clasă CSS elementelor de meniu de nivel secundar din meniul dvs. Asigurați-vă că adăugați această clasă CSS numai la elementele de meniu de nivelul doi (în cazul în care adăugați mai multe niveluri). Mai târziu, în acest tutorial, vom folosi această clasă CSS și cea pe care am atribuit-o elementelor de meniu de primul nivel pentru a crea meniul imbricat care se prăbușește.

  • Clase CSS: al doilea nivel

meniu imbricat

2. Accesați Divi Theme Builder și începeți să creați antet global

Accesați Divi Theme Builder

Următoarea parte a acestui tutorial se concentrează pe crearea designului antetului. Dacă doriți ca tehnica imbricată să se aplice unui antet pe care l-ați construit deja (utilizând modulul de meniu), puteți sări peste acest pas și să mergeți la ultima parte a tutorialului. Dacă doriți să recreați designul, continuați pașii. Accesați Divi Theme Builder.

meniu imbricat

Începeți să creați antet global

Începeți să vă construiți antetul global în continuare.

meniu imbricat

Setări secțiune

Spațiere

În editorul de șabloane, veți observa o secțiune. Deschideți acea secțiune și eliminați toate căptușelile implicite de sus și de jos.

  • Căptușeală de sus: 0 px
  • Căptușeală inferioară: 0 px

meniu imbricat

Indicele Z

Măriți și indexul secțiunii z.

  • Indicele Z: 99999

meniu imbricat

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou la secțiune utilizând următoarea structură de coloane:

meniu imbricat

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului.

  • Utilizați lățimea personalizată a jgheabului: da
  • Lățimea jgheabului: 1
  • Egalizați înălțimile coloanei: Da
  • Lățime: 100%
  • Lățime maximă: 100%

meniu imbricat

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

  • Căptușeală de sus: 0 px
  • Căptușeală inferioară: 0 px

meniu imbricat

Elementul principal

Asigurați-vă că toate modulele apar una lângă alta pe dimensiuni de ecran mai mici, adăugând o singură linie de cod CSS și la elementul principal al rândului. 

display: flex;

meniu imbricat

Coloana 1

Spațiere

Apoi, deschideți setările coloanei 1 și adăugați câteva umpluturi personalizate în partea de sus și de jos.

  • Căptușeală superioară: 20 px
  • Căptușeală inferioară: 20 px

meniu imbricat

Frontieră

Adăugați și o rază de margine.

  • În dreapta sus: 100 px
  • Jos dreapta: 100 px

meniu imbricat

Box Shadow

Și completați setările coloanei 1 adăugând o umbră de casetă subtilă.

  • Poziție orizontală a umbrei cutiei: 20 px
  • Puterea neclarității umbrei cutiei: 50 px
  • Culoare umbră: rgba (0,0,0,0,15)

meniu imbricat

Coloana 2

Spațiere

Deschideți apoi setările celei de-a doua coloane și adăugați câteva căptușeli de sus și de jos.

  • Căptușeală superioară: 20 px
  • Căptușeală inferioară: 20 px

meniu imbricat

Coloana 3

Fundal de gradient

Treceți la următoarea și ultima coloană. Adăugați un fundal de gradient.

  • Culoare 1: # 26c699
  • Culoare 2: # abe02f
  • Direcția gradientului: 116 grade

meniu imbricat

Spațiere

Adăugați câteva căptușeli personalizate în partea de sus și de jos.

  • Căptușeală superioară: 20 px
  • Căptușeală inferioară: 20 px

meniu imbricat

Frontieră

Apoi, accesați setările de margine și efectuați următoarele modificări:

  • În stânga sus: 100 px
  • În partea stângă jos: 100 px

meniu imbricat

Box Shadow

Completați setările coloanei adăugând o umbră de casetă.

  • Poziție orizontală a umbrei cutiei: -26px
  • Box Shadow Vertical Position: 0px
  • Culoare umbră: # d2ff0c

meniu imbricat

Adăugați modulul de imagine în coloana 1

Încărcați sigla

Este timpul să adăugați module, începând cu un modul de imagine în coloana 1. Încărcați sigla.

meniu imbricat

Aliniere

Schimbați alinierea imaginii modulului în continuare.

  • Aliniere imagine: centru

meniu imbricat

Dimensionare

Completați setările modulului modificând lățimea pe diferite dimensiuni ale ecranului.

  • Lățime: 120 px (desktop), 80 px (tabletă și telefon)

meniu imbricat

Adăugați un modul de meniu în coloana 2

Selectați Meniu

În coloana 2, singurul modul de care avem nevoie este un modul de meniu. Selectați meniul pe care l-ați creat în prima parte a acestui tutorial.

meniu imbricat

Eliminați culoarea de fundal

Eliminați culoarea de fundal a modulului în continuare.

meniu imbricat

Aspect

Apoi, modificați setările de aspect.

  • Stil: Centrat
  • Direcția meniului drop-down: în jos

meniu imbricat

Text de meniu

Stilizați și textul meniului.

  • Font de meniu: Montserrat
  • Meniul Font Greutate: Mediu
  • Culoare text meniu: # 000000
  • Dimensiune text meniu: 13 px
  • Spațiere scrisori meniu: 1 px

meniu imbricat

Meniul derulant

Continuați schimbând unele culori din setările meniului derulant.

  • Culoarea fundalului meniului derulant: #ffffff
  • Culoare linie meniu derulant: # 000000

meniu imbricat

Icoane

Și completați setările modulului schimbând culoarea pictogramei meniului hamburger din setările pictogramei.

  • Culoare pictogramă meniu hamburger: # 000000

meniu imbricat

Adăugați un modul de text în coloana 3

Adauga continut

La următorul și ultimul modul, care este un modul de text în coloana 3. Adăugați o copie la alegere.

meniu imbricat

Adăugați un link

Adăugați un link către modulul următor.

  • Adresă URL a modulului: #

meniu imbricat

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

  • Font text: Montserrat
  • Greutatea fontului textului: Semi Bold
  • Culoarea textului: #ffffff
  • Dimensiune text: 16 px
  • Înălțimea liniei de text: 1em
  • Aliniere text: centru

meniu imbricat

Spațiere

Completați setările modulului adăugând câteva topmargin.

  • Marja superioară: 10 px

meniu imbricat

3. Adăugați funcționalitate la meniu utilizând un modul de cod

Adăugați un modul de cod în coloana 2

După ce ați finalizat designul antetului, este timpul să adăugați codul personalizat care va transforma meniul mobil într-un meniu imbricat care se prăbușește. Adăugați un modul de cod la a doua coloană (sau oriunde altundeva).

meniu imbricat

Introduceți codul CSS și JQuery

Apoi, adăugați codul CSS și JQuery. Asigurați-vă că plasați codul CSS între etichetele de stil și codul JQuery între etichetele de script. 

.et_mobile_menu .first-level > a {
background-color: transparent;
position: relative;
}
.et_mobile_menu .first-level > a:after {
font-family: 'ETmodules';
content: '\4c';
font-weight: normal;
position: absolute;
font-size: 16px;
top: 13px;
right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after{
content: '\4d';
}
.second-level {
display: none;
}
.reveal-items {
display: block;
}
.et_mobile_menu {
margin-top: 20px;
width: 230%;
margin-left: -65%;
}
(function($) {
      
function setup_collapsible_submenus() {
    
var FirstLevel = $('.et_mobile_menu .first-level > a');
  
FirstLevel.off('click').click(function() {
$(this).attr('href', '#');  
$(this).parent().children().children().toggleClass('reveal-items');
$(this).toggleClass('icon-switch');
});
  

}
      
$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});
 
})(jQuery);

meniu imbricat

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Mobil

meniu imbricat

Desktop

meniu imbricat

Gânduri finale

În această postare, v-am arătat cum să faceți ca un meniu imbricat care se prăbușește să se aplice antetului dvs. global din Theme Builder. Am început prin crearea barei de meniu principale, am continuat prin proiectarea antetului nostru în interiorul Theme Builder folosind modulul de meniu și am finalizat tutorialul adăugând codul personalizat care face efectul să funcționeze. Sperăm că v-a plăcut acest tutorial și dacă aveți întrebări, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.