Divi: een verticaal navigatiemenu maken

Wilt u een verticaal navigatiemenu maken zodat het meer items op de voorgrond presenteert in DIVI?

Verticale navigatiemenu's kunnen handig zijn voor sommige websites die meer menu-items op de voorgrond nodig hebben. Horizontale menu's kunnen lastig zijn om in alle benodigde menulinks te passen, vooral bij kleinere browserbreedtes. 

In deze zelfstudie laten we u zien hoe u een verticaal navigatiemenu maakt met behulp van de Divi Theme Builder. 

Dit geeft u meer ruimte om uw WordPress-menu-items te presenteren.

Laten we beginnen!

overzicht

Hier is een korte blik op het ontwerp dat we in deze zelfstudie gaan maken.

Laten we naar de tutorial gaan.

Een nieuwe globale kop maken

Voor deze zelfstudie maken we het verticale navigatiemenu in een globale kop met behulp van Divi's themabouwer

Ga om te beginnen naar het WordPress-dashboard en navigeer naar Divi > Theme Builder.

Klik vervolgens op het gedeelte "Globale koptekst toevoegen" van het website-sjabloon standaard en selecteer "Build Global Header" in de vervolgkeuzelijst.

Lees ook: Een globale header maken met Theme Builder in DIVI

Lay-outontwerp voor verticale secties

Open in de algemene editor voor koptekstlay-out de reguliere sectie-instellingen die al aanwezig zijn en werk het volgende bij.

• Maximale breedte: 300px
• Hoogte: 100vh

• Binnenmarge: 4vh boven, 0px onder

Ga door met de aanpassing door als volgt een schaduwvak toe te voegen:

• Schaduwdoos: zie screenshot
• Verticale positie van vakschaduw: 0px
• Doosschaduwvervagingssterkte: 20px
• Box Shadow Spread-sterkte: -10px
• Schaduwkleur: rgba(0,0,0,0.3)

Om ervoor te zorgen dat het verticale navigatiemenu aan de linkerkant zichtbaar blijft terwijl de gebruiker scrolt, werkt u het tabblad Geavanceerd bij naar een vaste positie en werkt u de z-index als volgt bij:

• Vast station
• Z-index: 9999

Om ervoor te zorgen dat we de submenu-navigatie kunnen zien die zich buiten de sectie uitstrekt, voegt u de volgende aangepaste CSS toe aan het hoofdelement:

overflow: visible !important;

Uw sectie bevindt zich nu in een verticale lay-out aan de linkerkant van de sjabloon.

Ontwerp het verticale menu

Nu de sectie op zijn plaats is, zijn we klaar om het verticale menu te ontwerpen. Om dit te doen, gebruiken we een menumodule met aangepaste CSS om de navigatie aan te passen zodat deze verticaal wordt weergegeven.

We zullen ook de vh-lengte-eenheid gebruiken, zodat het menu zich goed aanpast aan verschillende browserhoogten.

De regel toevoegen

Voeg om te beginnen een rij toe aan een kolom in de sectie.

Werk vervolgens de lijnparameters als volgt bij:

Maatvoering en afstand

• Gebruik aangepaste gootbreedte: JA
• Kolomafstand: 1
• Maximale breedte: 100%
• Maximale breedte: 80%

• Interne marge: 3vh boven, 3vh onder

grens

• Randbreedte: 1px
• Randkleur: #eeeeee

Menumodule toegevoegd

Voeg in de rij met één kolom een ​​nieuwe menumodule toe.

Selecteer een menu om op het tabblad weer te geven Inhoud.

Voeg dan het logo van jouw . toe website als inhoud dynamisch onder de knop Logo.

Werk het volgende bij op het tabblad Stijl:

• Stijl: Gecentreerd

• Lettertypemenu: Nunito Sans
• Kleur menutekst: #535b7c

• Tekstgrootte menu: 18px (desktop), 14px (tablet en telefoon)
• Hoogte menurij: 2 em

• Kleur vervolgkeuzelijst: #535b7c
• Vervolgkeuzemenu Actieve linkkleur: #535b7c

• Kleur winkelwagenpictogram: #535b7c
• Kleur van zoekpictogram: #535b7c
• Kleur hamburgermenupictogram: #535b7c

• Interne marge: 2vh boven, 2vh onder

Aangepaste CSS toegevoegd voor het menu

Het menu heeft aangepaste CSS nodig om de verticale navigatie te bereiken die we willen bereiken. Ga om te beginnen naar het tabblad Geavanceerd en voeg de volgende aangepaste CSS toe aan de menulink en het menulogo.

CSS-menulink (bureaublad):

width: 100%;

padding: 1vh 15px;

background: #f8f8f8;

border-radius: 3px;

border: 1px solid #eeeeee;

CSS-menulink (tablet):

width: auto;

border:none;

Menu CSS-logo:

margin-bottom: 20px;

Voeg vervolgens als volgt een aangepaste CSS-klasse toe aan de menumodule:

CSS-klasse: et-vert-menu

Deze klasse zal worden gebruikt om dit specifieke menu te targeten in onze externe aangepaste CSS die we zullen toevoegen met behulp van een codemodule.

Aangepaste CSS toevoegen met de Code-module

Voeg onder de menumodule een codemodule toe.

Plak vervolgens de volgende code in het codevak (zorg ervoor dat u deze tussen de stijltags plaatst):

/* Menu de Navigation Style Vertical*/

.et-vert-menu .et_pb_menu__menu>nav>ul {

  flex-direction: column;

  margin-left: 0px!important;

  margin-right: 0px!important;

  width: 100%;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li {

  margin: 10px0!important;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul li {

  display:block!important;

  padding: 0px!important;

  }

  .et-vert-menu .et_pb_menu__menu>nav>ul ul {

    padding: 0px!important;

    top: 0px!important;

  }

.et-vert-menu .et_pb_menu__menu>nav>ul>li>ul {

  left:calc(100%- 1px) !important;

  top:0px!important;

  }

.et-vert-menu .et-menu .menu-item-has-children>a:first-child:after {

  content: "5"!important; /*change arrow icon for submenu*/

  right: 20px!important;

  }

.et-vert-menu .nav li ul {

    left: calc(100%- 1px) !important; /*align submenu to the right of menu link*/

  }

@media alland (min-width: 981px) {

.et-vert-menu .et_pb_menu__menu, .et-vert-menu .et_pb_menu__menu>nav {

    width: 100%; /*width of the vertical navigation menu*/

  }

/*Adjust the width of the main content and footer area to make room for the fixed vertical header*/

#et-main-area {

  width: calc(100%- 300px);

  margin-left: 300px;

}

}

Ontwerp sociale media volgknop en pictogrammen

Nu het menu compleet is, kunnen we een knop toevoegen en sommige sociale media volgen links om de verticale koptekst te voltooien.

De regel toevoegen

Voeg een nieuwe rij één kolom onder de huidige rij toe.

Voeg een knop

Voeg vervolgens een Button-module toe aan de regel.

Werk de knopinstellingen als volgt bij:

• Knop uitlijning: midden

• Gebruik aangepaste stijlen voor knop: JA
• Tekstgrootte knop: 18px (desktop), 14px (tablet en telefoon)
• Tekstkleur knop: #ffffff
• Achtergrondkleur knop: #535b7c
• Breedte knoprand: 0 pixels

Ga vervolgens naar het tabblad Geavanceerd en plak de volgende aangepaste CSS in het hoofdelement:

CSS hoofdelement (bureaublad)

display:block;

width: 100%;

CSS hoofdelement (tablet)

display:inherit;

Social media volg iconen toegevoegd

Voeg onder de knop een Volg ons op social media module toe.

Voeg de gewenste sociale netwerken toe onder het tabblad inhoud.

Werk op het tabblad Stijl het volgende bij:

• Module-uitlijning: midden

• Pictogramkleur: #535b7c

Open vervolgens de instellingen voor elk van de sociale netwerken en verwijder de achtergrondkleur.

Voeg vervolgens als volgt een kleine bovenmarge toe:

• Marge: 3vh piek

Werk lijnparameters bij

Zodra de pictogrammen voor het volgen van sociale media klaar zijn, opent u Lijninstellingen en past u het volgende aan:

• Gebruik aangepaste gootbreedte: JA
• Kolomafstand: 1

• Binnenmarge: 3vh boven, 0px onder

Opmaak en sjabloon opslaan

Als u klaar bent, slaat u de lay-out en sjabloon op.

Eindresultaat

Hier is het eindresultaat op een live pagina.

Download DIVI nu!!!

Conclusie

Het hier getoonde verticale navigatiemenu heeft een vaste positie gekregen. Als u echter meer ruimte nodig heeft voor extra menu-items of inhoud, kunt u de positie van de sectie wijzigen in absoluut

De verticale sectie-opstelling opent ook de deur naar het maken van aangepaste zijbalken. 

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.

...