Doriți să creați un meniu de navigare vertical, astfel încât să prezinte mai multe elemente în prim-plan în DIVI?
Meniurile de navigare verticale pot fi utile pentru unele site-uri web care au nevoie de mai multe elemente de meniu în prim-plan. Meniurile orizontale pot fi dificil să se potrivească cu toate linkurile necesare pentru meniuri, în special pe lățimi mai mici ale browserului.
În acest tutorial, vă vom arăta cum să creați un meniu de navigare vertical folosind Divi Theme Builder.
Acest lucru vă va oferi mai mult spațiu pentru a vă prezenta articolele din meniul WordPress.
Să începem!
studiu
Iată o privire rapidă asupra designului pe care îl vom crea în acest tutorial.
Să mergem la tutorial.
Crearea unui nou antet global
Pentru acest tutorial, vom crea meniul de navigare vertical într-un antet global folosind generatorul de teme Divi
Pentru a începe, accesați tabloul de bord WordPress și navigați la Divi > Theme Builder.
Apoi faceți clic pe zona „Adăugați antet global” a șablon de site implicit și selectați „Build Global Header” din lista drop-down.
Citiți și: Cum se creează un antet global cu Theme Builder în DIVI
Design secțiune verticală
În editorul de aspect global al antetului, deschideți setările obișnuite ale secțiunii deja acolo și actualizați următoarele.
- Latime maxima: 300px
- Înălțime: 100vh
- Marja interioară: 4vh de sus, 0px de jos
Continuați personalizarea adăugând o casetă umbră după cum urmează:
- Shadow box: vezi captura de ecran
- Poziția verticală a umbrei casetei: 0px
- Puterea estomparii umbrei casetei: 20px
- Intensitatea răspândirii umbrei casetei: -10px
- Culoare umbră: rgba(0,0,0,0.3)
Pentru a vă asigura că meniul de navigare verticală rămâne vizibil în stânga pe măsură ce utilizatorul derulează, actualizați fila Avansat la poziția fixă și actualizați indexul z după cum urmează:
- Stație fixă
- Indicele Z: 9999
Pentru a ne asigura că putem vedea navigarea submeniului care se va extinde în afara secțiunii, adăugați următorul CSS personalizat la elementul principal:
overflow: visible !important;
Secțiunea dvs. va fi acum într-un aspect vertical în partea stângă a șablonului.
Proiectați meniul vertical
Cu secțiunea în loc, suntem gata să proiectăm meniul vertical. Pentru a face acest lucru, vom folosi un modul de meniu cu CSS personalizat pentru a personaliza navigarea pentru a fi afișată pe verticală.
Vom folosi și unitatea de lungime vh, astfel încât meniul să se adapteze bine la diferite înălțimi ale browserului.
Adăugarea liniei
Pentru a începe, adăugați un rând la o coloană din secțiune.
Apoi, actualizați parametrii de linie după cum urmează:
Dimensiune și spațiere
- Utilizați lățimea jgheab personalizată: DA
- Distanța între coloane: 1
- Lățime maximă: 100%
- Lățime maximă: 80%
- Marja internă: 3vh de sus, 3vh de jos
frontieră
- Lățimea chenarului: 1px
- Culoarea chenarului: #eeeeee
Adăugat modul Meniu
În rândul cu o singură coloană, adăugați un nou modul Meniu.
Selectați un meniu de afișat în filă Conținut.
Apoi adăugați sigla dvs site-ul web la fel de cuprins dinamic sub butonul Logo.
Sub fila Stil, actualizați următoarele:
- Stil: centrat
- Meniu font: Nunito Sans
- Culoarea textului meniului: #535b7c
- Dimensiunea textului meniului: 18px (desktop), 14px (tabletă și telefon)
- Înălțimea rândului de meniu: 2 em
- Culoarea rândului dropdown: #535b7c
- Meniul derulant Active Link Color: #535b7c
- Culoarea pictogramei coș: #535b7c
- Culoarea pictogramei de căutare: #535b7c
- Culoarea pictogramei meniu Hamburger: #535b7c
- Marja internă: 2vh de sus, 2vh de jos
S-a adăugat CSS personalizat pentru meniu
Meniul are nevoie de CSS personalizat pentru a realiza navigarea verticală pe care vrem să o realizăm. Pentru a începe, accesați fila avansată și adăugați următorul CSS personalizat la linkul de meniu și la sigla meniului.
Link meniu CSS (desktop):
width: 100%;
padding: 1vh 15px;
background: #f8f8f8;
border-radius: 3px;
border: 1px solid #eeeeee;
Link pentru meniul CSS (tabletă):
width: auto;
border:none;
Meniu sigla CSS:
margin-bottom: 20px;
Apoi, adăugați o clasă CSS personalizată la modulul Meniu, după cum urmează:
Clasa CSS: et-vert-menu
Această clasă va fi folosită pentru a viza acest meniu special în CSS-ul nostru personalizat extern pe care îl vom adăuga folosind un modul Cod.
Adăugarea CSS personalizat cu modulul Cod
Sub modulul Meniu, adăugați un modul Cod.
Apoi lipiți următorul cod în caseta de cod (asigurați-vă că îl puneți între etichetele de stil):
/* MenudeNavigation 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;
}
}
Proiectați butonul de urmărire a rețelelor sociale și pictogramele
Acum că meniul este complet, putem adăuga un buton și unele rețele sociale urmează link-uri pentru a completa antetul vertical.
Adăugarea liniei
Adăugați un rând nou la o coloană sub rândul curent.
Adăugați un buton
Apoi adăugați un modul Button la linie.
Actualizați setările butonului după cum urmează:
- Alinierea butoanelor: centru
- Utilizați stiluri personalizate pentru Buton: DA
- Dimensiunea textului butonului: 18px (desktop), 14px (tabletă și telefon)
- Culoarea textului butonului: #ffffff
- Culoare de fundal pentru buton: #535b7c
- Lățimea marginii butonului: 0 pixeli
Apoi, accesați fila avansată și inserați următorul CSS personalizat în elementul principal:
Element principal CSS (desktop)
display:block;
width: 100%;
Element principal CSS (tabletă)
display:inherit;
S-au adăugat pictograme de urmărire a rețelelor sociale
Sub butonul, adăugați un modul Urmărește-ne pe rețelele sociale.
Adăugați rețelele sociale dorite sub fila cuprins.
În fila Stil, actualizați următoarele:
- Alinierea modulului: Centru
- Culoarea pictogramei: #535b7c
Apoi deschideți setările pentru fiecare dintre rețelele sociale și eliminați culoarea de fundal.
Apoi adăugați o mică marjă superioară, după cum urmează:
- Marja: 3vh Peak
Actualizați parametrii liniei
Odată ce pictogramele de urmărire pe rețelele sociale sunt finalizate, deschideți Setări de linie și ajustați următoarele:
- Utilizați lățimea jgheab personalizată: DA
- Distanța între coloane: 1
- Marja interioară: 3vh de sus, 0px de jos
Salvați aspectul și șablonul
Odată terminat, salvați aspectul și șablonul.
Rezultat final
Iată rezultatul final pe o pagină live.
Descărcați DIVI acum!!!
Concluzie
Meniul de navigare verticală prezentat aici a primit o poziție fixă. Cu toate acestea, dacă aveți nevoie de mai mult spațiu pentru elemente sau conținut suplimentar de meniu, puteți schimba poziția secțiunii la absolut
Configurarea secțiunii verticale deschide, de asemenea, ușa pentru crearea de bare laterale personalizate.
Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
