Wil je creëren? een schuif- en drukmenu in DIVI die geen elementen van uw pagina verbergt?
Grote koppen met veel navigatielinks kunnen waardevolle ruimte innemen op uw Site web. Dit is de reden waarom context- en uitschuifmenu's steeds populairder worden. Meestal blijven menu's die verschuiven om weer te geven boven de inhoud van de pagina, waardoor bepaalde elementen verborgen blijven.
Een glijdend pushmenu werkt echter iets anders. Het glijdende push-effect is uniek omdat het menu vanaf de bovenkant van de pagina naar binnen schuift terwijl tegelijkertijd op de knop wordt gedrukt inhoud van de pagina naar de onderkant, zodat niets aan het zicht wordt onttrokken.
In deze zelfstudie laten we u zien hoe u een volledig nieuw schuifmenu kunt maken met Divi Theme Builder.
Laten we gaan!
overzicht
Hier is een korte blik op het glijdende push-menu dat we in deze tutorial zullen maken.
Bouw het glijdende push-menu met de Divi-themabouwer
Een nieuw globaal menu maken
Om het menu te maken, zullen we een nieuwe globale kop maken binnen de Divi Theme Builder.
Ga naar Divi > Themabouwer.
Lees ook: Hoe een globale header te maken met inlogformulier in DIVI
Klik vervolgens op het gebied "Een globale kop toevoegen" in het website-sjabloon standaard. Selecteer in de vervolgkeuzelijst "Build Global Header".
Aanmaken van het push-menu
Het eerste element dat we samen gaan bouwen is de push menu sectie. Dit gedeelte bevat de menu-items die omhoog en omlaag gaan wanneer u op de menuschakelknop klikt.
Sectie-instellingen
Open de standaard sectie-instellingen en werk de instellingen als volgt bij:
Achtergrond
- Achtergrond: #1a1e36
Interne marge
- Interne marge: 0px boven, 0px onder
CSS-klasse
Voeg op het tabblad geavanceerd de volgende CSS-klasse toe die later in onze JS-code zal worden gebruikt.
- CSS-klasse: et-push-menu
Voeg de 1-regel toe
Nadat de sectieparameters zijn gedefinieerd, maakt u een rij met één kolom in de sectie.
Regel 1 Parameters:
Werk vervolgens de lijnparameters als volgt bij:
sizing
- Gebruik aangepaste gootbreedte: JA
- Kolomafstand: 1
- Maximale breedte: 100%
- Maximale breedte: 1 pixels
tussenruimte
- Marge: Boven 3vh, Onder 3vh
grens
- Breedte onderste rand: 1px
- Kleur onderste rand: rgba (255,255,255,0.2)
Aangepaste CSS
Voeg op het tabblad Geavanceerd de volgende aangepaste CSS toe aan het hoofdelement:
display:flex;
justify-content:center;
align-items:center;
Kolomparameters
Zodra de rij-instellingen zijn gedefinieerd, opent u de kolominstellingen en voegt u een aangepast CSS-fragment toe aan het hoofdelement:
display:flex;
align-items:center;
justify-content:center;Hierdoor wordt de inhoud van de kolom zowel verticaal als horizontaal.
Voeg een knop
We zijn nu klaar om onze menu-items toe te voegen met behulp van de knopmodule. Begin met het toevoegen van een nieuwe knop aan de kolom.
Zie ook onze gids over: Hoe maak je een verticaal navigatiemenu aan in DIVI
Knop instellingen
Werk vervolgens de knopinstellingen als volgt bij:
Inhoud
- Knoptekst: Ontwerp
- Knoplink-URL: # (later vervangen door uw eigen aangepaste URL)
Style
- Gebruik aangepaste stijlen voor knop: JA
- Tekstkleur knop: #ffffff
- Breedte knoprand: 0 pixels
- Lettertype knop: Montserrat
- Zachte lichtknop: zwaar
- Pictogramknop: JA
- Icoonknop: [Uw keuze]
- Alleen pictogram weergeven op zweefknop: NEE
- Plaatsing van knoppictogram: Links
Dubbele kolom
Om nu de extra knoppen voor het menu te maken, kunnen we de kolom dupliceren. Laten we voor dit ontwerp de kolom 4 keer dupliceren, zodat we in totaal 5 menu-items/knoppen in een rij van vijf kolommen krijgen.
Voeg de 2-regel toe
Zodra de eerste rij is voltooid, zijn we klaar om nog een rij knoppen toe te voegen die voor een andere set menu-items kunnen worden gebruikt.
Lees ook: Een contactformulier toevoegen aan een globale kop in DIVI
Om de volgende regel te maken, dupliceert u regel 1.
Verwijder alle kolommen behalve één
Verwijder vervolgens op één na alle kolommen in de dubbele rij.
Regel 2 Parameters:
Werk de parameters van regel 2 als volgt bij:
- Maximale breedte: 1 pixels
- Breedte onderste rand: 0px
Kolomparameters
Voeg vervolgens als volgt een rand toe aan de kolom:
- Breedte rechterrand: 1px
- Kleur rechterrand: rgba (255,255,255,0.2)
Knopinstellingen bijwerken
Zodra de kolom de juiste rand heeft, opent u de knopinstellingen en werkt u het volgende bij:
- Tekstgrootte knop: 14px
- Soft Light-knop: vetgedrukte tekst
- Knop letterafstand: 2 px
- Kopieerstijl knop: TT
- Pictogramknop: NEE
Dubbele kolom
Laten we, zoals we eerder deden, de kolom dupliceren om extra knoppen en kolommen te maken. Laten we voor dit ontwerp de kolom 3 keer dupliceren, zodat we in totaal 4 knoppen in een rij van 4 kolommen krijgen.
Rand van laatste kolom verwijderen
Omdat we niet willen dat de laatste kolom de juiste rand heeft, opent u de instellingen voor kolom 4 en werkt u de randbreedte bij:
- Breedte rechterrand: 0px
De hoofdkopbalk maken
Vervolgens maken we de hoofdkopbalksectie. Deze kopbalk blijft altijd zichtbaar en bevat ons sitelogo, een oproep tot actie en onze menuknop.
Voeg een sectie toe
Voordat u de nieuwe sectie toevoegt, is het een goed idee om het label van de vorige sectie bij te werken om "Push Menu-sectie" te lezen.
Zie ook: Een globale header maken met Theme Builder in DIVI
Maak vervolgens een nieuwe sectie onder de eerste sectie.
Sectie-instellingen
Werk nu het label van de nieuwe sectie bij om "Headersectie" te lezen. Open vervolgens de sectie-instellingen en werk het volgende bij:
tussenruimte
- Interne marge: 0px boven, 0px onder
Voeg een rij toe
Nadat de sectieopvulling is ingesteld, voegt u een rij met drie kolommen toe aan de sectie.
Lijn instellingen
Open de rijparameter en werk het volgende bij:
sizing
- Gootbreedte: 1
- Breedte: 90%
- Hoogte: 70px
tussenruimte
- Interne marge: 0px boven, 0px onder
Aangepaste CSS
Voeg op het tabblad Geavanceerd de volgende aangepaste CSS toe aan het hoofdelement:
display:flex;
align-items:center;Hiermee worden de kolommen in de rij verticaal gecentreerd.
Voeg een knop
Om de hoofd-CTA in het kopgedeelte te maken, kunnen we een knop op de tweede rij in het bovenste gedeelte gebruiken. Kopieer de knop uit kolom 1 van rij 2 van het bovenste gedeelte en plak deze in kolom 1 van de rij van het kopgedeelte.
Knopinstellingen bijwerken
Open vervolgens de instellingen voor de dubbele knop en werk het volgende bij:
- Knoptekst: Registratie
- Tekstgrootte knop: 14px
- Tekstkleur knop: #1a1e36
- Pictogramknop: JA
- Pictogramknop: Pijl naar rechts (zie screenshot)
Voeg een logo toe
Voeg in de middelste kolom een ​​afbeeldingsmodule toe. Dit is hoe we het sitelogo dynamisch toevoegen.
Plaats de muisaanwijzer op het afbeeldingsgebied en klik op het pictogram "Dynamische inhoud gebruiken". Selecteer "Sitelogo" in het vervolgkeuzemenu.
Afbeeldingsinstellingen
Werk vervolgens op het tabblad Stijl het volgende bij:
- Afbeelding uitlijning: gecentreerd
- Maximale hoogte: 55 pixels
Een aangepast hamburgerpictogram toevoegen
We zouden een normaal pictogram via een lay-outmodule kunnen gebruiken als menuschakelaar, maar voor deze tutorial dacht ik dat we een aangepaste menuschakelaar zouden toevoegen met een cool overgangseffect.
Voeg een tekstmodule toe
Om het menupictogram te maken, gebruiken we een tekstmodule met aangepaste HTML-code die wordt opgemaakt met externe CSS.
Ga je gang en voeg een tekstmodule toe aan kolom 3.
HTML-code toevoegen aan tekstmodule
Voeg vervolgens de volgende HTML-code toe aan de inhoud van de tekstmodule:
<p><span class="line line-1"></span><br /> <span class="line line-2"></span><br /> <span class="line line-3"></span></p>
Achtergrond
Geef de tekstmodule een achtergrondkleur:
- Achtergrondkleur: #1a1e36
Tekst opmaken
Werk vervolgens de stijlinstellingen als volgt bij:
- Breedte: 70 pixels
- Module-uitlijning: rechts
- Hoogte: 70px
- Interne marge: 20px boven, 20px onder, 16px links, 16px rechts
CSS-klasse
Voeg op het tabblad Geavanceerd de volgende CSS-klasse toe:
- CSS-klasse: et-push-menu-toggle
Code toevoegen
Om de functionaliteit die we nodig hebben om dit glijdende push-menu te laten werken naar huis te brengen, voegen we onze aangepaste CSS en jQuery toe aan een Code-module.
Ga je gang en voeg een codemodule toe aan kolom 3 onder de tekstmodule.
Plak vervolgens de volgende code (NB: wikkel deze code in tags stijl om het correct te laten werken):
.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;
}
Kopieer en plak deze code vervolgens direct hieronder (belangrijk: verpak deze code in scripttags zodat deze correct werkt):
(function($) {
$(document).ready(function(){
$('.et-push-menu-toggle').click(function(){
$(this).toggleClass('open');
$('.et-push-menu').slideToggle( "300").toggleClass('et-push-menu-active');
});
});
})( jQuery );
Knoptekst en links bijwerken
Ten slotte kunnen we alle knoppen bijwerken met de benodigde knoptekst en link-URL's.
Het is gebeurd !
Instellingen opslaan
Vergeet niet de lay-out en instellingen van Theme Builder op te slaan.
Eindresultaat
Om het eindresultaat te zien, kijk op de pagina op uw website.
Kleverig maken
Als u een "sticky" versie van het menu wilt, voegt u gewoon het volgende CSS-codefragment toe aan de codemodule (tussen de stijltags):
header {
position: sticky;
top:0;
z-index:9999;
}#page-container {
overflow-y: visible !important;
}
Hier is het resultaat.
Download DIVI nu!!!
Conclusie
We hopen dat je geniet van dit schuifmenu. Het effect is uniek en opent de deur naar creatievere headers. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
