Divi: Hur man skapar en skjut- och tryckmeny

ens Gaetan | Divi, Divi Tutorials

Vill du skapa en skjut- och tryckmeny i DIVI som inte döljer delar av din sida?

Stora rubriker med massor av navigeringslänkar kan ta upp värdefullt utrymme på din webbplats. Det är därför sammanhangs- och utdragsmenyer blir mer och mer populära. För det mesta förblir menyer som skjuts för att visas ovanför innehåll på sidan, döljer vissa element. 

En glidande push-meny fungerar dock lite annorlunda. Den glidande push-effekten är unik genom att menyn glider in från toppen av sidan samtidigt som du trycker på innehåll från sidan till botten så att ingenting är dolt.

I den här handledningen kommer vi att visa dig hur du skapar en glidande push-meny från början med Divi Theme Builder.

Låt oss gå!

undersökningen

Här är en snabb titt på den glidande push-menyn som vi kommer att skapa i den här handledningen.

divi-hur-att-skapa-en-skjut-och-tryck-meny

Bygg den glidande push-menyn med Divi-temabyggaren

Skapa en ny global meny

För att skapa menyn kommer vi att skapa en ny global rubrik i Divi Theme Builder.

Gå till Divi > Theme Builder.

Läs också: Hur man skapar global header med inloggningsformulär i DIVI

Klicka sedan på "Lägg till en global rubrik" i området webbplats mall som standard. Välj "Bygg global rubrik" i rullgardinsmenyn.

divi-hur-att-skapa-en-skjut-och-tryck-meny

Skapande av push-menyn

Det första elementet vi ska bygga tillsammans är push-meny-sektionen. Det här avsnittet kommer att innehålla menyalternativen som växlar upp och ner när du klickar på menyväxlingsknappen.

Avsnitt inställningar

Öppna standardsektionsinställningarna och uppdatera inställningarna enligt följande:

Bakgrund

  • Bakgrund: #1a1e36

Intern marginal

  • Intern marginal: 0px upptill, 0px botten

CSS klass

Under den avancerade fliken lägger du till följande CSS-klass som kommer att användas senare i vår JS-kod.

  • CSS-klass: et-push-meny

Lägg till 1-raden

När sektionsparametrarna har definierats skapar du en rad med en kolumn i sektionen.

Rad 1 Parametrar

Uppdatera sedan linjeparametrarna enligt följande:

dimensionering

  • Använd anpassad rännbredd: JA
  • Kolumnavstånd: 1
  • Maximal bredd: 100%
  • Maximal bredd: 1 pixlar

avstånd

  • Marginal: Top 3vh, Bottom 3vh

gräns

  • Nedre kantbredd: 1px
  • Nedre kantfärg: rgba(255,255,255,0.2)

Anpassad CSS

På fliken Avancerat lägger du till följande anpassade CSS till huvudelementet:

display:flex;
justify-content:center;
align-items:center;

Kolumnparametrar

När radinställningarna har definierats öppnar du kolumninställningarna och lägger till ett anpassat CSS-kodavsnitt till huvudelementet:

display:flex;
align-items:center;
justify-content:center;

Detta kommer att centrera innehåll av kolonnen både vertikalt och horisontellt.

Lägg till en knapp

Vi är nu redo att börja lägga till våra menyalternativ med knappmodulen. Börja med att lägga till en ny knapp i kolumnen.

Se även vår guide om: Hur man skapar en vertikal navigeringsmeny i DIVI

Knappinställningar

Uppdatera sedan knappinställningarna enligt följande:

Innehåll

  • Knapptext: Design
  • Button Link URL: # (ersätt senare med din egen anpassade URL)

Stil

  • Använd anpassade stilar för Knapp: JA
  • Knappens textfärg: #ffffff
  • Knappkantsbredd: 0 pixlar
  • Knapptypsnitt: Montserrat
  • Mjuk ljusknapp: Tung
  • Ikonknapp: JA
  • Ikonknapp: [Ditt val]
  • Visa endast ikonen på svävningsknappen: NEJ
  • Knappikonens placering: Vänster

Duplicera kolumn

Nu, för att skapa ytterligare knappar för menyn, kan vi duplicera kolumnen. För denna design, låt oss duplicera kolumnen 4 gånger för att ge oss totalt 5 menyalternativ/knappar i en rad med fem kolumner.

Lägg till 2-raden

När den första raden är klar är vi redo att lägga till ytterligare en rad med knappar som kan användas för en annan uppsättning menyalternativ.

Läs också: Hur man lägger till ett kontaktformulär i en global rubrik i DIVI

För att skapa nästa rad, duplicera rad 1.

Ta bort alla kolumner utom en

Ta sedan bort alla kolumner utom en i dubblettraden.

Rad 2 Parametrar

Uppdatera rad 2-parametrarna enligt följande:

  • Maximal bredd: 1 pixlar
  • Nedre kantbredd: 0px

Kolumnparametrar

Lägg sedan till en ram till kolumnen enligt följande:

  • Höger kantbredd: 1px
  • Höger kantfärg: rgba(255,255,255,0.2)

Uppdatera knappinställningar

När kolumnen har den högra kanten öppnar du knappinställningarna och uppdaterar följande:

  • Knapptextstorlek: 14px
  • Knapp för mjukt ljus: fet text
  • Knappbokstavsavstånd: 2 px
  • Knappkopieringsstil: TT
  • Ikonknapp: NEJ

Duplicera kolumn

Som vi gjorde tidigare, låt oss duplicera kolumnen för att skapa ytterligare knappar och kolumner. För denna design, låt oss duplicera kolumnen 3 gånger för att ge oss totalt 4 knappar i en rad med 4 kolumner.

Ta bort ram från sista kolumnen

Eftersom vi inte vill att den sista kolumnen ska ha rätt kant, öppna inställningarna för kolumn 4 och uppdatera kantbredden:

  • Höger kantbredd: 0px

Skapa huvudhuvudfältet

Därefter kommer vi att skapa huvudrubrikens sektion. Den här rubriken kommer alltid att vara synlig och kommer att vara det som innehåller vår webbplatslogotyp, en uppmaning till handling och vår menyväxlingsknapp.

Lägg till ett avsnitt

Innan du lägger till den nya sektionen är det en bra idé att uppdatera etiketten för föregående sektion för att läsa "Push Menu Section".

Se även: Hur man skapar en global rubrik med Theme Builder i DIVI

Skapa sedan ett nytt avsnitt under det första avsnittet.

divi-hur-att-skapa-en-skjut-och-tryck-meny

Avsnitt inställningar

Uppdatera nu etiketten för den nya sektionen för att läsa "Header Section". Öppna sedan avsnittsinställningarna och uppdatera följande:

avstånd

  • Intern marginal: 0px upptill, 0px botten

Lägg till en rad

När sektionsutfyllningen är inställd lägger du till en rad med tre kolumner i sektionen.

Linjeinställningar

Öppna radparametern och uppdatera följande:

dimensionering

  • Rännviddsbredd: 1
  • Bredd: 90%
  • Höjd: 70px
divi-hur-att-skapa-en-skjut-och-tryck-meny

avstånd

  • Intern marginal: 0px upptill, 0px botten
divi-hur-att-skapa-en-skjut-och-tryck-meny

Anpassad CSS

På fliken Avancerat lägger du till följande anpassade CSS till huvudelementet:

display:flex;
align-items:center;

Detta kommer att centrera kolumnerna i raden vertikalt.

Lägg till en knapp

För att skapa huvuduppmaningen i rubriksektionen kan vi använda en andra radknapp i den övre sektionen. Kopiera knappen från kolumn 1 på rad 2 i den översta sektionen och klistra in den i kolumn 1 i raden i rubriksektionen.

divi-hur-att-skapa-en-skjut-och-tryck-meny

Uppdatera knappinställningar

Öppna sedan inställningarna för dubbletter av knappar och uppdatera följande:

  • Knapptext: Registrering
  • Knapptextstorlek: 14px
  • Knappens textfärg: #1a1e36
  • Ikonknapp: JA
  • Ikonknapp: högerpil (se skärmdump)

Lägg till en logotyp

Lägg till en bildmodul i mittkolumnen. Det är så vi dynamiskt lägger till webbplatslogotypen.

Håll muspekaren över bildområdet och klicka på ikonen "Använd dynamiskt innehåll". Välj "Sitelogotyp" i rullgardinsmenyn.

Bildinställningar

Uppdatera sedan följande under stilfliken:

  • Bildjustering: centrerad
  • Maximal höjd: 55 pixlar

Lägg till en anpassad hamburgerikon

Vi skulle kunna använda en vanlig ikon genom en layoutmodul som en menyväxling, men för den här handledningen tänkte jag att vi skulle lägga till en anpassad menyväxling med en cool övergångseffekt.

Lägg till en textmodul

För att skapa menyikonen kommer vi att använda en textmodul med anpassad HTML-kod som kommer att utformas med extern CSS.

Fortsätt och lägg till en textmodul i kolumn 3.

Lägg till HTML-kod till textmodulen

Lägg sedan till följande HTML-kod till innehållet i textmodulen:

<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>

Bakgrund

Ge textmodulen en bakgrundsfärg:

  • Bakgrundsfärg: #1a1e36

Formatera texten

Uppdatera sedan stilinställningarna enligt följande:

  • Bredd: 70 pixlar
  • Modulinriktning: höger
  • Höjd: 70px
  • Intern marginal: 20px upptill, 20px botten, 16px vänster, 16px höger

CSS klass

Lägg till följande CSS-klass under fliken Avancerat:

  • CSS-klass: et-push-menu-toggle

Lägg till kod

För att få hem den funktionalitet vi behöver för att få den här glidande push-menyn att fungera, lägger vi till vår anpassade CSS och jQuery till en kodmodul.

Fortsätt och lägg till en kodmodul i kolumn 3 under textmodulen.

Klistra sedan in följande kod (OBS: slå in den här koden i taggar stil för att det ska fungera korrekt):

.line {
display: block;
position: absolute;
height: 2px;
width: 100%;
background: #ffffff;
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;
}
.et-push-menu-toggle.open .line-1 {
top: 10px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.et-push-menu-toggle.open .line-2 {
display: none;
}
.et-push-menu-toggle.open .line-3 {
top: 10px;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.et-push-menu {
display:none;
}
.et-fb .et-push-menu {
display:block;
}
.et-push-menu-toggle {
cursor:pointer;
}

Kopiera och klistra sedan in den här koden direkt nedan (viktigt: slå in den här koden i skripttaggar för att den ska fungera korrekt):

(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );

Uppdatera knapptext och länkar

Slutligen kan vi uppdatera alla knappar med nödvändig knapptext och länk-URL.

Det är klart !

Spara inställningar

Glöm inte att spara layouten och inställningarna för temabyggaren.

divi-hur-att-skapa-en-skjut-och-tryck-meny

Slutresultat

För att se det slutliga resultatet, kolla sidan på din webbplats.

divi-hur-att-skapa-en-skjut-och-tryck-meny

Gör Sticky

Om du vill ha en "klibbig" version av menyn, lägg bara till följande CSS-kodavsnitt till kodmodulen (mellan stiltaggarna):

header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
  overflow-y: visible !important;
}
divi-hur-att-skapa-en-skjut-och-tryck-meny

Här är resultatet.

Ladda ner DIVI nu!!!

Slutsats

Vi hoppas att du gillar denna glidande push-meny. Effekten är unik och öppnar dörren till mer kreativa rubriker. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.

Du kan dock 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.

.

Poster le commentaire

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.