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
Telefon
Shkarkoni DIVI Tani!!!
Shembull 2
Kompjuter desktop
Telefon
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
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ë
Telefon
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.
...