Kunne du tænke dig at skabe en skyde- og trykmenu i DIVI som ikke skjuler elementer på din side?
Store overskrifter med masser af navigationslinks kan optage værdifuld plads på din Websted. Det er grunden til, at kontekst- og udtræksmenuer bliver mere og mere populære. Det meste af tiden forbliver menuer, der glider for at vise, over indhold på siden, skjuler visse elementer.
En glidende push-menu fungerer dog lidt anderledes. Sliding push-effekten er unik ved, at menuen glider ind fra toppen af siden, mens du samtidig trykker på indhold fra siden til bunden, så intet er skjult.
I denne tutorial viser vi dig, hvordan du opretter en glidende push-menu fra bunden ved hjælp af Divi Theme Builder.
Lad os gå!
undersøgelse
Her er et hurtigt kig på den glidende push-menu, vi opretter i denne vejledning.
Byg den glidende push-menu med Divi-temabyggeren
Oprettelse af en ny global menu
For at oprette menuen vil vi oprette en ny global header i Divi Theme Builder.
Gå til Divi > Theme Builder.
Læs også: Sådan opretter du global header med login-formular i DIVI
Klik derefter på "Tilføj en global overskrift"-området i hjemmeside skabelon som standard. Vælg "Byg global overskrift" på rullelisten.
Oprettelse af push-menuen
Det første element, vi skal bygge sammen, er push-menusektionen. Denne sektion vil indeholde de menupunkter, der skifter op og ned, når du klikker på menuknappen.
Sektionsindstillinger
Åbn standardsektionsindstillingerne, og opdater indstillingerne som følger:
Baggrund
- Baggrund: #1a1e36
Intern margin
- Intern margen: 0px øverst, 0px bund
CSS klasse
Under den avancerede fane tilføjer du følgende CSS-klasse, som vil blive brugt senere i vores JS-kode.
- CSS-klasse: et-push-menu
Tilføj 1-linjen
Når sektionsparametrene er defineret, skal du oprette en række med én kolonne i sektionen.
Linje 1 parametre
Opdater derefter linjeparametrene som følger:
dimensionering
- Brug tilpasset tagrendebredde: JA
- Kolonneafstand: 1
- Maksimal bredde: 100%
- Maksimal bredde: 1 pixels
afstand
- Margin: Top 3vh, Nederst 3vh
grænse
- Nederste kantbredde: 1px
- Farve på nederste kant: rgba(255,255,255,0.2)
Tilpasset CSS
Under fanen avanceret skal du tilføje følgende tilpassede CSS til hovedelementet:
display:flex;
justify-content:center;
align-items:center;
Kolonneparametre
Når rækkeindstillingerne er defineret, skal du åbne kolonneindstillingerne og tilføje et tilpasset CSS-uddrag til hovedelementet:
display:flex;
align-items:center;
justify-content:center;Dette vil centrere indhold af søjlen både lodret og vandret.
Tilføj en knap
Vi er nu klar til at begynde at tilføje vores menupunkter ved hjælp af knapmodulet. Start med at tilføje en ny knap til kolonnen.
Se også vores guide om: Sådan opretter du en vertikal navigationsmenu i DIVI
Knapindstillinger
Opdater derefter knapindstillingerne som følger:
Indhold
- Knaptekst: Design
- Knaplink-URL: # (erstat senere med din egen tilpassede URL)
stil
- Brug brugerdefinerede stilarter til knap: JA
- Knaptekstfarve: #ffffff
- Knapkantbredde: 0 pixels
- Knapskrifttype: Montserrat
- Blød lys knap: Tung
- Ikonknap: JA
- Ikonknap: [Dit valg]
- Vis kun ikon på hover-knap: NEJ
- Knap Ikonplacering: Venstre
Dublet kolonne
Nu, for at oprette de ekstra knapper til menuen, kan vi duplikere kolonnen. Til dette design, lad os duplikere kolonnen 4 gange for at give os i alt 5 menupunkter/knapper i en række med fem kolonner.
Tilføj 2-linjen
Når den første række er færdig, er vi klar til at tilføje endnu en række knapper, der kan bruges til et andet sæt menupunkter.
Læs også: Sådan tilføjer du en kontaktformular til en global header i DIVI
For at oprette den næste linje, dupliker linje 1.
Slet alle kolonner undtagen én
Slet derefter alle på nær én kolonne i dubletrækken.
Linje 2 parametre
Opdater linje 2-parametrene som følger:
- Maksimal bredde: 1 pixels
- Nederste kantbredde: 0px
Kolonneparametre
Tilføj derefter en kant til kolonnen som følger:
- Højre kantbredde: 1px
- Højre kantfarve: rgba(255,255,255,0.2)
Opdater knapindstillinger
Når kolonnen har den højre kant, skal du åbne knapindstillingerne og opdatere følgende:
- Knaptekststørrelse: 14px
- Blødt lys-knap: fed tekst
- Knapbogstavafstand: 2 px
- Knap kopi stil: TT
- Ikon knap: NEJ
Dublet kolonne
Som vi gjorde før, lad os duplikere kolonnen for at oprette yderligere knapper og kolonner. Til dette design, lad os duplikere kolonnen 3 gange for at give os i alt 4 knapper i en række med 4 kolonner.
Fjern kant fra sidste kolonne
Da vi ikke ønsker, at den sidste kolonne skal have den rigtige kant, skal du åbne indstillingerne for kolonne 4 og opdatere kantbredden:
- Højre kantbredde: 0px
Oprettelse af hovedhovedlinjen
Dernæst opretter vi hovedhovedlinjens sektion. Denne overskriftsbjælke vil altid forblive synlig og vil være det, der indeholder vores webstedslogo, en opfordring til handling og vores menuknap.
Tilføj et afsnit
Før du tilføjer den nye sektion, er det en god ide at opdatere etiketten for den forrige sektion til at læse "Push Menu Section".
Se også: Sådan opretter du en global header med Theme Builder i DIVI
Opret derefter en ny sektion under den første sektion.
Sektionsindstillinger
Opdater nu etiketten på den nye sektion for at læse "Header Section". Åbn derefter sektionsindstillingerne og opdater følgende:
afstand
- Intern margen: 0px øverst, 0px bund
Tilføj en række
Når sektionsudfyldningen er indstillet, skal du tilføje en række med tre kolonner til sektionen.
Linieindstillinger
Åbn rækkeparameteren og opdater følgende:
dimensionering
- Rendebredde: 1
- Bredde: 90%
- Højde: 70px
afstand
- Intern margen: 0px øverst, 0px bund
Tilpasset CSS
Under fanen avanceret skal du tilføje følgende tilpassede CSS til hovedelementet:
display:flex;
align-items:center;Dette vil centrere kolonnerne i rækken lodret.
Tilføj en knap
For at oprette den vigtigste CTA på overskriftssektionen kan vi bruge en anden række-knap i den øverste sektion. Kopiér knappen fra kolonne 1 i række 2 i den øverste sektion, og indsæt den i kolonne 1 i rækken i overskriftssektionen.
Opdater knapindstillinger
Åbn derefter indstillingerne for dubletknap, og opdater følgende:
- Knaptekst: Tilmelding
- Knaptekststørrelse: 14px
- Knaptekstfarve: #1a1e36
- Ikonknap: JA
- Ikonknap: Højre pil (se skærmbillede)
Tilføj et logo
Tilføj et billedmodul i den midterste kolonne. Dette vil være, hvordan vi dynamisk tilføjer webstedets logo.
Hold markøren over billedområdet, og klik på ikonet "Brug dynamisk indhold". Fra rullemenuen skal du vælge "Site Logo".
Billedindstillinger
Opdater derefter følgende under fanen Stil:
- Billedjustering: centreret
- Maksimal højde: 55 pixels
Tilføj et brugerdefineret hamburgerikon
Vi kunne bruge et almindeligt ikon gennem et layoutmodul som en menuskift, men til denne tutorial tænkte jeg, at vi ville tilføje en brugerdefineret menuskift med en cool overgangseffekt.
Tilføj et tekstmodul
For at oprette menuikonet, vil vi bruge et tekstmodul med tilpasset HTML-kode, der vil blive stylet med ekstern CSS.
Gå videre og tilføj et tekstmodul til kolonne 3.
Tilføj HTML-kode til tekstmodul
Tilføj derefter følgende HTML-kode til indholdet af tekstmodulet:
<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>
Baggrund
Giv tekstmodulet en baggrundsfarve:
- Baggrundsfarve: #1a1e36
Formatering af teksten
Opdater derefter stilindstillingerne som følger:
- Bredde: 70 pixels
- Moduljustering: højre
- Højde: 70px
- Intern margen: 20px top, 20px bund, 16px venstre, 16px højre
CSS klasse
Tilføj følgende CSS-klasse under fanen avanceret:
- CSS-klasse: et-push-menu-toggle
Tilføj kode
For at bringe den funktionalitet hjem, vi har brug for for at få denne glidende push-menu til at fungere, tilføjer vi vores tilpassede CSS og jQuery til et kodemodul.
Gå videre og tilføj et kodemodul til kolonne 3 under tekstmodulet.
Indsæt derefter følgende kode (NB: pak denne kode ind i tags stil for at det fungerer 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;
}
Kopier og indsæt derefter denne kode direkte nedenfor (vigtigt: pak denne kode ind i script-tags for at den fungerer 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 );
Opdater knaptekst og links
Endelig kan vi opdatere alle knapperne med den nødvendige knaptekst og link-URL'er.
Det er gjort !
Gem indstillinger
Glem ikke at gemme Theme Builder layout og indstillinger.
Endelig resultat
For at se det endelige resultat, tjek siden på din websted.
Gør Sticky
Hvis du vil have en "sticky" version af menuen, skal du blot tilføje følgende CSS-kodestykke til kodemodulet (mellem stiltags):
header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
overflow-y: visible !important;
}
Her er resultatet.
Download DIVI nu!!!
Konklusion
Vi håber, du nyder denne glidende push-menu. Effekten er unik og åbner døren til mere kreative headers. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan dog også konsultere vores ressourcer, hvis du har brug for flere elementer til at udføre dine projekter med oprettelse af internetsider ved at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
