Vil du oprette en glidende og responsiv sidemenu i Divi?
Når du opretter en Websted, spekulerer du ofte på, hvilken type header du skal oprette. Den mest brugte på nettet er den vandrette menulinje øverst, men der er også andre muligheder, såsom en glidende menu.
Glidende menuer hjælper dig oftest med at begrænse den plads, der optages af den globale overskrift. Så du kan lade en slide-out menu vises, når din besøgende klik på hamburgerikonet i øverste højre hjørne.
Derfor hjælper brugen af en slide-out-menu dig med at tilføje ekstra interaktion til din Websted.
I denne vejledning vil vi derfor vise dig, hvordan du opretter en ved hjælp af Divi's Theme Builder.
Lad os starte!
undersøgelse
Før vi dykker ned i denne tutorial, lad os først se på det resultat, vi får.
Gå til Theme Builder og opret en global header
Gå til Theme Builder
For at komme i gang skal du gå til Theme Builder fra Divi-menuen i dit WordPress-dashboard og klikke på "Tilføj Global Header".
Opret den globale header
Fortsæt ved at vælge 'Create global header'.
Opret en header-stil
Sektionsindstillinger
Baggrundsfarve
Når du først er i skabeloneditoren, vil du bemærke en sektion. Åbn dette afsnit og gør baggrundsfarven gennemsigtig.
- Baggrund: rgba (255,255,255,0)
afstand
Skift til fanen Stil og fjern alle bund- og topmargener.
- Indre margin toppunkt: 0px
- Bund intern margin: 0px
Indlæg
Dernæst ændrer vi sektionens placering ved at gå til avanceret fane og ændre positionsindstillingerne.
- Position: Fast
- Beliggenhed: Øverst i midten
Tilføj den første linje
Struktur af søjlen
Når du har gennemført sektionsindstillingerne, skal du tilføje en ny række ved hjælp af følgende kolonnestruktur:
dimensionering
Uden at tilføje moduler endnu, skal du åbne rækkeindstillingerne og ændre størrelsesindstillingerne som følger:
- Maksimal bredde: 97%
- Maksimal bredde: 100%
afstand
Skift mellemrumsindstillingerne.
- Maksimal intern margin: 1 %
- Bund intern margin: 0px
hovedelement
Gå derefter til fanen avanceret og tilføj to linjer CSS-kode til linjens hovedelement. Dette vil hjælpe os lodret at justere indhold af kolonnen i vores række.
display: flex;
align-items: center;
Tilføj et billedmodul til kolonne 1
Download logo
Det er tid til at tilføje moduler, startende med et billedmodul i kolonne 1. Upload dit logo.
Tilføj et tekstmodul til kolonne 3
Tilføj 3 mellemrum til indholdsområdet
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Baggrundsfarve
Rediger baggrundsfarven for modulet.
- Baggrund: rgba (0,0,0,0.04)
Tekstindstillinger
Skift derefter til fanen Stil og fjern tekstlinjehøjden. Dette vil hjælpe os med at have fuld kontrol over de områder, vi har tilføjet.
- Tekstlinjehøjde: 0em
dimensionering
Vi vil ændre modulstørrelsesparametrene.
- Maksimal bredde: 120 pixels
- Tekstjustering: højre
afstand
Og vi vil færdiggøre modulparametrene ved at transformere modulet til en firkant. Til dette vil vi bruge brugerdefinerede udfyldningsværdier i afstandsindstillingerne.
- Indre margin toppunkt: 40px
- Bund intern margin: 60px
- Venstre indre margen: 40px
- Indre margen højre: 40px
Tilføj den anden linje
Struktur af søjlen
Næste række! Vi vil bruge denne linje til at designe hele vores glidende menu. Brug følgende kolonnestruktur:
Baggrundsfarve
Uden at tilføje moduler skal du åbne rækkeindstillinger og ændre baggrundsfarven som følger:
- Baggrund: #e7e0e2
Baggrundsbillede
Vi bruger også et mønstret baggrundsbillede. Du kan bruge et baggrundsmønster efter eget valg.
- Baggrundsbilledstørrelse: faktisk størrelse
- Baggrundsbilledets position: i midten
- Gentag baggrundsbillede: Gentag
dimensionering
Skift derefter til fanen Stil og rediger størrelsesindstillingerne i overensstemmelse hermed:
- Brug tilpasset tagrendebredde: Ja
- Kolonneafstand: 1
- Maksimal bredde: 20 % (computer), 40 % (tablet), 60 % (telefon)
- Højde: 100vh
afstand
Skift også afstandsindstillingerne på forskellige skærmstørrelser.
- Summit intern margin: 10 vw (desktop), 30 vw (tablet), 40 vw (telefon)
grænse
Og fuldfør linjeparametrene ved at tilføje en venstre kant.
- Venstre kantbredde: 10px
- Venstre kantfarve: #24394a
- Venstre kantstil: Dobbelt
Tilføj et tekstmodul til kolonnen
Tilføj indhold
Det er tid til at tilføje det første tekstmodul-menupunkt! Tilføj kopien til boksen indhold.
Tilføj et link
Fortsæt ved at tilføje et relevant link til menupunktet.
- Modullink URL: #
Baggrundsfarve
Skift derefter baggrundsfarven.
- Baggrund: rgba (216,210,212,0.35)
Tekstindstillinger
Skift derefter til fanen Style'3 og skift tekstindstillingerne som følger:
- Tekstskrifttype: Domine
- Blødt lys tekst: Fed tekst
- Tekstfarve Tekst: #000000
- Tekst Tekststørrelse: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Tekstjustering: Centreret
afstand
Fuldfør modulindstillinger ved at tilføje brugerdefinerede afstandsværdier på forskellige skærmstørrelser.
- Bundmargen: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Peak indre margin: 1vw
- Bund indvendig margin: 1vw
Klon tekstmodul (1 modul pr. menupunkt)
Når du har afsluttet det første menupunkt tekstmodul, kan du klone det så mange gange som nødvendigt. Bare sørg for, at dine moduler ikke overstiger vinduets højde.
Rediger Duplicate Text-modulets indhold og links
Rediger indhold og linkene til hvert Duplicate Text-modul.
Tilføj knapmodul til kolonne
Tilføj en kopi
Det sidste modul, vi skal bruge i denne række, er et knapmodul. Tilføj en kopi efter eget valg.
Tilføj et link
Tilføj også et link.
- Knap Link URL: #
tilpasning
Skift til fanen Stil, og skift knapjusteringen.
- Knapjustering: centreret
Knapindstillinger
Fortsæt ved at tilpasse knapmodulet som følger:
- Brug brugerdefinerede stilarter til knappen: Ja
- Knaptekststørrelse: 0,7 vw (desktop), 1,5 vw (tablet), 2,5 vw (telefon)
- Knaptekstfarve: #000000
- Baggrundsknap: rgba (0,0,0,0)
- Knapkantfarve: #24394a
- Knap til kantradius: 0 pixels
- Knapbogstavafstand: 4px
- Font-knap: Åbn Ingen
- Blødt lys-knap: Fed tekst
- Kopistil-knap: TT
afstand
Og fuldfør modulindstillinger ved at tilføje brugerdefinerede afstandsværdier på forskellige skærmstørrelser.
- Topmargin: 5vw
- Maksimal intern margin: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Indvendig margin Bund: 1vw (desktop), 2vw (tablet), 3vw (telefon)
- Intern margen venstre: 1,8 vw (computer), 3 vw (tablet), 4 vw (telefon)
- Højre indre margen: 1,8 vw (computer), 3 vw (tablet), 4 vw (telefon)
Tilføj glidende funktionalitet
Tilføj CSS ID til menuikonets tekstmodul
Nu hvor vi har alle elementerne på plads, er det tid til at skabe den responsive glidende menu-effekt! Åbn først tekstmodulet (som indeholder omfanget) i den tredje kolonne i din første række, og brug et brugerdefineret CSS-id på fanen avanceret. Vi vil bruge dette CSS ID til at oprette en klikfunktion i vores kode.
- CSS ID: slide-in-open
Tilføj CSS-klasse til linje #2
Åbn derefter den anden linje, gå til fanen avanceret og tilføj en brugerdefineret CSS-klasse. Når der klikkes, vil linjen glide.
- CSS-klasse: slide-in-menu-container
Skift placeringen af linje #2
Vi vil også flytte denne linje. Bemærk, hvordan den vandrette forskydning matcher linjebredden på forskellige skærmstørrelser i størrelsesindstillingerne.
- Stilling: Absolut
- Beliggenhed: Øverst til højre
- Vandret forskydning: -20 % (computer), -40 % (tablet), -60 % (telefon)
Skift opaciteten af linje 2
Og bring opaciteten til 0 i en standardtilstand.
opacity: 0;
Tilføj kodemodulet til den anden kolonne i den første række
Indsæt CSS-kode
For at skabe klikfunktionseffekten og style stavene på vores hamburgerikon, skal vi bruge noget CSS-kode. Tilføj et kodemodul til den anden kolonne i din første række og placer følgende linjer med CSS-kode mellem stiltagsene, som du kan se på printskærmen nedenfor:
#slide-in-open{
cursor: pointer;
}
.line{
display: block;
position: absolute;
height: 4px;
width: 100%;
background: #24394A;
border-radius: 9px;
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;
}
#slide-in-open.open .line-1{
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
#slide-in-open.open .line-2{
display: none;
}
#slide-in-open.open .line-3{
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.slide-in-menu {
right: 0!important;
opacity: 1!important;
}
.slide-in-menu-container {
-webkit-transition: all0.5s ease !important;
-moz-transition: all0.5s ease !important;
-o-transition: all0.5s ease !important;
-ms-transition: all0.5s ease !important;
transition: all0.5s ease !important;
}
Indsæt JQuery-kode
Vi bliver også nødt til at tilføje noget JQuery til klikfunktionen. Vær sikker på at du placere kode mellem script-tags , som du kan se på printskærmen nedenfor:
jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('slide-in-menu'); }); });
Gem ændringer i temabyggeren og vis resultatet på webstedet
Når du har gennemført alle elementerne i din globale header, skal du blot gemme alle ændringerne og vise resultatet på dit websted!
undersøgelse
Nu hvor vi har gennemgået alle trinene, lad os tage et sidste kig på resultatet.
Konklusion
Afslutningsvis viste vi dig i denne artikel, hvordan du bruger Divis temabygger til at skabe en responsiv glidende menu. Til dette har vi kombineret det bedste af Divis indbyggede elementer og muligheder med en tilpasset klikfunktionskode. Så det lader dig fokusere på at designe slide-out-menuen og lade koden tage sig af den funktionelle del af den globale header!
Hvis du har spørgsmål eller forslag, er du velkommen til at efterlade en kommentar i kommentarfeltet nedenfor.
