Divi: Hur man skapar en vertikal navigeringsmeny

Vill du skapa en vertikal navigeringsmeny så att den presenterar fler objekt i förgrunden i DIVI?

Vertikala navigeringsmenyer kan vara användbara för vissa webbplatser som behöver fler menyalternativ i förgrunden. Horisontella menyer kan vara svårt att passa alla menylänkar som behövs, speciellt på mindre webbläsarbredder. 

I den här handledningen kommer vi att visa dig hur du skapar en vertikal navigeringsmeny med hjälp av Divi Theme Builder. 

Detta ger dig mer utrymme att visa upp dina WordPress-menyalternativ.

Låt oss börja!

undersökningen

Här är en snabb titt på designen vi kommer att skapa i den här handledningen.

Låt oss gå till handledningen.

Skapa en ny global rubrik

För den här handledningen kommer vi att skapa den vertikala navigeringsmenyn i en global rubrik med hjälp av Divis temabyggare

För att komma igång, gå till WordPress-instrumentpanelen och navigera till Divi > Theme Builder.

Klicka sedan på området "Lägg till global rubrik" i webbplats mall standard och välj "Bygg global rubrik" från rullgardinsmenyn.

Läs också: Hur man skapar en global rubrik med Theme Builder i DIVI

Vertikal sektion layout design

I den globala rubriklayoutredigeraren öppnar du de vanliga avsnittsinställningarna som redan finns där och uppdaterar följande.

• Maximal bredd: 300px
• Höjd: 100vh

• Inre marginal: 4vh Topp, 0px Botten

Fortsätt anpassningen genom att lägga till en skuggruta enligt följande:

• Skuggruta: se skärmdump
• Boxskugga vertikalt läge: 0px
• Styrka för boxskuggoskärpa: 20px
• Box Shadow Spridningsstyrka: -10px
• Skuggfärg: rgba(0,0,0,0.3)

För att säkerställa att den vertikala navigeringsmenyn förblir synlig till vänster när användaren rullar, uppdatera fliken Avancerat till fast position och uppdatera z-indexet enligt följande:

• Fast station
• Z-index: 9999

För att säkerställa att vi kan se undermenynavigeringen som kommer att sträcka sig utanför avsnittet, lägg till följande anpassade CSS till huvudelementet:

overflow: visible !important;

Din sektion kommer nu att vara i en vertikal layout på den vänstra sidan av mallen.

Designa den vertikala menyn

Med avsnittet på plats är vi redo att designa den vertikala menyn. För att göra detta kommer vi att använda en menymodul med anpassad CSS för att anpassa navigeringen så att den visas vertikalt.

Vi kommer även att använda vh length unit så att menyn anpassar sig väl till olika webbläsarhöjder.

Lägger till raden

För att börja, lägg till en rad i en kolumn i avsnittet.

Uppdatera sedan linjeparametrarna enligt följande:

Dimensionering och avstånd

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

• Intern marginal: 3vh topp, 3vh botten

gräns

• Kantbredd: 1px
• Kantfärg: #eeeeee

Tillagd menymodul

Lägg till en ny menymodul på raden med en kolumn.

Välj en meny att visa på fliken Innehåll.

Lägg sedan till din logotyp webbplats som innehåll dynamisk under knappen Logotyp.

Uppdatera följande under fliken Stil:

• Stil: Centrerad

• Teckensnittsmeny: Nunito Sans
• Menytextfärg: #535b7c

• Textstorleksmeny: 18px (dator), 14px (surfplatta och telefon)
• Menyradshöjd: 2 em

• Färg på rullgardinsmenyn: #535b7c
• Aktiv länkfärg rullgardinsmeny: #535b7c

• Korgikonens färg: #535b7c
• Sökikonens färg: #535b7c
• Hamburger Meny ikon färg: #535b7c

• Intern marginal: 2vh topp, 2vh botten

Lade till anpassad CSS för menyn

Menyn behöver anpassad CSS för att uppnå den vertikala navigering vi vill uppnå. För att komma igång, gå till fliken Avancerat och lägg till följande anpassade CSS till menylänken och menylogotypen.

CSS-menylänk (skrivbord):

width: 100%;

padding: 1vh 15px;

background: #f8f8f8;

border-radius: 3px;

border: 1px solid #eeeeee;

CSS-menylänk (surfplatta):

width: auto;

border:none;

Meny CSS-logotyp:

margin-bottom: 20px;

Lägg sedan till en anpassad CSS-klass till menymodulen enligt följande:

CSS-klass: et-vert-menu

Den här klassen kommer att användas för att rikta in sig på just den här menyn i vår externa anpassade CSS som vi kommer att lägga till med hjälp av en kodmodul.

Lägger till anpassad CSS med kodmodulen

Lägg till en kodmodul under menymodulen.

Klistra sedan in följande kod i kodrutan (se till att placera den mellan stiltaggarna):

/* 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;

}

}

Designa sociala medier följ knapp och ikoner

Nu när menyn är klar kan vi lägga till en knapp och vissa sociala medier följer länkar för att komplettera den vertikala rubriken.

Lägger till raden

Lägg till en ny rad en kolumn under den aktuella raden.

Lägg till en knapp

Lägg sedan till en knappmodul på raden.

Uppdatera knappinställningarna enligt följande:

• Knappinriktning: mitten

• Använd anpassade stilar för Knapp: JA
• Knapptextstorlek: 18px (dator), 14px (surfplatta och telefon)
• Knappens textfärg: #ffffff
• Knappens bakgrundsfärg: #535b7c
• Knappens kantbredd: 0 pixlar

Gå sedan till den avancerade fliken och klistra in följande anpassade CSS i huvudelementet:

CSS-huvudelement (skrivbord)

display:block;

width: 100%;

CSS-huvudelement (surfplatta)

display:inherit;

Lade till sociala medier följer ikoner

Lägg till en Följ oss på sociala medier-modul under knappen.

Lägg till de sociala nätverk du vill ha under fliken innehåll.

Uppdatera följande på fliken Stil:

• Modulinriktning: Center

• Ikonfärg: #535b7c

Öppna sedan inställningarna för vart och ett av de sociala nätverken och ta bort bakgrundsfärgen.

Lägg sedan till en liten toppmarginal enligt följande:

• Marginal: 3vh Peak

Uppdatera radparametrar

När följikonerna för sociala medier är klara, öppna Line Settings och justera följande:

• Använd anpassad rännvidd: JA
• Kolumnavstånd: 1

• Inre marginal: 3vh Topp, 0px Botten

Spara layout och mall

När du är klar sparar du layouten och mallen.

Slutresultat

Här är slutresultatet på en livesida.

Ladda ner DIVI nu!!!

Slutsats

Den vertikala navigeringsmenyn som visas här har fått en fast position. Men om du behöver mer utrymme för ytterligare menyalternativ eller innehåll kan du ändra positionen för avsnittet till absolut

Den vertikala sektionsinställningen öppnar också dörren för att skapa anpassade sidofält. 

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.

.