Vil du lage en glidende og responsiv sidemeny i Divi?
Når du oppretter en nettstedet Web, lurer du ofte på hvilken type overskrift du skal lage. Det mest brukte på nettet er den horisontale menylinjen øverst, men det finnes også andre alternativer, for eksempel en skyvemeny.
Skyvemenyer hjelper deg oftest med å begrense plassen som tas opp av den globale overskriften. Så du kan la en uttrekkbar meny vises når din Besøkende klikk på hamburgerikonet i øvre høyre hjørne.
Derfor hjelper bruk av en uttrekksmeny deg å legge til ekstra interaksjon til din nettstedet Web.
I denne opplæringen vil vi derfor vise deg hvordan du lager en ved hjelp av Divis Theme Builder.
La oss starte!
undersøkelsen
Før vi dykker ned i denne opplæringen, la oss først se på resultatet vi skal få.
Gå til Theme Builder og lag en global overskrift
Gå til Theme Builder
For å komme i gang, gå til Theme Builder fra Divi-menyen i WordPress-dashbordet og klikk på "Legg til global overskrift".
Opprett den globale overskriften
Fortsett ved å velge "Opprett global overskrift".
Lag en overskriftsstil
Seksjonsinnstillinger
Bakgrunnsfarge
Når du er i maleditoren, vil du legge merke til en seksjon. Åpne denne delen og gjør bakgrunnsfargen gjennomsiktig.
- Bakgrunn: rgba (255,255,255,0)
avstanden
Bytt til Stil-fanen og fjern alle bunn- og toppmarger.
- Inner Margin Vertex: 0px
- Nedre intern margin: 0px
Innlegg
Deretter endrer vi posisjonen til seksjonen ved å gå til avansert-fanen og endre posisjonsinnstillingene.
- Posisjon: Fast
- Sted: Topp sentrum
Legg til den første linjen
Struktur av kolonnen
Når du har fullført seksjonsinnstillingene, legger du til en ny rad ved å bruke følgende kolonnestruktur:
dimensjonering
Uten å legge til noen moduler ennå, åpner du radinnstillingene og endrer størrelsesinnstillingene som følger:
- Maksimal bredde: 97%
- Maksimal bredde: 100%
avstanden
Endre avstandsinnstillingene.
- Maksimal intern margin: 1 %
- Nedre intern margin: 0px
hovedelement
Deretter går du til fanen avansert og legger til to linjer med CSS-kode til hovedelementet i linjen. Dette vil hjelpe oss vertikalt justere innhold av kolonnen i raden vår.
display: flex;
align-items: center;
Legg til en bildemodul i kolonne 1
Last ned logo
Det er på tide å legge til moduler, og starter med en bildemodul i kolonne 1. Last opp logoen din.
Legg til en tekstmodul i kolonne 3
Legg til 3 mellomrom til innholdsområdet
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Bakgrunnsfarge
Endre bakgrunnsfargen til modulen.
- Bakgrunn: rgba (0,0,0,0.04)
Tekstinnstillinger
Bytt deretter til Stil-fanen og fjern tekstlinjehøyden. Dette vil hjelpe oss å ha full kontroll over omfangene vi har lagt til.
- Tekstlinjehøyde: 0em
dimensjonering
Vi skal endre modulstørrelsesparametrene.
- Maksimal bredde: 120 piksler
- Tekstjustering: høyre
avstanden
Og vi vil fullføre modulparametrene ved å transformere modulen til en firkant. For dette vil vi bruke egendefinerte utfyllingsverdier i avstandsinnstillingene.
- Inner Margin Vertex: 40px
- Nedre intern margin: 60px
- Venstre indre marg: 40px
- Innvendig marg høyre: 40px
Legg til den andre linjen
Struktur av kolonnen
Neste rad! Vi vil bruke denne linjen til å designe hele skyvemenyen vår. Bruk følgende kolonnestruktur:
Bakgrunnsfarge
Uten å legge til moduler, åpne radinnstillinger og endre bakgrunnsfargen som følger:
- Bakgrunn: #e7e0e2
Bakgrunnsbilde
Vi bruker også et mønstret bakgrunnsbilde. Du kan bruke et bakgrunnsmønster etter eget valg.
- Bakgrunnsbildestørrelse: faktisk størrelse
- Bakgrunnsbildeposisjon: midt
- Gjenta bakgrunnsbilde: Gjenta
dimensjonering
Deretter bytter du til Style-fanen og endrer størrelsesinnstillingene tilsvarende:
- Bruk egendefinert takrennebredde: Ja
- Kolonneavstand: 1
- Maksimal bredde: 20 % (stasjonær PC), 40 % (nettbrett), 60 % (telefon)
- Høyde: 100vh
avstanden
Endre også avstandsinnstillingene på forskjellige skjermstørrelser.
- Summit intern margin: 10 vw (stasjonær), 30 vw (nettbrett), 40 vw (telefon)
grensen
Og fullfør linjeparametrene ved å legge til en venstre kantlinje.
- Venstre kantbredde: 10px
- Venstre kantfarge: #24394a
- Venstre kantstil: Dobbel
Legg til en tekstmodul i kolonnen
Legg til innhold
Det er på tide å legge til det første tekstmodulmenyelementet! Legg kopien til boksen innhold.
Legg til en kobling
Fortsett ved å legge til en relevant lenke til menypunktet.
- Modullink URL: #
Bakgrunnsfarge
Endre deretter bakgrunnsfargen.
- Bakgrunn: rgba (216,210,212,0.35)
Tekstinnstillinger
Deretter bytter du til Style'3-fanen og endrer tekstinnstillingene som følger:
- Tekstfont: Domine
- Myk lys tekst: fet tekst
- Tekstfarge Tekst: #000000
- Tekst Tekststørrelse: 1vw (stasjonær), 2vw (nettbrett), 3vw (telefon)
- Tekstjustering: Sentrert
avstanden
Fullfør modulinnstillingene ved å legge til egendefinerte avstandsverdier på forskjellige skjermstørrelser.
- Bunnmargin: 1vw (stasjonær), 2vw (nettbrett), 3vw (telefon)
- Topp indre margin: 1vw
- Innvendig bunnmargin: 1vw
Klone tekstmodul (1 modul per menyelement)
Når du har fullført den første menyelementtekstmodulen, kan du klone den så mange ganger som nødvendig. Bare pass på at modulene dine ikke overskrider høyden på vinduet.
Rediger duplikattekstmodulinnhold og koblinger
Endre innhold og koblingene til hver Duplicate Text-modul.
Legg til knappmodul til kolonne
Legg til en kopi
Den siste modulen vi trenger i denne raden er en Button-modul. Legg til en kopi av ditt valg.
Legg til en kobling
Legg også til en lenke.
- Button Link URL: #
justering
Bytt til kategorien Stil og endre knappjusteringen.
- Knappjustering: sentrert
Knappeinnstillinger
Fortsett ved å tilpasse knappemodulen som følger:
- Bruk egendefinerte stiler for knappen: Ja
- Knappetekststørrelse: 0,7 vw (stasjonær), 1,5 vw (nettbrett), 2,5 vw (telefon)
- Tekstfarge på knapp: #000000
- Bakgrunnsknapp: rgba (0,0,0,0)
- Knappkantfarge: #24394a
- Kantradiusknapp: 0 piksler
- Knappebokstavavstand: 4px
- Fontknapp: Åpne Ingen
- Myk lysknapp: fet tekst
- Kopier stilknapp: TT
avstanden
Og fullfør modulinnstillingene ved å legge til egendefinerte avstandsverdier på forskjellige skjermstørrelser.
- Toppmargin: 5vw
- Maksimal intern margin: 1vw (stasjonær), 2vw (nettbrett), 3vw (telefon)
- Inner margin Bunn: 1vw (stasjonær), 2vw (nettbrett), 3vw (telefon)
- Intern margin venstre: 1,8 vw (stasjonær), 3 vw (nettbrett), 4 vw (telefon)
- Høyre indre marg: 1,8 vw (stasjonær), 3 vw (nettbrett), 4 vw (telefon)
Legg til skyvefunksjonalitet
Legg til CSS ID til menyikontekstmodul
Nå som vi har alle elementene på plass, er det på tide å lage den responsive glidende menyeffekten! Først åpner du tekstmodulen (som inneholder omfanget) i den tredje kolonnen i den første raden din og bruker en tilpasset CSS-ID i avansert-fanen. Vi vil bruke denne CSS-ID-en til å lage en klikkfunksjon i koden vår.
- CSS-ID: skyve-i-åpen
Legg til CSS-klasse på linje #2
Åpne så den andre linjen, gå til fanen avansert og legg til en tilpasset CSS-klasse. Når du klikker, vil linjen gli.
- CSS-klasse: slide-in-meny-beholder
Endre plasseringen av linje #2
Vi vil også reposisjonere denne linjen. Legg merke til hvordan den horisontale forskyvningen samsvarer med linjebredden på forskjellige skjermstørrelser i størrelsesinnstillingene.
- Stilling: Absolutt
- Sted: Øverst til høyre
- Horisontal forskyvning: -20 % (stasjonær datamaskin), -40 % (nettbrett), -60 % (telefon)
Endre opasiteten til linje 2
Og sett opasiteten til 0 i en standardtilstand.
opacity: 0;
Legg til kodemodulen i den andre kolonnen i den første raden
Sett inn CSS-kode
For å lage klikkfunksjonseffekten og style stavene til hamburgerikonet vårt, trenger vi litt CSS-kode. Legg til en kodemodul i den andre kolonnen i den første raden din og plasser følgende linjer med CSS-kode mellom stiltaggene, som du kan se på utskriftsskjermen 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;
}
Sett inn JQuery-kode
Vi må også legge til litt JQuery for klikkfunksjonen. Vær sikker på at du plasser kode mellom skripttagger , som du kan se på utskriftsskjermen nedenfor:
jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('slide-in-menu'); }); });
Lagre endringer i temabyggeren og vis resultatet på nettstedet
Når du har fullført alle elementene i den globale overskriften din, er alt du trenger å gjøre å lagre alle endringene og vise resultatet på nettstedet ditt!
undersøkelsen
Nå som vi har gått gjennom alle trinnene, la oss ta en siste titt på resultatet.
konklusjonen
Avslutningsvis, i denne artikkelen, viste vi deg hvordan du bruker Divis temabygger for å lage en responsiv skyvemeny. For dette har vi kombinert det beste av Divis innebygde elementer og alternativer med en tilpasset klikkfunksjonskode. Så, det lar deg fokusere på å designe uttrekksmenyen og la koden ta seg av den funksjonelle delen av den globale overskriften!
Hvis du har spørsmål eller forslag, er du velkommen til å legge igjen en kommentar i kommentarfeltet nedenfor.
