homefinance blog
Cum să creați un meniu imbricat care se prăbușește mobil cu Divi's Theme Builder
- 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 
Desktop 
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 de mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.
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. 
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”. 
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
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
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.
Începeți să creați antet global Începeți să vă construiți antetul global în continuare. 
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
Indicele Z Măriți și indexul secțiunii z.
- Indicele Z: 99999
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: 
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%
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
Elementul principal Asigurați-vă că toate modulele apar una lângă cealaltă pe dimensiuni de ecran mai mici, adăugând o singură linie de cod CSS și la elementul principal al rândului. display: flex;
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
Frontieră Adăugați și o rază de margine.
- În dreapta sus: 100 px
- Jos dreapta: 100 px
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)
Coloana 2 Spațiere Deschideți apoi setările celei de-a doua coloane și adăugați câteva umpluturi de sus și de jos.
- Căptușeală superioară: 20 px
- Căptușeală inferioară: 20 px
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
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
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
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
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. 
Aliniere Schimbați alinierea imaginii modulului în continuare.
- Aliniere imagine: centru
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)
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. 
Eliminați culoarea de fundal Eliminați culoarea de fundal a modulului în continuare. 
Aspect Apoi, modificați setările de aspect.
- Stil: Centrat
- Direcția meniului drop-down: în jos
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
Meniul derulant Continuați schimbând unele culori din setările meniului derulant.
- Culoarea fundalului meniului derulant: #ffffff
- Culoare linie meniu derulant: # 000000
Icoane Și completați setările modulului schimbând culoarea pictogramei meniului hamburger din setările pictogramei.
- Culoare pictogramă meniu hamburger: # 000000
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.
Adăugați un link Adăugați un link către modulul următor.
- Adresă URL a modulului: #
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
Spațiere Completați setările modulului adăugând câteva topmargin.
- Marja superioară: 10 px
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). 
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);
previzualizare Acum, că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran. Mobil Desktop 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.