Kunne du tænke dig at være kreativ ved at oprette en udvidelig klæbrig menu, når du svæver med Divi ?
I denne vejledning vil vi vise dig, hvordan du opretter en udvidelig klæbrig menu, når du svæver ved hjælp af af Divi's Mechanic Layout Pack .
Vi håndterer to forskellige prøvedesigns, som du kan genskabe fra bunden og anvende til enhver type Websted som du skaber!
Menuen vil blive vist ved svæv på skrivebordet og aktiveret ved klik på mobile enheder.
Lad os gå!
undersøgelse
Før vi dykker ned i denne tutorial, lad os tage et hurtigt kig på resultatet på forskellige skærmstørrelser.
Eksempel 1
Stationær computer
Mobil
Download DIVI nu!!!
Eksempel 2
Stationær computer
Mobil
Download DIVI nu!!!
Generelle trin
Deaktiver fast navigation
Få adgang til Divi-temamulighederne
Vi starter med nogle generelle trin. Disse trin er de samme for begge eksempler og er nødvendige for at opnå det ønskede resultat.
Hvis du planlægger at bruge en udvidende klæbrig menu nederst på din side, vil du måske udelade hovedmenulinjen øverst.
Læs også: Sådan opretter du brugerdefinerede billedoverlejringer i Divi
For dette bliver du nødt til at gå Divi >> Temaindstillinger fra WordPress-dashboardet
Deaktiver fast navigation
Der bliver du nødt til at deaktivere "Fixed Navigation Bar" for at sikre, at der ikke er plads tilbage øverst på din side.
- Fast navigationslinje: Deaktiveret
Skjul hovedmenulinjen på siden
Åbn sideindstillinger
Gå til siden, hvor du vil tilføje den udvidelige klæbende menu, og åbn sideindstillingerne.
Tilføj tilpasset CSS
Skjul hovedmenuen ved at tilføje følgende linjer med CSS-kode til din side.
#main-header {
display: none;
}
Tilføj et nyt afsnit i slutningen af siden
Uanset hvilket eksempel du vil genskabe, forbliver nogle af de grundlæggende trin de samme. Det første trin er at tilføje en almindelig sektion nederst på siden.
afstand
Åbn sektionsindstillinger og skift følgende indstillinger på fanen Design under mulighed Mellemrum.
- Polstring (top og bund): 0px
Tilføj en ny linje
Struktur af søjlen
Fortsæt ved at tilføje en ny række ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje nogen moduler endnu, skal du åbne linjeindstillingerne og ændre følgende indstillinger på fanen Design under mulighed dimensionering
- Brug tilpasset tagrendebredde: JA
- Rendebredde: 1
- Bredde: 100 %
- Maks. bredde: 100 %
afstand
Fjern derefter al standard top- og bundpolstring under indstillingen Mellemrum.
- Polstring (top og bund): 0px
Hovedelement
Vi tillader hele rækken at holde sig til bunden af vores side ved at tilføje to enkle linjer med CSS-kode til hovedrækkeelementet.
bottom: 0px;
position: fixed;
Z-indeks
Og vi sørger for, at linjen (og tekstmodulet, vi tilføjer i de næste trin) forbliver på toppen af alt indhold af siden ved at øge Z-indekset, Udvid muligheden Position.
- Z-indeks: 99
Tilføj kodemodul til kolonne
Tilføj CSS-kode mellem stiltags
Den sidste del af de generelle trin er at tilføje et kodemodul til den nye række. Den CSS-kode, vi tilføjer i dette kodemodul, hjælper os med at opnå den afslørende effekt ved svævning.
Se også: Sådan opretter du en Spinning Wheel Menu på Hover i Divi
Indsæt følgende linjer med CSS-kode i modulet:
<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>
Eksempeldesign #1
Tilføj et tekstmodul til kolonnen
Tilføj indhold
Nu hvor vi har gennemgået alle trinene, kan vi begynde at fokusere på de to forskellige designeksempler, begyndende med det første!
Tilføj et tekstmodul til kolonnen i din række. I området ved indhold, bruger vi afsnitsstilen til at vise teksten '≡Menu'.
Vi placerer derefter alle menupunkter i en uordnet liste. Vi vil også tilføje et link til hver af sidetitlerne individuelt.
Standard baggrundsfarve
Gå til modulets baggrundsindstillinger og skift baggrundsfarven.
- Baggrund: #ffffff
Baggrundsfarve ved svæv
Skift denne baggrundsfarve, når du svæver.
- Baggrund (Hover): rgba(255,255,255,0.83)
Gradient baggrund
Og tilføje også standard gradient baggrund.
- Farve venstre: rgba(255,255,255,0)
- Højre farve: #ffffff
- Stilling højre: 60%
Standard tekstindstillinger
Fortsæt ved at gå til fanen Design og ændre tekstindstillingerne.
- Tekstskrifttype: Khand
- Skrifttypevægt: Fed
- Tekstfarve: #021827
- Tekststørrelse: 3vh
- Orientering: Center
Hold markørindstillinger
Skift nogle af indstillingerne for svævetekst.
- Tekstfarve (Hover: rgba(255,255,255,0)
- Tekststørrelse (Hover): 0vh
Indstillinger for linktekst
Gå derefter til linktekstindstillingerne og skift linktekstfarven.
- Linktekstfarve: #000000
Listestandarder (skrivebord)
Skift til standardlistetekstindstillingerne, og tilpas den som du ønsker. Sørg for, at du bruger '0px' til tekststørrelsen i standardtilstanden.
- Uordnet listeskrifttype: Khand
- Liste skrifttypestil: TT
- Listetekstjustering: centreret
- Uordnet tekstfarve: rgba(255,255,255,0)
- Uordnet listetekststørrelse: 0px
- Listetekst Vægt: 0em
- Uordnet List Style Position: Indvendig
Indstillinger for svæveliste
Skift derefter nogle af værdierne, når du svæver for at tillade, at menupunkter vises.
- Listetekstfarve (hover): #000000
- Uordnet listetekststørrelse (hover): 2vh
- Uordnet listeteksthøjde (hover): 2,1 em
Standardafstand (skrivebord)
Gå derefter til afstandsindstillingerne (option Mellemrum) og giv en form til tekstmodulet.
- Margen (venstre og højre): 45vw (desktop), 39vw (tablet), 33vw (telefon)
- Polstring (top og bund): 2vw (desktop), 4vw (tablet), 6vw (telefon)
Hover afstand
Rediger de samme værdier, når du svæver.
- Margin (venstre og højre): 14vw
- Polstring (top og bund): 8vw
Standardkant (skrivebord)
Gå til kantindstillinger og sørg for, at hvert af de afrundede hjørner har en værdi på '0px'.
Grænse ved svæv
Aktiver svæveindstillinger på afrundede hjørner og skift værdier til øverst til venstre og øverst til højre.
- Øverst til venstre: 50vw
- Øverst til højre: 50vw
Skyggeæske
Fortsæt ved at give dybde til modulet ved hjælp af en boksskygge. Dette vil sikre, at menuen ikke går ubemærket hen på siden.
- Box Shadows Blur Styrke: 1000px
- Skyggefarve: rgba(0,0,0,0.68)
CSS klasse
Vi tilføjer også en CSS-klasse til modulet.
- CSS-klasse: dt-menu
Overgange
Til sidst skal du reducere overgangsvarigheden i overgangsindstillingerne.
- Overgangsvarighed: 100ms
Eksempeldesign #2
Tilføj et tekstmodul til kolonnen
Tilføj indhold
Lad os gå videre til det andet eksempel! Her vil vi igen tilføje '≡Menu' ved hjælp af afsnitstekststilen og menupunkter ved hjælp af en uordnet liste. Vi tilføjer også et link til hvert af menupunkterne individuelt.
Standard baggrundsfarve (skrivebord)
Gå til baggrundsindstillinger og skift baggrundsfarven.
- Baggrund: #ffffff
Baggrundsfarve ved svæv
Skift baggrundsfarven, når du svæver.
- Baggrund (Hover): #f71535
Standard tekstindstillinger (skrivebord)
Gå derefter til fanen Design og foretage nogle ændringer i tekstens udseende.
- Tekstskrifttype: Khand
- Skrifttypevægt: Fed
- Tekstfarve: #021827
- Tekststørrelse: 3vh
Hold musemarkøren over tekstindstillinger
Skift disse indstillinger, når du svæver.
- Tekstfarve (Hover): rgba(255,255,255,0)
- Tekststørrelse (Hover): 0vh
Indstillinger for linktekst
Gå til tekstindstillinger og skift linktekstfarven.
- Linktekstfarve: #ffffff
Standard indstillinger for listetekst
Skift også designindstillingerne for de uordnede listeelementer.
- Uordnet listeskrifttype: Khand
- Uordnet liste skrifttypestil: TT
- Listetekstjustering: center
- Uordnet listetekstfarve: rgba(255,255,255,0)
- Listetekststørrelse: 0px
- Uordnet listelinjehøjde: 0em
- Uordnet List Style Position: Indvendig
Indstillinger for svæveliste
Og skift nogle af disse værdier, når du svæver.
- Uordnet listetekstfarve: #ffffff
- Listetekst Størrelse: 2vh
- Uordnet listelinjehøjde: 2,1 em
Standardafstand (skrivebord)
Gå derefter til afstandsindstillingerne og giv modulet lidt plads.
- Margen (højre): 88 vw (desktop og tablet), 71 vw (telefon)
- Polstring (øverst): 6 vw (desktop)), 10 vw (tablet), 18 vw (telefon)
- Polstring (bund): 4 vw (desktop), 10 vw (tablet), 12 vw (telefon)
- Venstre polstring: 1vw
Hover afstand
Skift værdier ved at svæve.
- Margin (højre): 59vw
- Polstring: (øverst)13vw, (bund)8vw, (venstre)1vw, (højre)13vw
grænse
Og for at skabe dette kvartcirkeldesign vil vi ændre den øverste højre kant i kantindstillingerne.
- Øverst til højre: 50vw
Skyggeæske
Vi tilføjer også en boksskygge for at skabe dybde på siden.
- Box Shadow Blur Styrke: 1000px
- Skyggefarve: rgba(0,0,0,0.68)
CSS klasse
Dernæst tilføjer vi en CSS-klasse i fanen Avanceret.
- CSS-klasse: dt-menu
Overgange
Og reducer varigheden af overgangen i fanen Avanceret for at skabe en hurtig overgang.
- Overgangsvarighed: 100ms
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på, hvordan det ser ud på forskellige skærmstørrelser.
Eksempel # 1
kontor
Mobil
Download DIVI nu!!!
Eksempel # 2
Stationær computer
Mobil
Download DIVI nu!!!
Konklusion
I denne artikel viste vi dig, hvordan du opretter en udvidelig klæbrig menu ved hjælp af af Divi Mechanic Layout Pack. Vi har dækket to forskellige designeksempler, som du kan ændre og bruge på enhver type Websted som du skaber!
Vi håber, at denne vejledning vil inspirere dig til dine næste projekter. Divi. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
