Vill du skapa en glidande och responsiv sidomeny i Divi?
När du skapar en webbplats, undrar du ofta vilken typ av rubrik du ska skapa. Det mest använda på webben är den horisontella menyraden högst upp, men det finns även andra alternativ, som en glidmeny.
Glidande menyer hjälper dig oftast att begränsa utrymmet som tas upp av den globala rubriken. Så du kan låta en utdragbar meny visas när din besökare klicka på hamburgerikonen i det övre högra hörnet.
Att använda en utdragbar meny hjälper dig därför att lägga till extra interaktion till din webbplats.
I den här handledningen kommer vi därför att visa dig hur du skapar en med Divis Theme Builder.
Låt oss börja!
undersökningen
Innan vi dyker in i den här handledningen, låt oss först titta på resultatet vi kommer att få.
Gå till Theme Builder och skapa en global rubrik
Gå till Theme Builder
För att komma igång, gå till Theme Builder från Divi-menyn i din WordPress-instrumentpanel och klicka på "Lägg till global rubrik".
Skapa den globala rubriken
Fortsätt genom att välja "Skapa global rubrik".
Skapa en rubrikstil
Avsnitt inställningar
Bakgrundsfärg
Väl i mallredigeraren kommer du att märka ett avsnitt. Öppna det här avsnittet och gör bakgrundsfärgen genomskinlig.
- Bakgrund: rgba (255,255,255,0 XNUMX XNUMX)
avstånd
Byt till fliken Stil och ta bort alla nedre och övre marginaler.
- Innermarginal Vertex: 0px
- Nedre intern marginal: 0px
Inlägg
Därefter kommer vi att ändra positionen för avsnittet genom att gå till fliken Avancerat och ändra positionsinställningarna.
- Position: Fast
- Plats: Top center
Lägg till den första raden
Strukturen av kolonnen
När du har slutfört avsnittsinställningarna lägger du till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler än, öppna radinställningarna och ändra storleksinställningarna enligt följande:
- Maximal bredd: 97%
- Maximal bredd: 100%
avstånd
Ändra avståndsinställningarna.
- Maximal intern marginal: 1 %
- Nedre intern marginal: 0px
huvudelement
Gå sedan till den avancerade fliken och lägg till två rader med CSS-kod till radens huvudelement. Detta kommer att hjälpa oss att justera vertikalt innehåll i kolumnen i vår rad.
display: flex;
align-items: center;
Lägg till en bildmodul i kolumn 1
Ladda ner logotyp
Det är dags att lägga till moduler, börja med en bildmodul i kolumn 1. Ladda upp din logotyp.
Lägg till en textmodul i kolumn 3
Lägg till 3 mellanslag till innehållsområdet
<spanclass="line line-1"></span>
<spanclass="line line-2"></span>
<spanclass="line line-3"></span>
Bakgrundsfärg
Ändra bakgrundsfärgen för modulen.
- Bakgrund: rgba (0,0,0,0.04 XNUMX XNUMX)
Textinställningar
Växla sedan till fliken Stil och ta bort textradshöjden. Detta kommer att hjälpa oss att ha full kontroll över de omfattningar vi har lagt till.
- Textradshöjd: 0em
dimensionering
Vi kommer att ändra modulstorleksparametrarna.
- Maximal bredd: 120 pixlar
- Textjustering: höger
avstånd
Och vi kommer att slutföra modulparametrarna genom att omvandla modulen till en kvadrat. För detta kommer vi att använda anpassade utfyllnadsvärden i avståndsinställningarna.
- Innermarginal Vertex: 40px
- Nedre intern marginal: 60px
- Vänster innermarginal: 40px
- Inre marginal höger: 40px
Lägg till den andra raden
Strukturen av kolonnen
Nästa rad! Vi kommer att använda den här raden för att designa hela vår glidande meny. Använd följande kolumnstruktur:
Bakgrundsfärg
Utan att lägga till moduler, öppna radinställningar och ändra bakgrundsfärgen enligt följande:
- Bakgrund: #e7e0e2
Bakgrundsbild
Vi använder också en mönstrad bakgrundsbild. Du kan använda ett valfritt bakgrundsmönster.
- Bakgrundsbildstorlek: verklig storlek
- Bakgrundsbildens position: mitten
- Upprepa bakgrundsbild: Upprepa
dimensionering
Växla sedan till fliken Stil och ändra storleksinställningarna därefter:
- Använd anpassad rännbredd: Ja
- Kolumnavstånd: 1
- Maximal bredd: 20 % (dator), 40 % (surfplatta), 60 % (telefon)
- Höjd: 100vh
avstånd
Ändra även avståndsinställningarna på olika skärmstorlekar.
- Summit intern marginal: 10 vw (dator), 30 vw (surfplatta), 40 vw (telefon)
gräns
Och slutför linjeparametrarna genom att lägga till en vänsterkant.
- Vänster kantbredd: 10px
- Vänster kantfärg: #24394a
- Vänster kantstil: Dubbel
Lägg till en textmodul i kolumnen
Lägg till innehåll
Det är dags att lägga till det första textmodulens menyalternativ! Lägg till kopian i rutan innehåll.
Lägg till en länk
Fortsätt genom att lägga till en relevant länk till menyalternativet.
- Modullänk URL: #
Bakgrundsfärg
Ändra sedan bakgrundsfärgen.
- Bakgrund: rgba (216,210,212,0.35 XNUMX XNUMX)
Textinställningar
Växla sedan till Style'3-fliken och ändra textinställningarna enligt följande:
- Texttypsnitt: Domine
- Mjuk ljus text: fet text
- Textfärg Text: #000000
- Text Textstorlek: 1vw (dator), 2vw (surfplatta), 3vw (telefon)
- Textjustering: Centrerad
avstånd
Komplettera modulinställningarna genom att lägga till anpassade avståndsvärden på olika skärmstorlekar.
- Nedre marginal: 1vw (dator), 2vw (surfplatta), 3vw (telefon)
- Maximal inre marginal: 1vw
- Nedre inre marginal: 1vw
Klona textmodul (1 modul per menyalternativ)
När du har slutfört den första menypostens textmodul kan du klona den så många gånger som behövs. Se bara till att dina moduler inte överstiger fönstrets höjd.
Redigera Duplicera Text-modulens innehåll och länkar
Ändra innehåll och länkarna för varje Duplicate Text-modul.
Lägg till knappmodul till kolumn
Lägg till en kopia
Den sista modulen vi behöver i den här raden är en knappmodul. Lägg till en kopia av ditt val.
Lägg till en länk
Lägg även till en länk.
- Knapplänk URL: #
uppriktning
Växla till fliken Stil och ändra knappjusteringen.
- Knappinriktning: centrerad
Knappinställningar
Fortsätt genom att anpassa knappmodulen enligt följande:
- Använd anpassade stilar för knappen: Ja
- Knapptextstorlek: 0,7 vw (dator), 1,5 vw (surfplatta), 2,5 vw (telefon)
- Knappens textfärg: #000000
- Bakgrundsknapp: rgba (0,0,0,0)
- Kantfärg på knapp: #24394a
- Kantradieknapp: 0 pixlar
- Knappbokstavsavstånd: 4px
- Teckensnittsknapp: Öppna Ingen
- Knapp för mjukt ljus: fet text
- Kopiera stilknapp: TT
avstånd
Och slutför modulinställningarna genom att lägga till anpassade avståndsvärden på olika skärmstorlekar.
- Toppmarginal: 5vw
- Maximal intern marginal: 1vw (dator), 2vw (surfplatta), 3vw (telefon)
- Inre marginal Botten: 1vw (dator), 2vw (surfplatta), 3vw (telefon)
- Intern marginal vänster: 1,8 vw (dator), 3 vw (surfplatta), 4 vw (telefon)
- Höger innermarginal: 1,8 vw (dator), 3 vw (surfplatta), 4 vw (telefon)
Lägg till glidfunktion
Lägg till CSS ID till menyikonens textmodul
Nu när vi har alla element på plats är det dags att skapa den responsiva glidande menyeffekten! Öppna först textmodulen (som innehåller omfattningarna) i den tredje kolumnen på din första rad och använd ett anpassat CSS-ID på fliken Avancerat. Vi kommer att använda detta CSS ID för att skapa en klickfunktion i vår kod.
- CSS-ID: slide-in-open
Lägg till CSS-klass på rad #2
Öppna sedan den andra raden, gå till fliken Avancerat och lägg till en anpassad CSS-klass. När du klickar på den kommer linjen att glida.
- CSS-klass: slide-in-menu-container
Ändra placeringen av linje #2
Vi kommer också att flytta om denna linje. Lägg märke till hur den horisontella offseten matchar linjebredden på olika skärmstorlekar i storleksinställningarna.
- Position: Absolut
- Plats: Överst till höger
- Horisontell offset: -20% (dator), -40% (surfplatta), -60% (telefon)
Ändra opaciteten för linje 2
Och ställ opaciteten till 0 i ett standardtillstånd.
opacity: 0;
Lägg till kodmodulen i den andra kolumnen i den första raden
Infoga CSS-kod
För att skapa klickfunktionseffekten och styla stavarna på vår hamburgerikon behöver vi lite CSS-kod. Lägg till en kodmodul i den andra kolumnen på din första rad och placera följande rader med CSS-kod mellan stiltaggarna, som du kan se på utskriftsskärmen nedan:
#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;
}
Infoga JQuery-kod
Vi kommer också att behöva lägga till lite JQuery för klickfunktionen. Se till att du placera kod mellan skripttaggar , som du kan se på utskriftsskärmen nedan:
jQuery(function($){ $('#slide-in-open').click(function(){ $(this).toggleClass('open'); $('.slide-in-menu-container') .toggleClass('slide-in-menu'); }); });
Spara ändringar i temabyggaren och visa resultatet på webbplatsen
När du har slutfört alla delar av din globala rubrik är allt du behöver göra att spara alla ändringar och visa resultatet på din webbplats!
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på resultatet.
Slutsats
Sammanfattningsvis, i den här artikeln visade vi dig hur du använder Divis temabyggare för att skapa en responsiv glidmeny. För detta har vi kombinerat det bästa av Divis inbyggda element och alternativ med en anpassad klickfunktionskod. Så det låter dig fokusera på att designa utdragningsmenyn och låta koden ta hand om den funktionella delen av den globala rubriken!
Om du har några frågor eller förslag, lämna gärna en kommentar i kommentarfältet nedan.
