I denne veiledningen viser vi deg hvordan du oppretter en rullegardinmenyknapp ved hjelp av Divis menymodul i full bredde. For å gjøre dette oppretter vi først en meny i WordPress. Vi vil da bruke Divis menymodul i full bredde for å vise denne menyen med egendefinerte stiler ved hjelp av Divi-byggherren og litt tilpasset CSS. Resultatet er en praktisk og stilig nedtrekksmenyknapp.
La oss begynne.
undersøkelsen
Her er en oversikt over rullegardinmenyknappen som vi vil integrere i denne opplæringen.
Hva du trenger for å komme i gang
For å komme i gang, hvis du ikke allerede har gjort det, installer og aktiver Divi-tema installert (eller Divi Builder-plugin hvis du ikke bruker Divi-tema). Vi vil bruke Divi-byggeren i begynnelsen for å designe rullegardinmenyen.
Det er det !
Lag en meny i WordPress
Før vi begynner å lage rullegardinmenyen med Divi Builder, må vi først lage en WordPress-meny som vi ønsker å bruke for menymodulen i full bredde. For å gjøre dette, gå til WordPress-dashbordet og gå til Utseende> Menyer. Opprett deretter en ny meny ved å klikke på opprett en ny menykobling, angi et menyenavn og klikke på knappen "Opprett meny".
Foreløpig kan du opprette egendefinerte lenker med "#" som plassholder for URL-en sammen med lenketeksten.
Struktur menyelementene slik at toppmenyelementet har "Lær mer" -linken med tre undermenyelementer.
Husk å lagre menyen etter det.
Slik oppretter du en rullegardinmenyknapp med Divi-breddemenymodulen
Når menyen er opprettet, kan vi begynne å designe rullegardinmenyknappen med Divi. For å starte prosjektet, opprett en ny side i WordPress og bruk Divi Builder til å redigere siden i frontend (visual builder).
Etter det vil du ha et blankt lerret for å begynne å designe i Divi.
Lag falskt innhold
Først legger du til en rad med en kolonne i standardstandarddelen.
Legg til en tekstmodul
Legg deretter til en tekstmodul på linjen med følgende innhold:
Divi-meny Innholdet ditt kommer hit. Rediger eller fjern denne teksten integrert eller i modulen Innholdsinnstillinger. Du kan også style alle aspekter av dette innholdet i modulen Designinnstillinger og til og med bruke tilpasset CSS til denne teksten i modulen Avanserte innstillinger.
Oppdater deretter designparametrene som følger:
Polstring seksjon
Oppdater deretter seksjonsinnstillingen med følgende elementer:
- Polstring: 0px ned
Linjeavstand og kant
Etter at seksjonsfyllet er oppdatert, åpner du linjeinnstillingene og tildeler det et fyll og en liten kant.
- Polstring: 10vw øverst, 10vw nederst, 5vw til venstre, 5vw til høyre
- Bredde på grensen: 1px
Opprette rullegardinmenyknappen
For å lage rullegardinmenyknappen, bruker vi en menymodul i full bredde. Dette vil tillate oss å legge til menyen som ble opprettet tidligere.
Legger til menyen i full bredde
Hvis du vil opprette menymodul i full bredde, legger du til en ny seksjon i full bredde under gjeldende standardseksjon.
Legg deretter til en menymodul i full bredde på linjen.
I popup-vinduet for menyinnstillinger i full bredde (under Innhold) bruker du rullegardinmenyen til å velge menyen du vil vise. Dette skal være den samme menyen som vi opprettet tidligere med navnet "rullegardinmeny".
Fjern deretter standard hvit bakgrunnsfarge for menyen.
Når du har lagt til menyen med fullbreddemenymodulen, lagrer du innstillingene. Vi kommer tilbake til denne modulen litt for å fullføre designet. Men foreløpig legger vi til en bakgrunn for full bredde.
Oppdater designen til seksjonen i full bredde
Åpne innstillingene for full bredde og oppdater følgende:
- Gradient i venstre bakgrunn: # 0047d6
- Høyre bakgrunnsgradient Farge: # 45b2ff
- Maksimal bredde: 240px
- Seksjon Justering: sentrum
Jeg setter maksimal seksjonsbredde til 240 px, da dette samsvarer med bredden på standard rullegardinmenybredde i Divi. Det er også en god størrelse for en knapp på stasjonær og mobil.
- Avrundede hjørner: 5px
I kategorien Avansert legger du til følgende CSS-klasse, overløp og Z-indeks.
- CSS-klasse: nedtrekks-knapp
- Horisontalt overløp: synlig
- Vertikal overløp: synlig
- Z-indeks: 14
CSS-klassen er nødvendig slik at vi kan målrette vår eksterne CSS på denne delen senere. Overløpet må settes til synlig slik at vi kan se rullegardinmenyen. Og Z-indeksen vil hjelpe deg med å holde rullegardinmenyen over alt annet innhold på siden.
Design Fulwidth-menyen
Vi er nå klare til å designe Fulwidth-menymodulen. Åpne innstillingene for fullbreddemenymodulen og oppdater følgende:
- Opprett menykoblinger i full bredde: JA
- Nedtrekks tekstfarge: #ffffff
- Farge på mobilmenyteksten: #ffffff
- Justering av teksten: senter
- Bakgrunnsfarge på rullegardinmenyen: # 45b2ff
- Farge på rullegardinmenyen: #ffffff
- Bakgrunnsfarge på menyen: #45b2ff
- Fontmeny: Kode uten semikondensert
- Font Menu Weight: Semi fet skrift
- Menytekstfarge: #ffffff
- Menytekststørrelse: 16px
- Menyavstand: 2px
- Animasjon av rullegardinmenyen: Utvid
Plasser rullegardinmenyen
For at knappen skal overlappe den nederste grensen, må vi legge til en negativ toppmargin som er nøyaktig halve høyden på knappen.
- Marginen: -40.5px høy
Som du ser, opptar ikke hover-plassen hele knappområdet, og rullegardinmenyen er fortsatt til høyre. For å løse dette problemet kan vi legge til tilpasset CSS.
Legger til tilpasset CSS
Før du legger til den egendefinerte CSS, må du sørge for å legge CSS-ID-en "rullegardin" til seksjonen i full bredde (ikke modulen).
Uten CSS ID vil ikke CSS nedenfor fungere.
For å legge til den tilpassede CSS, åpne sideinnstillingene og lim inn følgende kode i den tilpassede CSS-inndataboksen.
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! viktig; } .dropdown-knapp .fullwidth-meny li> a {padding-bottom: 0px; linjehøyde: 81px; } .dropdown-knapp .fullwidth-meny li li a {padding: 6px 0px; linjehøyde: 1.6em; } .dropdown-button .et_mobile_menu li a: hover, .nav ul li a: hover, .dropdown-button .fullwidth-meny a: hover {opasitet: 1; } .dropdown-knapp .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! viktig; } .dropdown-knapp .fullwidth-meny li {display: block; } .dropdown-knapp .fullwidth-meny .menu-item-has-children> a: first-child: etter {høyre: 20px; }
Her er det endelige resultatet
avslutt~~POS=TRUNC tanker
Å lage en rullegardinmenyknapp ved å bruke Divis menymodul i full bredde innebærer noen få nøkkeltrinn. Først lager vi menyen i WordPress som vi ønsker å integrere i modulen. Deretter bruker vi Divi-byggeren for å style menymodulen i full bredde etter vår smak. Deretter legger vi til tilpasset CSS for å polere designet både på skrivebordet og på mobilen. Resultatet er en vakker (og nyttig) rullegardinmeny rullet ut for skrivebordssveving og mobilklikk. Håper du synes dette er et nyttig tillegg til designverktøysettet ditt.
