I den här handledningen visar vi dig hur du skapar en rullgardinsmenyknapp med Divis menymodul i full bredd. För att göra detta skapar vi först en meny i WordPress. Vi kommer sedan att använda Divis menymodul i full bredd för att visa den här menyn med anpassade stilar med Divi-byggaren och lite anpassad CSS. Resultatet är en praktisk och elegant rullgardinsmenyknapp.
Låt oss börja.
undersökningen
Här är en översikt över den nedrullningsbara menyknappen som vi kommer att integrera i denna handledning.
Vad du behöver för att komma igång
För att komma igång, om du inte redan har gjort det, installera och aktivera Divi-tema installerat (eller Divi Builder-plugin om du inte använder Divi-tema). Vi kommer att använda Divi-byggaren i början för att designa rullgardinsmenyn.
Det är allt !
Skapa en meny i WordPress
Innan vi börjar skapa rullgardinsmenyn med Divi Builder, måste vi först skapa en WordPress-meny som vi vill använda för menymodulen i full bredd. För att göra detta, gå till WordPress-instrumentpanelen och gå till Utseende> Menyer. Skapa sedan en ny meny genom att klicka på skapa en ny menylänk, ange ett menynamn och klicka på knappen "Skapa meny".
För tillfället kan du skapa anpassade länkar med "#" som platshållare för webbadressen tillsammans med länktexten.
Strukturera menyalternativen så att toppmenyalternativet har länken "Läs mer" med tre undermenyposter.
Efter det ska du spara menyn.
Hur man skapar en rullgardinsmenyknapp med Divi-menymodulen i full bredd
När menyn har skapats kan vi börja designa rullgardinsmenyknappen med Divi. För att starta projektet skapar du en ny sida i WordPress och använder Divi Builder för att redigera sidan i frontend (visual builder).
Efter det har du en tom duk för att börja designa i Divi.
Skapa falskt innehåll
Lägg först till en rad med en kolumn i standardstandardavsnittet.
Lägg till en textmodul
Lägg sedan till en textmodul till raden med följande innehåll:
Divi-meny Ditt innehåll går här. Redigera eller ta bort denna text inbyggd eller i modulen Innehållsinställningar. Du kan också utforma alla aspekter av detta innehåll i modulen Designinställningar och till och med tillämpa anpassad CSS på denna text i modulen Avancerade inställningar.
Uppdatera sedan designparametrarna enligt följande:
Stoppningssektion
Uppdatera sedan avsnittinställningen med följande objekt:
- Polstring: 0px nedåt
Linjeavstånd och kant
När sektionsfyllningen har uppdaterats öppnar du radinställningarna och tilldelar den en fyllning och en liten kant.
- Klädsel: 10vw längst upp, 10vw längst ner, 5vw till vänster, 5vw till höger
- Breddens bredd: 1px
Skapa rullgardinsmenyknappen
För att skapa rullgardinsmenyknappen använder vi en menymodul i full bredd. Detta gör att vi kan lägga till menyn som skapats tidigare.
Lägga till menyn i full bredd
För att skapa menymodulen i full bredd lägger du till ett nytt avsnitt med full bredd under det aktuella standardsnittet.
Lägg sedan till en menymodul i full bredd på raden.
I popup-fönstret för hela menyinställningar (under Innehåll) använder du rullgardinsmenyn för att välja menyn du vill visa. Detta borde vara samma meny som vi skapade tidigare med namnet "rullgardinsmeny".
Ta sedan bort den vita vita bakgrundsfärgen för menyn.
När du har lagt till menyn med menyn med fullbredd sparar du inställningarna. Vi kommer tillbaka till den här modulen för att avsluta designen. Men för tillfället lägger vi till en bakgrund till hela bredden.
Uppdatera designen för hela breddssektionen
Öppna inställningarna för hela breddssektionen och uppdatera följande:
- Vänster bakgrundsgradient: # 0047d6
- Höger bakgrundsgradient Färg: # 45b2ff
- Maximal bredd: 240px
- Avsnitt Justering: centrum
Jag ställde in den maximala sektionsbredden till 240 pixlar, eftersom det matchar bredden på standardmenybredden i Divi. Det är också en bra storlek för en knapp på skrivbordet och mobilen.
- Rundade hörn: 5px
På fliken Avancerat lägger du till följande CSS-klass, överflöd och Z-index.
- CSS-klass: rullgardins-knapp
- Horisontellt överflöde: synligt
- Vertikalt överflöde: synligt
- Z-index: 14
CSS-klassen behövs så att vi kan rikta in vår externa CSS i det här avsnittet senare. Överflödet måste ställas in på synligt så att vi kan se rullgardinsmenyn. Och Z-indexet hjälper dig att hålla rullgardinsmenyn över allt annat innehåll på sidan.
Designa Fulwidth-menyn
Vi är nu redo att utforma menymodulen Fulwidth. Öppna modulens inställningar för fullbredd och uppdatera följande:
- Skapa menylänkar i full bredd: JA
- Textfärg på dropdown: #ffffff
- Färg på mobilmenyteksten: #ffffff
- Justering av texten: centrum
- Bakgrundsfärg på rullgardinsmenyn: # 45b2ff
- Färg på rullgardinsmenyn: #ffffff
- Bakgrundsfärg på menyn: #45b2ff
- Teckensnittmeny: Koda utan halvkondenserad
- Typ av teckensnitt: Halv fet
- Meny textfärg: #ffffff
- Menytekststorlek: 16px
- Menyavstånd: 2px
- Animering av rullgardinsmenyn: Expandera
Placera rullgardinsmenyn
För att knappen ska överlappa den undre kanten måste vi lägga till en negativ övre marginal som är exakt halva höjden på knappen.
- Marginal: -40.5px hög
Som du kan se upptar svävarutrymmet ännu inte hela knappområdet och rullgardinsmenyn är fortfarande till höger. För att lösa detta problem kan vi lägga till anpassad CSS.
Lägga till anpassad CSS
Innan du lägger till den anpassade CSS, se till att lägga till CSS-ID "rullgardinsmenyn" i hela breddssektionen (inte modulen).
Utan CSS-ID fungerar CSS nedan inte.
För att lägga till det anpassade CSS, öppna sidinställningarna och klistra in följande kod i den anpassade CSS-inmatningsrutan.
.dropdown-knapp .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! important; }. dropdown-knapp .fullbredd-meny li> a {padding-bottom: 0px; linjehöjd: 81px; }. dropdown-knapp .fullbredd-meny li li a {padding: 6px 0px; linjehöjd: 1.6 em; }. dropdown-knapp .et_mobile_menu li a: sväva, .nav ul li a: sväva,. dropdown-knapp .fullbredd-meny a: sväva {opacitet: 1; }. nedgångsknapp .et_pb_fullwidth_menu_fullwidth .et_pb_row {padding: 0 0! viktigt; }. nedgångsknapp. fullbredd-meny li {display: block; }. dropdown-knapp .fullbredd-meny .meny-objekt-har-barn> a: första barn: efter {höger: 20px; }
Här är det slutliga resultatet
Avslutande tankar
Att skapa en rullgardinsmenyknapp med Divis menymodul i full bredd innebär några viktiga steg. Först skapar vi menyn i WordPress som vi vill integrera i modulen. Sedan använder vi Divi-byggaren för och utformar menymodulen i full bredd efter eget tycke. Sedan lägger vi till anpassad CSS för att polera designen både på skrivbordet och på mobilen. Resultatet är en vacker (och användbar) rullgardinsmeny rullad ut för skrivbordssväng och mobilklick. Hoppas att du tycker att det här är ett användbart komplement till din designverktygssats.
