Vill du vara kreativ genom att skapa en expanderbar klibbig meny när du håller muspekaren med Divi ?
I den här handledningen kommer vi att visa dig hur du skapar en expanderbar klibbig meny när du svävar av Divi's Mechanic Layout Pack .
Vi kommer att hantera två olika provdesigner som du kan återskapa från grunden och applicera på alla typer av webbplats som du skapar!
Menyn kommer att visas när du håller muspekaren på skrivbordet och aktiveras när du klickar på mobila enheter.
Låt oss gå!
undersökningen
Innan vi dyker in i den här handledningen, låt oss ta en snabb titt på resultatet på olika skärmstorlekar.
Exempel 1
Stationär dator
Mobil
Ladda ner DIVI nu!!!
Exempel 2
Stationär dator
Mobil
Ladda ner DIVI nu!!!
Allmänna steg
Inaktivera fast navigering
Få tillgång till Divi-temaalternativen
Vi börjar med några allmänna steg. Dessa steg är desamma för båda exemplen och är nödvändiga för att uppnå önskat resultat.
Om du planerar att använda en expanderande klibbig meny längst ned på sidan, kanske du vill utelämna huvudmenyraden längst upp.
Läs också: Hur man skapar anpassade bildöverlägg i Divi
För detta måste du gå Divi >> Temaalternativ från WordPress-instrumentpanelen
Inaktivera fast navigering
Där måste du avaktivera "Fast navigeringsfält" för att se till att det inte finns något utrymme kvar överst på sidan.
- Fast navigationsfält: Inaktiverad
Göm huvudmenyraden på sidan
Öppna sidinställningar
Gå till sidan där du vill lägga till den expanderbara klibbiga menyn och öppna sidinställningarna.
Lägg till anpassad CSS
Dölj huvudmenyn genom att lägga till följande rader med CSS-kod på din sida.
#main-header {
display: none;
}
Lägg till ett nytt avsnitt i slutet av sidan
Oavsett vilket exempel du vill återskapa, förblir några av de grundläggande stegen desamma. Det första steget är att lägga till en vanlig sektion längst ner på sidan.
avstånd
Öppna avsnittsinställningar och ändra följande inställningar på fliken Designa under alternativ Förband.
- Utfyllnad (topp och botten): 0px
Lägg till en ny rad
Strukturen av kolonnen
Fortsätt genom att lägga till en ny rad med följande kolumnstruktur:
dimensionering
Utan att lägga till några moduler ännu, öppna linjeinställningarna och ändra följande inställningar på fliken Designa under alternativ Storlek
- Använd anpassad rännbredd: JA
- Rännans bredd: 1
- Bredd: 100 %
- Max bredd: 100 %
avstånd
Ta sedan bort all standard topp- och bottenstoppning, under alternativet Förband.
- Utfyllnad (topp och botten): 0px
Huvudelement
Vi låter hela raden hålla sig till botten av vår sida genom att lägga till två enkla rader med CSS-kod till huvudradens element.
bottom: 0px;
position: fixed;
Z-index
Och vi kommer att se till att raden (och textmodulen som vi lägger till i nästa steg) förblir överst på allt innehåll på sidan genom att öka Z-indexet, expandera alternativet Placera.
- Z-index: 99
Lägg till kodmodul i kolumnen
Lägg till CSS-kod mellan stiltaggar
Den sista delen av de allmänna stegen är att lägga till en kodmodul till den nya raden. CSS-koden vi lägger till i den här kodmodulen hjälper oss att uppnå den avslöjande effekten vid hovring.
Se även: Hur man skapar en snurrhjulsmeny på Hover i Divi
Klistra in följande rader med CSS-kod i modulen:
<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>
Exempeldesign #1
Lägg till en textmodul i kolumnen
Lägg till innehåll
Nu när vi har gått igenom alla steg kan vi börja fokusera på de två olika designexemplen, börja med det första!
Lägg till en textmodul i kolumnen på din rad. I området av innehåll, använder vi styckeformatet för att visa texten '≡Meny'.
Vi placerar sedan alla menyalternativ i en oordnad lista. Vi kommer också att lägga till en länk till var och en av sidtitlarna individuellt.
Standard bakgrundsfärg
Gå till modulens bakgrundsinställningar och ändra bakgrundsfärgen.
- Bakgrund: #ffffff
Bakgrundsfärg på svävaren
Ändra denna bakgrundsfärg när du svävar.
- Bakgrund (hovra): rgba(255,255,255,0.83)
Lutningbakgrund
Och lägg även till standardgradientbakgrund.
- Färg vänster: rgba(255,255,255,0)
- Rätt färg: #ffffff
- Position höger: 60%
Standardinställningar för text
Fortsätt genom att gå till fliken Designa och ändra textinställningarna.
- Texttypsnitt: Khand
- Teckensnittsvikt: Fet
- Textfärg: #021827
- Textstorlek: 3vh
- Inriktning: Centrum
Hover textinställningar
Ändra några av inställningarna för svävtext.
- Textfärg (Hover: rgba(255,255,255,0)
- Textstorlek (svävare): 0vh
Länktextinställningar
Gå sedan till länktextinställningarna och ändra länktextfärgen.
- Länktextfärg: #000000
Lista standardvärden (skrivbord)
Växla till standardinställningarna för listtext och anpassa den som du vill. Se till att du använder '0px' för textstorleken i dess standardläge.
- Teckensnitt för oordnad lista: Khand
- Lista teckensnitt: TT
- Listtextjustering: centrerad
- Oordnad textfärg: rgba(255,255,255,0)
- Oordnad lista Textstorlek: 0px
- Listtext Vikt: 0em
- Oordnad liststil Position: Inuti
Inställningar för muspekaren
Ändra sedan några av värdena när du håller muspekaren för att tillåta menyalternativ att visas.
- Listtextfärg (Hover): #000000
- Oordnad listtextstorlek (hover): 2vh
- Oordnad lista Text Höjd (Hover): 2,1 em
Standardavstånd (skrivbord)
Gå sedan till avståndsinställningarna (alternativ Förband) och ge en form till textmodulen.
- Marginal (vänster och höger): 45vw (dator), 39vw (surfplatta), 33vw (telefon)
- Stoppning (topp och botten): 2vw (dator), 4vw (surfplatta), 6vw (telefon)
Hover Avstånd
Ändra samma värden när du håller muspekaren.
- Marginal (vänster och höger): 14vw
- Stoppning (topp och botten): 8vw
Standardgräns (skrivbord)
Gå till kantinställningar och se till att vart och ett av de rundade hörnen har ett värde på '0px'.
Gräns vid svävning
Aktivera hovringsalternativ på rundade hörn och ändra värden till övre vänstra och övre högra.
- Överst till vänster: 50vw
- Överst till höger: 50vw
Skugga låda
Fortsätt genom att ge modulen djup med hjälp av en boxskugga. Detta kommer att säkerställa att menyn inte går obemärkt förbi på sidan.
- Box Shadows Blur Styrka: 1000px
- Skuggfärg: rgba(0,0,0,0.68)
CSS klass
Vi lägger även till en CSS-klass i modulen.
- CSS-klass: dt-meny
övergångar
Minska slutligen övergångslängden i övergångsinställningarna.
- Övergångslängd: 100ms
Exempeldesign #2
Lägg till en textmodul i kolumnen
Lägg till innehåll
Låt oss gå vidare till det andra exemplet! Här kommer vi att lägga till igen '≡Meny' använda stycketextstilen och menyalternativ med en oordnad lista. Vi kommer också att lägga till en länk till varje menyalternativ individuellt.
Standardbakgrundsfärg (skrivbord)
Gå till bakgrundsinställningar och ändra bakgrundsfärgen.
- Bakgrund: #ffffff
Bakgrundsfärg på svävaren
Ändra bakgrundsfärgen när du svävar.
- Bakgrund (Hover): #f71535
Standardtextinställningar (skrivbord)
Gå sedan till fliken Designa och gör några ändringar i textens utseende.
- Texttypsnitt: Khand
- Teckensnittsvikt: Fet
- Textfärg: #021827
- Textstorlek: 3vh
Håll muspekaren för textinställningar
Ändra dessa inställningar när du håller muspekaren.
- Textfärg (svävare): rgba(255,255,255,0)
- Textstorlek (svävare): 0vh
Länktextinställningar
Gå till textinställningar och ändra färg på länktexten.
- Länktextfärg: #ffffff
Standardinställningar för listtext
Ändra även designinställningarna för de oordnade listobjekten.
- Teckensnitt för oordnad lista: Khand
- Teckensnittsstil för oordnad lista: TT
- Listtextjustering: mitten
- Oordnad listtextfärg: rgba(255,255,255,0)
- Listtextstorlek: 0px
- Oordnad listlinjehöjd: 0em
- Oordnad liststil Position: Inuti
Inställningar för muspekaren
Och ändra några av dessa värden när du håller muspekaren.
- Oordnad lista Text Färg: #ffffff
- Listtext Storlek: 2vh
- Oordnad listlinjehöjd: 2,1 em
Standardavstånd (skrivbord)
Gå sedan till avståndsinställningarna och ge modulen lite utrymme.
- Marginal (höger): 88 vw (dator och surfplatta), 71 vw (telefon)
- Vaddering (överst): 6 vw (dator)), 10 vw (surfplatta), 18 vw (telefon)
- Stoppning (botten): 4 vw (dator), 10 vw (surfplatta), 12 vw (telefon)
- Vänster stoppning: 1vw
Hover Avstånd
Ändra värden när du håller muspekaren.
- Marginal (höger): 59vw
- Vaddering: (Överst)13vw, (botten)8vw, (vänster)1vw, (höger)13vw
gräns
Och för att skapa denna kvartscirkeldesign kommer vi att ändra den övre högra kanten i kantinställningarna.
- Överst till höger: 50vw
Skugga låda
Vi kommer även att lägga till en boxskugga för att skapa djup på sidan.
- Box Shadow Blur Styrka: 1000px
- Skuggfärg: rgba(0,0,0,0.68)
CSS klass
Därefter lägger vi till en CSS-klass på fliken Advanced Open water.
- CSS-klass: dt-meny
övergångar
Och minska varaktigheten av övergången i fliken Advanced Open water för att skapa en snabb övergång.
- Övergångslängd: 100ms
undersökningen
Nu när vi har gått igenom alla steg, låt oss ta en sista titt på hur det ser ut på olika skärmstorlekar.
Exempel # 1
office
Mobil
Ladda ner DIVI nu!!!
Exempel # 2
Stationär dator
Mobil
Ladda ner DIVI nu!!!
Slutsats
I den här artikeln visade vi hur du skapar en expanderbar klibbig meny med hjälp av av Divi Mechanic Layout Pack. Vi har täckt två olika designexempel som du kan modifiera och använda på alla typer av webbplats som du skapar!
Vi hoppas att den här handledningen kommer att inspirera dig för dina nästa projekt. Divi. Om du har några funderingar eller förslag, hitta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
