Divi: Si të krijoni një menu rrëshqitëse dhe shtytëse

Dëshironi të krijoni një menu rrëshqitëse dhe shtytëse në DIVI e cila nuk fsheh elemente të faqes suaj?

Titujt e mëdhenj me shumë lidhje navigimi mund të zënë hapësirë ​​të vlefshme në tuaj Site Web. Kjo është arsyeja pse menytë e kontekstit dhe me rrëshqitje po bëhen gjithnjë e më të njohura. Shumicën e kohës, menytë që rrëshqasin për t'u shfaqur mbeten mbi përmbajtje të faqes, duke fshehur disa elementë. 

Sidoqoftë, një menu shtytëse rrëshqitëse funksionon pak më ndryshe. Efekti i shtytjes rrëshqitëse është unik në atë që menyja rrëshqet nga maja e faqes ndërkohë që shtyn njëkohësisht përmbajtje nga faqja deri në fund, kështu që asgjë nuk është e fshehur nga pamja.

Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një menu shtytëse rrëshqitëse nga e para duke përdorur Divi Theme Builder.

Le të shkojmë!

studim

Ja një vështrim i shpejtë në menunë e shtytjes rrëshqitëse që do të krijojmë në këtë tutorial.

Ndërtoni menunë e shtytjes rrëshqitëse me ndërtuesin e temave Divi

Krijimi i një menuje të re globale

Për të krijuar menunë, ne do të krijojmë një kokë të re globale brenda Ndërtuesit të Temave Divi.

Shkoni te Divi > Ndërtuesi i Temave.

Lexo gjithashtu: Si të krijoni kokën globale me formën e hyrjes në DIVI

Pastaj klikoni në zonën "Shto një kokë globale" në shabllonin e faqes në internet sipas parazgjedhjes. Nga lista rënëse, zgjidhni "Build Global Header".

Krijimi i menusë push

Elementi i parë që do të ndërtojmë së bashku është seksioni i menusë shtytëse. Ky seksion do të përmbajë artikujt e menysë që do të ndërrohen lart e poshtë kur klikoni butonin e ndryshimit të menysë.

Cilësimet e seksionit

Hapni cilësimet e parazgjedhura të seksionit dhe përditësoni cilësimet si më poshtë:

Sfondi

• Sfondi: #1a1e36

Marzhi i brendshëm

• Marzhi i brendshëm: 0px sipër, 0px poshtë

Klasë CSS

Nën skedën e avancuar, shtoni klasën e mëposhtme CSS e cila do të përdoret më vonë në kodin tonë JS.

• Klasa CSS: et-push-menu

Shto linjën 1

Pasi të përcaktohen parametrat e seksionit, krijoni një rresht me një kolonë në seksion.

Parametrat e rreshtit 1

Më pas, përditësoni parametrat e linjës si më poshtë:

sizing

• Përdorni gjerësinë e ulluqit të personalizuar: PO
• Hapësira e kolonave: 1
• Gjerësia maksimale: 100%
• Gjerësia maksimale: 1 piksele

ndarje

• Marzhi: Top 3vh, Bottom 3vh

kufi

• Gjerësia e kufirit të poshtëm: 1 px
• Ngjyra e kufirit të poshtëm: rgba (255,255,255,0.2)

Custom CSS

Nën skedën e avancuar, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor:

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

Parametrat e kolonës

Pasi të përcaktohen cilësimet e rreshtit, hapni cilësimet e kolonës dhe shtoni një fragment të personalizuar CSS në elementin kryesor:

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

Kjo do të përqendrojë përmbajtje të kolonës si vertikalisht ashtu edhe horizontalisht.

Shto një buton

Tani jemi gati të fillojmë të shtojmë artikujt tanë të menusë duke përdorur modulin Button. Filloni duke shtuar një buton të ri në kolonë.

Shihni gjithashtu udhëzuesin tonë në: Si të krijoni një menu vertikale navigimi në DIVI

Cilësimet e butonit

Më pas, përditësoni cilësimet e butonit si më poshtë:

Përmbajtje

• Teksti i butonit: Dizajn

• URL-ja e lidhjes së butonit: # (zëvendësojeni më vonë me URL-në tuaj të personalizuar)

Stili

• Përdorni stile të personalizuara për butonin: PO
• Ngjyra e tekstit të butonit: #ffffff

• Gjerësia e kufirit të butonit: 0 piksel
• Fonti i butonit: Montserrat
• Butoni i lehtë i lehtë: i rëndë

• Butoni i ikonës: PO
• Butoni i ikonës: [Zgjedhja juaj]
• Shfaq vetëm ikonën në butonin Hover: JO
• Vendosja e ikonës së butonit: majtas

Kolona dublikatë

Tani, për të krijuar butonat shtesë për menunë, ne mund të dublikojmë kolonën. Për këtë dizajn, le të kopjojmë kolonën 4 herë për të na dhënë gjithsej 5 artikuj/butona të menusë në një rresht prej pesë kolonash.

Shto linjën 2

Pasi të përfundojë rreshti i parë, ne jemi gati të shtojmë një rresht tjetër butonash që mund të përdoren për një grup të ndryshëm artikujsh të menysë.

Lexo gjithashtu: Si të shtoni një formular kontakti në një kokë globale në DIVI

Për të krijuar rreshtin tjetër, dubliko rreshtin 1.

Fshini të gjitha kolonat përveç njërës

Pastaj fshini të gjitha, përveç një kolone në rreshtin e kopjuar.

Parametrat e rreshtit 2

Përditësoni parametrat e linjës 2 si më poshtë:

• Gjerësia maksimale: 1 piksele

• Gjerësia e kufirit të poshtëm: 0 px

Parametrat e kolonës

Pastaj shtoni një kufi në kolonë si më poshtë:

• Gjerësia e kufirit të djathtë: 1 px
• Ngjyra e kufirit të djathtë: rgba (255,255,255,0.2)

Përditëso cilësimet e butonit

Pasi kolona të ketë kufirin e duhur, hapni cilësimet e butonit dhe përditësoni sa vijon:

• Madhësia e tekstit të butonit: 14 px

• Butoni i lehtë i dritës: tekst i trashë
• Hapësira e shkronjave të butonave: 2 px
• Stili i kopjimit të butonit: TT
• Butoni i ikonës: JO

Kolona dublikatë

Siç bëmë më parë, le të dublikojmë kolonën për të krijuar butona dhe kolona shtesë. Për këtë dizajn, le të kopjojmë kolonën 3 herë për të na dhënë gjithsej 4 butona në një rresht prej 4 kolonash.

Hiq kufirin nga kolona e fundit

Meqenëse nuk duam që kolona e fundit të ketë kufirin e duhur, hapni cilësimet për kolonën 4 dhe përditësoni gjerësinë e kufirit:

• Gjerësia e kufirit të djathtë: 0 px

Krijimi i shiritit kryesor të kokës

Më pas, ne do të krijojmë seksionin kryesor të shiritit të kokës. Ky shirit i kokës do të mbetet gjithmonë i dukshëm dhe do të jetë ai që përmban logon e faqes sonë, një thirrje për veprim dhe butonin tonë të ndryshimit të menysë.

Shtoni një seksion

Përpara se të shtoni seksionin e ri, është mirë të përditësoni etiketën e seksionit të mëparshëm për të lexuar "Push Menu Section".

Shih gjithashtu: Si të krijoni një titull global me ndërtuesin e temave në DIVI

Pastaj krijoni një seksion të ri poshtë seksionit të parë.

Cilësimet e seksionit

Tani përditësoni etiketën e seksionit të ri për të lexuar "Seksioni i kokës". Pastaj hapni cilësimet e seksionit dhe përditësoni sa vijon:

ndarje

• Marzhi i brendshëm: 0px sipër, 0px poshtë

Shtoni një rresht

Pasi të vendoset mbushja e seksionit, shtoni një rresht me tre kolona në seksion.

Cilësimet e linjës

Hapni parametrin e rreshtit dhe përditësoni sa vijon:

sizing

• Gjerësia e kanalit: 1
• Gjerësia: 90%
• Lartësia: 70 px

ndarje

• Marzhi i brendshëm: 0px sipër, 0px poshtë

Custom CSS

Nën skedën e avancuar, shtoni CSS-në e mëposhtme të personalizuar në elementin kryesor:

display:flex;
align-items:center;

Kjo do të përqendrojë vertikalisht kolonat në rresht.

Shto një buton

Për të krijuar CTA kryesore në seksionin e kokës, mund të përdorim një buton të rreshtit të dytë në pjesën e sipërme. Kopjoni butonin nga kolona 1 e rreshtit 2 të seksionit të sipërm dhe ngjisni atë në kolonën 1 të rreshtit të seksionit të kokës.

Përditëso cilësimet e butonit

Pastaj hapni cilësimet e butonit të kopjuar dhe përditësoni sa vijon:

• Teksti i butonit: Regjistrimi

• Madhësia e tekstit të butonit: 14 px
• Ngjyra e tekstit të butonit: #1a1e36

• Butoni i ikonës: PO
• Butoni i ikonës: Shigjeta djathtas (shih pamjen e ekranit)

Shto një logo

Në kolonën e mesme, shtoni një modul Image. Kështu do të shtojmë në mënyrë dinamike logon e faqes.

Rri pezull mbi zonën e imazhit dhe kliko ikonën "Përdor përmbajtje dinamike". Nga menyja rënëse, zgjidhni "Logo e faqes".

Cilësimet e imazhit

Më pas, nën skedën Stil, përditësoni sa vijon:

• Shtrirja e imazhit: në qendër

• Lartësia maksimale: 55 piksele

Shto një ikonë të personalizuar të hamburgerit

Ne mund të përdorim një ikonë të rregullt përmes një moduli të paraqitjes si një ndërrim menyje, por për këtë tutorial mendova të shtonim një ndryshim të personalizuar të menusë me një efekt të lezetshëm të tranzicionit.

Shto një modul teksti

Për të krijuar ikonën e menusë, ne do të përdorim një modul teksti me kod HTML të personalizuar që do të stilohet me CSS të jashtme.

Shkoni përpara dhe shtoni një modul teksti në kolonën 3.

Shtoni kodin HTML në modulin e tekstit

Pastaj shtoni kodin e mëposhtëm HTML në përmbajtjen e modulit të tekstit:

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

Sfondi

Jepini modulit të tekstit një ngjyrë sfondi:

• Ngjyra e sfondit: #1a1e36

Formatimi i tekstit

Më pas, përditësoni cilësimet e stilit si më poshtë:

• Gjerësia: 70 piksele
• Rreshtimi i modulit: djathtas
• Lartësia: 70 px

• Marzhi i brendshëm: 20 px lart, 20 px poshtë, 16 px majtas, 16 px djathtas

Klasë CSS

Nën skedën e avancuar, shtoni klasën e mëposhtme CSS:

• Klasa CSS: et-push-menu-toggle

Shto kod

Për të sjellë në shtëpi funksionalitetin që na nevojitet për të funksionuar këtë menu shtytëse rrëshqitëse, ne do të shtojmë CSS-në tonë të personalizuar dhe jQuery në një modul Kodi.

Shkoni përpara dhe shtoni një modul Kodi në kolonën 3 nën modulin Tekst.

Pastaj ngjitni kodin e mëposhtëm (NB: mbështilleni këtë kod me etiketa stil që të funksionojë si duhet):

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

Më pas kopjoni dhe ngjisni këtë kod direkt më poshtë (e rëndësishme: mbështilleni këtë kod me etiketa skripti që të funksionojë siç duhet):

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

Përditëso tekstin dhe lidhjet e butonit

Më në fund, ne mund të përditësojmë të gjithë butonat me tekstin e nevojshëm të butonit dhe URL-të e lidhjeve.

Ajo është bërë !

Ruani cilësimet

Mos harroni të ruani paraqitjen dhe cilësimet e Ndërtuesit të Temave.

Rezultati përfundimtar

Për të parë rezultatin përfundimtar, kontrolloni faqen në tuaj Faqja e internetit.

Bëni Ngjitës

Nëse dëshironi një version "ngjitës" të menusë, thjesht shtoni fragmentin e mëposhtëm të kodit CSS në modulin e kodit (midis etiketave të stilit):

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

Ja rezultati.

Shkarkoni DIVI Tani!!!

Përfundim

Shpresojmë t'ju pëlqejë kjo menu shtytëse rrëshqitëse. Efekti është unik dhe hap derën për tituj më kreativë. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.

Sidoqoftë, gjithashtu mund të këshilloheni burimet tona, nëse keni nevojë për më shumë elemente për të realizuar projektet tuaja të krijimit të faqeve në Internet, duke u konsultuar me udhëzuesin tonë për Krijimi i blogut të WordPress ose atë më Divi: tema më e mirë e WordPress të të gjitha kohërave.

Por në ndërkohë, ndajeni këtë artikull në rrjetet tuaja të ndryshme sociale.

...