Dëshironi të bëheni kreativ duke krijuar një meny ngjitëse të zgjerueshme në hover me Divi ?

Në këtë tutorial, ne do t'ju tregojmë se si të krijoni një meny ngjitëse të zgjerueshme duke përdorur pezullimin nga Divi's Mechanic Layout Pack . 

Ne do të trajtojmë dy modele të ndryshme të mostrave që mund t'i rikrijoni nga e para dhe t'i aplikoni për çdo lloj Site Web që ju krijoni! 

Menuja do të shfaqet në lëvizje në desktop dhe do të aktivizohet kur klikoni në pajisjet celulare.

Le të shkojmë!

studim

Përpara se të zhytemi në këtë tutorial, le të hedhim një vështrim të shpejtë në rezultatin në madhësi të ndryshme të ekranit.

Shembull 1

Kompjuter desktop

meny ngjitëse e zgjerueshme kur rri pezull me Divi

Telefon

meny ngjitëse e zgjerueshme kur rri pezull me Divi

Shkarkoni DIVI Tani!!!

Shembull 2

Kompjuter desktop

meny ngjitëse e zgjerueshme kur rri pezull me Divi

Telefon

meny ngjitëse e zgjerueshme kur rri pezull me Divi

Shkarkoni DIVI Tani!!!

Hapat e përgjithshëm

Çaktivizo navigimin fiks

Hyni në opsionet e temës Divi

Do të fillojmë me disa hapa të përgjithshëm. Këta hapa janë të njëjtë për të dy shembujt dhe janë të nevojshëm për të arritur rezultatin e dëshiruar.

Nëse planifikoni të përdorni një menu ngjitëse në zgjerim në fund të faqes tuaj, mund të dëshironi të lini jashtë shiritin e menusë kryesore në krye. 

Lexo gjithashtu: Si të krijoni mbivendosje të personalizuara të imazhit në Divi

Për këtë ju do të duhet të shkoni Divi >> Opsionet e Temave nga pulti i WordPress

Çaktivizo navigimin fiks

Atje do t'ju duhet të çaktivizoni "Shirit i fiksuar i navigimit" për t'u siguruar që nuk ka mbetur hapësirë ​​në krye të faqes tuaj.

  • Shiriti i fiksuar i navigimit: i çaktivizuar

Fshih shiritin kryesor të menusë në faqe

Hap cilësimet e faqes

Shkoni te faqja ku dëshironi të shtoni menunë ngjitëse të zgjerueshme dhe hapni cilësimet e faqes.

Shto CSS të personalizuar

Fshihni menunë kryesore duke shtuar rreshtat e mëposhtëm të kodit CSS në faqen tuaj.

#main-header {
display: none;
}

Shtoni një seksion të ri në fund të faqes

Pavarësisht se cilin shembull dëshironi të rikrijoni, disa nga hapat bazë mbeten të njëjtë. Hapi i parë është të shtoni një seksion të rregullt në fund të faqes.

ndarje

Hapni cilësimet e seksionit dhe ndryshoni cilësimet e mëposhtme në skedën Projektimi nën opsion ndarje.

  • Mbushje (lart dhe poshtë): 0 px

Shto një rresht të ri

Struktura e kolonës

Vazhdoni duke shtuar një rresht të ri duke përdorur strukturën e mëposhtme të kolonës:

sizing

Pa shtuar ende asnjë modul, hapni cilësimet e linjës dhe ndryshoni cilësimet e mëposhtme, në skedën Projektimi nën opsion sizing

  • Përdorni gjerësinë e ulluqit të personalizuar: PO
  • Gjerësia e kanalit: 1
  • Gjerësia: 100%
  • Gjerësia maksimale: 100%

ndarje

Pastaj hiqni të gjitha mbushjet e paracaktuara të sipërme dhe të poshtme, nën opsionin ndarje.

  • Mbushje (lart dhe poshtë): 0 px

Elementi kryesor

Ne lejojmë që i gjithë rreshti të ngjitet në fund të faqes sonë duke shtuar dy rreshta të thjeshtë të kodit CSS në elementin e rreshtit kryesor.

bottom: 0px;
position: fixed;

Z-indeksi

Dhe ne do të sigurohemi që linja (dhe moduli i tekstit që do të shtojmë në hapat e ardhshëm) të qëndrojnë në krye të gjithçkaje përmbajtje të faqes duke rritur indeksin Z, Zgjero opsionin pozitë.

  • Z-indeksi: 99

Shtoni modulin e kodit në kolonë

Shtoni kodin CSS midis etiketave të stilit

Pjesa e fundit e hapave të përgjithshëm është shtimi i një moduli Kodi në rreshtin e ri. Kodi CSS që shtojmë në këtë modul të Kodit do të na ndihmojë të arrijmë efektin zbulues në lëvizje. 

Shih gjithashtu: Si të krijoni një meny të rrotës rrotulluese në Hover në Divi

Ngjitni rreshtat e mëposhtëm të kodit CSS në modul:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Shembulli #1 Dizajni

Shtoni një modul teksti në kolonë

Shto përmbajtje

Tani që kemi kaluar nëpër të gjitha hapat, mund të fillojmë të fokusohemi në dy shembujt e ndryshëm të dizajnit, duke filluar nga i pari! 

Shtoni një modul teksti në kolonën e rreshtit tuaj. Në zonën e përmbajtje, ne përdorim stilin e paragrafit për të shfaqur tekstin '≡Meny'

Më pas vendosim të gjithë artikujt e menysë në një listë të pa renditur. Ne gjithashtu do të shtojmë një lidhje për secilin nga titujt e faqeve individualisht.

Ngjyra e parazgjedhur e sfondit

Shkoni te cilësimet e sfondit të modulit dhe ndryshoni ngjyrën e sfondit.

  • Sfondi: #ffffff

Ngjyra e sfondit në lëvizje

Ndrysho këtë ngjyrë të sfondit kur rri pezull.

  • Sfondi (Hover): rgba (255,255,255,0.83)

Sfondi i gradientit

Dhe gjithashtu shtoni sfondin e paracaktuar të gradientit.

  • Ngjyra e majtë: rgba (255,255,255,0)
  • Ngjyra e duhur: #ffffff
  • Pozicioni i djathtë: 60%

Cilësimet e paracaktuar të tekstit

Vazhdoni duke shkuar te skeda Projektimi dhe ndryshimi i cilësimeve të tekstit.

  • Fonti i tekstit: Khand
  • Pesha e shkronjave: Bold
  • Ngjyra e tekstit: #021827
  • Madhësia e tekstit: 3vh
  • Orientimi: Qendër

Vendosni cilësimet e tekstit

Ndryshoni disa nga cilësimet e tekstit të pezullimit.

  • Ngjyra e tekstit (Hover: rgba(255,255,255,0)
  • Madhësia e tekstit (Hover): 0vh

Cilësimet e tekstit të lidhjes

Më pas, shkoni te cilësimet e tekstit të lidhjes dhe ndryshoni ngjyrën e tekstit të lidhjes.

  • Ngjyra e tekstit të lidhjes: #000000

Lista e parazgjedhjeve (Desktop)

Kalo te cilësimet e tekstit të listës së paracaktuar dhe personalizoje sipas dëshirës. Sigurohuni që po përdorni '0px' për madhësinë e tekstit në gjendjen e tij të paracaktuar.

  • Fonti i listës së parregulluar: Khand
  • Stili i fontit të listës: TT
  • Rreshtimi i tekstit të listës: në qendër
  • Ngjyra e pa renditur e tekstit: rgba (255,255,255,0)
  • Madhësia e tekstit të listës së parregulluar: 0 px
  • Pesha e tekstit të listës: 0em
  • Pozicioni i stilit të listës së parregulluar: Brenda

Cilësimet e listës së pezullimit

Më pas ndryshoni disa nga vlerat në hover për të lejuar që artikujt e menusë të shfaqen.

  • Ngjyra e tekstit të listës (Hover): #000000
  • Madhësia e tekstit të listës së parregulluar (Hover): 2vh
  • Lartësia e tekstit të listës së parenditur (Hover): 2,1 em

Hapësira e parazgjedhur (Desktop)

Pastaj shkoni te cilësimet e ndarjes (opsioni ndarje) dhe i jepni një formë modulit Text.

  • Margjina (majtas dhe djathtas): 45vw (desktop), 39vw (tableti), 33vw (telefon)
  • Mbushje (lart dhe poshtë): 2vw (desktop), 4vw (tableti), 6vw (telefon)

Hapësira pezull

Modifikoni të njëjtat vlera kur rri pezull.

  • Margjina (majtas dhe djathtas): 14vw
  • Mbushje (sipër dhe poshtë): 8vw

Kufiri i parazgjedhur (Desktop)

Shkoni te cilësimet e kufirit dhe sigurohuni që secili nga qoshet e rrumbullakosura të ketë një vlerë prej '0px'.

Kufiri në hover

Aktivizo opsionet e pezullimit në qoshet e rrumbullakosura dhe ndryshoni vlerat lart majtas dhe djathtas lart.

  • Sipër majtas: 50vw
  • Sipër djathtas: 50vw

Kuti me hije

Vazhdoni duke i dhënë thellësi modulit duke përdorur një hije kutie. Kjo do të sigurojë që menyja të mos kalojë pa u vënë re në faqe.

  • Forca e turbullimit të hijeve të kutisë: 1000 px
  • Ngjyra e hijes: rgba (0,0,0,0.68)

Klasë CSS

Ne gjithashtu shtojmë një klasë CSS në modul.

  • Klasa CSS: dt-menu

Transitions

Së fundi, ulni kohëzgjatjen e tranzicionit në cilësimet e tranzicionit.

  • Kohëzgjatja e tranzicionit: 100 ms

Shembulli #2 Dizajni

Shtoni një modul teksti në kolonë

Shto përmbajtje

Le të kalojmë në shembullin e dytë! Këtu do të shtojmë përsëri '≡Meny' duke përdorur stilin e tekstit të paragrafit dhe artikujt e menysë duke përdorur një listë të pa renditur. Ne gjithashtu do të shtojmë një lidhje për secilin nga artikujt e menusë individualisht.

Ngjyra e parazgjedhur e sfondit (Desktop)

Shkoni te cilësimet e sfondit dhe ndryshoni ngjyrën e sfondit.

  • Sfondi: #ffffff

Ngjyra e sfondit në lëvizje

Ndrysho ngjyrën e sfondit kur rri pezull.

  • Sfondi (Hover): #f71535

Cilësimet e parazgjedhura të tekstit (Desktop)

Pastaj shkoni te skeda Projektimi dhe të bëjë disa ndryshime në pamjen e tekstit.

  • Fonti i tekstit: Khand
  • Pesha e shkronjave: Bold
  • Ngjyra e tekstit: #021827
  • Madhësia e tekstit: 3vh

Zhvendos cilësimet e tekstit

Ndrysho këto cilësime kur rri pezull.

  • Ngjyra e tekstit (Hover): rgba (255,255,255,0)
  • Madhësia e tekstit (Hover): 0vh

Cilësimet e tekstit të lidhjes

Shkoni te cilësimet e tekstit dhe ndryshoni ngjyrën e tekstit të lidhjes.

  • Ngjyra e tekstit të lidhjes: #ffffff

Cilësimet e tekstit të listës së parazgjedhur

Ndryshoni gjithashtu cilësimet e projektimit të artikujve të listës së pa renditur.

  • Fonti i listës së parregulluar: Khand
  • Stili i fontit të listës së parregulluar: TT
  • Rreshtimi i tekstit të listës: në qendër
  • Ngjyra e tekstit të listës së pa renditur: rgba (255,255,255,0)
  • Madhësia e tekstit të listës: 0 px
  • Lartësia e vijës së listës së parregulluar: 0em
  • Pozicioni i stilit të listës së parregulluar: Brenda

Cilësimet e listës së pezullimit

Dhe ndryshoni disa nga këto vlera në lëvizje.

  • Ngjyra e tekstit të listës së parenditur: #ffffff
  • Madhësia e tekstit të listës: 2vh
  • Lartësia e vijës së listës së parregulluar: 2,1 em

Hapësira e parazgjedhur (Desktop)

Pastaj shkoni te cilësimet e ndarjes dhe jepini modulit pak hapësirë.

  • Margjina (djathtas): 88 vw (desktop dhe tablet), 71 vw (telefon)
  • Mbushje (sipër): 6 vw (Desktop)), 10 vw (Tablet), 18 vw (Telefon)
  • Mbushje (në fund): 4 vw (Desktop), 10 vw (Tablet), 12 vw (Telefon)
  • Mbushja e majtë: 1vw

Hapësira pezull

Ndryshoni vlerat në lëvizje.

  • Margjina (djathtas): 59vw
  • Mbushja: (lart)13vw, (poshtë)8vw, (majtas)1vw, (djathtas)13vw
zgjerim i menysë ngjitëse

kufi

Dhe për të krijuar këtë dizajn të rrethit tremujor, ne do të ndryshojmë kufirin e sipërm djathtas në cilësimet e kufirit.

  • Sipër djathtas: 50vw

Kuti me hije

Ne gjithashtu do të shtojmë një hije kutie për të krijuar thellësi në faqe.

  • Forca e turbullimit të hijes së kutisë: 1000 px
  • Ngjyra e hijes: rgba (0,0,0,0.68)

Klasë CSS

Më pas do të shtojmë një klasë CSS në skedën Avancuar.

  • Klasa CSS: dt-menu

Transitions

Dhe ulni kohëzgjatjen e tranzicionit në skedë Avancuar për të krijuar një tranzicion të shpejtë.

  • Kohëzgjatja e tranzicionit: 100 ms

studim

Tani që kemi kaluar të gjithë hapat, le të hedhim një vështrim përfundimtar se si duket në madhësi të ndryshme të ekranit.

Shembulli # 1

zyrë

Zgjerimi i menusë ngjitëse

Telefon

Zgjerimi i menusë ngjitëse

Shkarkoni DIVI Tani!!!

Shembulli # 2

Kompjuter desktop

Telefon

Shkarkoni DIVI Tani!!!

Përfundim

Në këtë artikull, ne ju treguam se si të krijoni një menu ngjitëse të zgjerueshme duke përdorur të Paketës së Paraqitjes së Divi Mechanic. Ne kemi mbuluar dy shembuj të ndryshëm dizajni që mund t'i modifikoni dhe përdorni në çdo lloj Site Web që ju krijoni!

Shpresojmë që ky tutorial t'ju frymëzojë për projektet tuaja të ardhshme. Divi. Nëse keni ndonjë shqetësim apo sugjerim, na gjeni në pjesa e komenteve për ta diskutuar atë.

Ju gjithashtu mund të konsultoheni 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.

...