3 moduri creative de a vă stiliza navigarea verticală submeniu

În postarea de astăzi, vă vom oferi trei moduri diferite de a stiliza submeniul navigării pe verticală. Într-una din postările anterioare, v-am arătat deja cum să realizați o navigație verticală transparentă care se suprapune site-ului dvs. web când îl priviți de pe un desktop.

Exemplele pe care le vom împărtăși vor fi făcute deasupra acelei navigări verticale transparente. În acest fel, veți avea imediat posibilitatea de a vă crea o navigație transparentă verticală de la A la Z. De-a lungul acestei postări, veți experimenta diferite setări de stil care vă pot da viață submeniului vertical.

Înainte de a vă arăta exemplele, ar putea fi interesant să vedeți submeniul fără modificări. Ca de obicei, submeniul vertical preia setările elementelor meniului principal. Fără a face modificări suplimentare, așa arată submeniul:

Acum, să aruncăm o privire la cele trei exemple pe care vă vom arăta cum să le recreați.

Primul exemplu:

Al doilea exemplu:

Al treilea exemplu:

Pași generali pentru realizarea submeniului vertical

Abonați-vă la canalul nostru Youtube

Înainte de a ne scufunda în diferitele exemple pe care le-am furnizat, vom face doi pași generali care sunt necesari înainte de a începe. Înainte de a proiecta elementele de submeniu în funcție de nevoile dvs., trebuie să faceți două lucruri: adăugați elementele de submeniu în meniul dvs. și căutați diferitele ID-uri CSS ale articolelor noastre de submeniu. După ce am parcurs acești pași, vom împărtăși codul CSS de care aveți nevoie pentru a obține rezultatele exemplului.

Deoarece există trei moduri de a adăuga cod CSS pe site-ul dvs. Divi, vom gestiona fiecare metodă individual. Cu toate acestea, puteți utiliza modul preferat pentru a adăuga codul CSS pentru fiecare dintre exemple.

Adăugați elemente de submeniu

Primul lucru pe care îl vom face, dacă nu ați făcut-o deja, este să adăugați elementele de submeniu. În exemplul nostru, am adăugat doar câteva elemente de submeniu la elementul de meniu „modelele noastre” pentru a vă arăta cum să o faceți. Cu toate acestea, puteți aplica modificările și la alte elemente de meniu.

Dacă vă aflați în tabloul de bord WordPress, accesați Aspect> Meniuri . Dacă ați creat deja un meniu, utilizați-l. Dacă nu, începeți prin crearea unui nou meniu. Apoi, adăugați elementele meniului principal în meniul dvs. După ce ați făcut acest lucru, puteți adăuga elementele de submeniu. Adăugați un element de submeniu și pur și simplu puneți-l chiar sub elementul de meniu principal. Faceți acest lucru pentru toate elementele de submeniu pe care doriți să le adăugați la navigarea pe verticală.

Căutați ID-urile CSS individuale ale articolelor dvs. din submeniu

În exemplele noastre, va trebui să facem unele modificări CSS la fiecare element de submeniu individual. De aceea va trebui să căutăm ID-urile CSS în sursă. Fiecare articol are un ID diferit. Trebuie să modificați codul CSS în funcție de ID-urile CSS care sunt utilizate în mod specific pe site-ul dvs. web. Acestea ar putea diferi de cele utilizate în aceste exemple. De aceea, vă vom arăta pe scurt de unde să obțineți ID-urile, astfel încât să puteți face modificări în special pentru articolele dvs.

Accesați pagina dvs. de pornire, puneți mouse-ul în meniu și începeți să inspectați codul. Veți vedea că ID-ul CSS apare pe elementul de meniu selectat. Copiați fiecare dintre ID-urile CSS din lista submeniului și salvați-le pentru mai târziu.

Acum că ați făcut cei doi pași, puteți trece la crearea exemplelor pe care le-am făcut.

Creați primul exemplu

În această parte a postării, vă vom arăta exact cum să recreați primul exemplu de submeniu vertical. După cum puteți vedea, structura este foarte simplă, dar adaugă acea culoare suplimentară site-ului dvs. web. Elementele de meniu principale sunt simple și utilizează o culoare de fundal transparentă. Puteți, desigur, păstra aceeași simplitate în submeniul dvs. Sau puteți alege să atrageți mai mult atenția asupra acestuia.

Culorile utilizate se potrivesc cu imaginea de fundal cu suprapunerea în gradient. Păstrarea acestui tip de consistență a culorilor în submeniul dvs. este recomandabilă dacă încercați să obțineți un rezultat simplu și modest.

Adăugați codul CSS prin opțiunile temei

Există diferite moduri de a adăuga cod CSS la pagina dvs. Puteți, de exemplu, să adăugați codul CSS la o pagină în special. Puteți, de asemenea, să îl adăugați la întregul site web prin Opțiunile temei sau Personalizatorul temei. Pentru acest exemplu, vom adăuga pur și simplu codul prin Opțiunile temei. Dacă vă aflați în tabloul de bord WordPress, accesați Divi> Opțiuni temă> Derulați în jos fila generală și lipiți următorul cod în caseta CSS personalizată:

.nav li ul {
border: none !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(60,105,205,0.1) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(60,105,205,0.3) !important;
border-radius: 5px;
margin-bottom: 10px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(60,105,205,0.5) !important;
border-radius: 5px;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0px 1px 0 !important;
text-align: center !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 5% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\e089" !important;
}

Înlocuiți următoarele coduri CSS din cod cu cele care se aplică submeniului. În pasul anterior al acestei postări, v-am arătat unde le puteți găsi.

Creați al doilea exemplu

Următorul exemplu vă vom arăta cum să faceți are un anumit efect de gradient. Diferitele culori utilizate sunt în concordanță cu imaginea de fundal utilizată. Am adăugat un fundal degradat submeniului complet și câteva culori transparente individuale pentru fiecare dintre elementele submeniului.

Adăugați codul CSS pentru o pagină în special

Deși probabil veți dori să adăugați acest cod pe site-ul dvs. web complet, vă vom arăta cum să faceți ca acest exemplu să se aplice în special unei singure pagini. Dacă nu doriți să adăugați liniile de cod CSS la o pagină, în special, nu ezitați să o adăugați prin Opțiunile temei (așa cum se arată în primul exemplu) sau prin Customizerul temei (așa cum se arată în exemplul următor).

Începeți prin deschiderea sau crearea paginii în care doriți să adăugați designul submeniului. Acum, faceți clic pe următorul buton din colțul din dreapta al constructorului Divi:

În ecranul care apare, copiați și lipiți următoarele linii de cod CSS în câmpul CSS personalizat:

.nav li ul {
border: none !important;
background: -webkit-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -o-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: -moz-linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
background: linear-gradient(rgba(177,194,233,0.5), rgba(35,61,120,0.5)) !important;
padding: 3px !important;
width: 80% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background-color: rgba(255,255,255,0.6) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205212 {
background-color: rgba(255,255,255,0.4) !important;
margin-bottom: 3px;
}
.sub-menu #menu-item-205213
{
background-color: rgba(255,255,255,0.2) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 1px 0 1px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 80% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}

#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
} 

Înlocuiți următoarele elemente ale submeniului din codul CSS cu ale dvs.:

Creați al treilea exemplu

Ultimul exemplu pe care îl vom împărtăși cum să facem are un efect de plutire. Adăugând acest efect de plutire la submeniul dvs., veți interacționa cu publicul într-un mod frumos, fără a vă menține meniul principal prea ocupat. Deoarece submeniul apare doar atunci când treceți peste elementul din meniul principal. Prin urmare, vizitatorii dvs. nu se vor confrunta în mod constant cu efectul.

Adăugați codul CSS pentru o personalizare de pagină prin temă

Pentru ultimul exemplu, vă vom arăta cum să adăugați codul CSS prin Theme Customizer. Dacă vă aflați în tabloul de bord WordPress, accesați Aspect> Personalizare> CSS suplimentar> și copiați și lipiți următoarele linii de cod:

.nav li ul {
border: none !important;
width: 95% !important;
}
#top-menu li li {
border-bottom: none !important;
}
.sub-menu #menu-item-205211 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205211:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212 {
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
.sub-menu #menu-item-205212:hover {
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -o-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
background: linear-gradient(left, rgba(185,202,236,0.9) 50%, rgba(255,255,255,0.9) 50%) !important;
}
.sub-menu #menu-item-205213:hover
{
background: none !important;
background: -webkit-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -o-linear-gradient(rgba(left, 255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: -moz-linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
background: linear-gradient(left, rgba(255,255,255,0.9) 50%, rgba(185,202,236,0.9) 50%) !important;
}
@media (min-width: 981px){
#top-menu li li a {
padding: 5px 0 5px 0 !important;
text-align: center !important;
color: #000000 !important;
width: 95% !important;
font-size: 11px !important;
}
.et_vertical_nav #main-header #top-menu li ul {
margin-left: 10% !important;
}
.et_vertical_nav #main-header #top-menu > li > a:after
{
right: 45px !important;
}}
#top-menu .menu-item-has-children > a:first-child:after, #et-secondary-nav .menu-item-has-children > a:first-child:after
{
content: "\61" !important;
}

Luați ID-urile CSS ale elementelor dvs. de submeniu și înlocuiți-le pe cele din exemplu cu ale dvs.:

Asta e! Designul dvs. ar trebui să arate acum ca în exemplul prezentat mai sus.

Gânduri finale

În această postare, ți-am arătat câteva posibilități despre cum să devii creativ cu navigarea pe verticală. Mai exact; v-am arătat cum să faceți ca submeniul dvs. vertical să arate grozav. Dacă urmați această postare, pas cu pas, ar trebui să puteți recrea perfect submeniul vertical. Dacă aveți întrebări sau sugestii; anunțați-ne în secțiunea de comentarii de mai jos!

Asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să nu pierdeți niciodată un anunț mare, un sfat util sau un cadou gratuit Divi!