Cum să creați un meniu Sticky extins pe Hover cu Divi

În fiecare săptămână, vă punem la dispoziție pachete de layout Divi noi și gratuite pe care le puteți utiliza pentru următorul dvs. proiect. Pentru unul dintre pachetele de aspect, împărtășim și un caz de utilizare care vă va ajuta să duceți site-ul web la nivelul următor.

Săptămâna aceasta, ca parte a inițiativei noastre continue de proiectare Divi, vă vom arăta cum să creați un meniu lipicios în expansiune folosind pachetul Divi's Mechanic Layout Pack. Vom gestiona două exemple de design diferite pe care le puteți recrea de la zero și le puteți aplica oricărui tip de site web pe care îl creați! Meniul va fi afișat pe hover pe dimensiunile ecranului desktop și activat la clic pe dispozitivele mobile.

Să ajungem la asta!

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Exemplul nr. 1

Desktop

Mobil

Exemplul nr. 2

Desktop

Mobil

Pași generali

Dezactivați navigarea fixă

Accesați Opțiunile temei Divi

Vom începe cu câțiva pași generali. Acești pași sunt aceiași pentru ambele exemple și sunt necesari pentru a obține rezultatul dorit.

Dacă intenționați să utilizați un meniu lipicios în expansiune în partea de jos a paginii, poate doriți să lăsați bara de meniu principală din partea de sus. Pentru a face acest lucru, va trebui să accesați opțiunile temei Divi.

Dezactivați navigarea fixă

Acolo, veți dori să dezactivați opțiunea fixă ​​a barei de navigare pentru a vă asigura că nu rămâne spațiu în partea de sus a paginii.

• Bara de navigare fixă: dezactivată

Ascundeți bara de meniu principală pe pagină

Deschideți Setări pagină

Treceți la pagina la care doriți să adăugați meniul lipicios în expansiune și deschideți setările paginii.

Adăugați CSS personalizat

Ascundeți meniul principal adăugând următoarele linii de cod CSS pe pagina dvs.

#main-header {
display: none;
}

Adăugați o secțiune nouă la sfârșitul paginii

Indiferent de exemplul pe care doriți să îl recreați, unii dintre pașii de bază rămân aceiași. Primul pas este adăugarea unei secțiuni obișnuite în partea de jos a paginii.

Spațiere

Deschideți setările secțiunii și eliminați toate căptușelile personalizate de sus și de jos.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Adăugați un rând nou

Structura coloanei

Continuați adăugând un rând nou folosind următoarea structură de coloane:

Dimensionare

Fără a adăuga încă module, deschideți setările rândului și permiteți rândului să ocupe întreaga lățime a ecranului.

• Utilizați lățimea personalizată a jgheabului: da
• Lățimea jgheabului: 1
• Lățime: 100%
• Lățime maximă: 100%

Spațiere

Eliminați toate umpluturile implicite de sus și de jos în continuare.

• Căptușeală de sus: 0 px
• Căptușeală inferioară: 0 px

Elementul principal

Permitem întregului rând să rămână în partea de jos a paginii noastre prin adăugarea a două linii unice de cod CSS la elementul principal al rândului.

bottom: 0px;
position: fixed;

Indicele Z

Și ne vom asigura că rândul (și modulul de text pe care îl adăugăm în pașii următori) rămân în partea de sus a întregului conținut al paginii, mărind indicele Z în setările de vizibilitate ale rândului.

• Indicele Z: 99

Adăugați un modul de cod în coloană

Adăugați cod CSS între etichetele de stil

Ultima parte a pașilor generali este adăugarea unui modul de cod la noul rând. Codul CSS pe care îl adăugăm în cadrul acestui modul de cod ne va ajuta să obținem efectul revelator asupra hover-ului. Lipiți următoarele linii de cod CSS în interiorul modulului:

<style>
.dt-menu li {
font-size: 0;
line-height: 0;
}
.dt-menu:hover li {
font-size: 2vh;
line-height: 2.1em;
}
</style>

Recreați exemplul nr. 1

Adăugați un modul de text în coloană

Adauga continut

Acum, că am parcurs toți pașii, putem începe să ne concentrăm asupra celor două exemple de design diferite, începând cu primul! Adăugați un modul de text în coloana rândului dvs. În caseta de conținut, folosim stilul de paragraf pentru a afișa copia „Meniu ≡”. Așadar, plasăm toate elementele de meniu într-o listă neordonată. Vom adăuga, de asemenea, un link către fiecare dintre titlurile paginii în mod individual.

Culoare de fundal implicită

Treceți la setările de fundal ale modulului și schimbați culoarea de fundal.

• Culoare fundal: #ffffff

Plasați cursorul pe culoarea de fundal

Modificați această culoare de fundal la cursor.

• Culoare fundal: rgba (255.255.255,0.83)

Fundal de gradient

Și adăugați și un fundal de gradient implicit.

• Culoare 1: rgba (255,255,255,0)
• Culoare 2: #ffffff
• Poziție finală: 60%

Setări implicite pentru text

Continuați accesând fila Design și modificând setările de text.

• Font text: Khand
• Greutatea fontului textului: Bold
• Culoarea textului: # 021827
• Dimensiune text: 3vh
• Orientare text: centru

Plasați cursorul pe Setări text

Modificați unele dintre setările de text la cursor.

• Culoare text: rgba (255,255,255,0)
• Dimensiune text: 0vh

Setări text link

Apoi, accesați setările pentru textul linkului și schimbați culoarea textului linkului.

• Culoare text link: # 000000

Setări implicite pentru textul listei

Treceți la setările implicite ale textului listei și stilizați-le cum doriți. Asigurați-vă că utilizați „0px” pentru dimensiunea textului în starea implicită.

• Font lista neordonată: Khand
• Stil font de listă neordonată: majuscule
• Alinierea textului listei neordonate: Centru
• Culoare text de listă neordonată: rgba (255,255,255,0)
• Dimensiunea textului listei neordonate: 0 px
• Înălțime linie listă neordonată: 0em
• Poziția stilului listei neordonate: în interior

Plasați cursorul pe setările textului

Apoi, modificați unele dintre valorile de pe mouse pentru a permite ca elementele de meniu să apară.

• Culoarea textului listei neordonate: # 000000
• Dimensiunea textului listei neordonate: 2vh
• Înălțimea liniei neordonate: 2.1em

Spațiere implicită

Mergeți la setările de spațiere următoare și dați o formă modulului Text.

• Marja stângă: 45vw (desktop), 39vw (tabletă), 33vw (telefon)
• Marja dreaptă: 45vw (desktop), 39vw (tabletă), 33vw (telefon)
• Căptușeală superioară: 2vw (desktop), 4vw (tabletă), 6vw (telefon)
• Căptușeală inferioară: 2vw (desktop), 4vw (tabletă), 6vw (telefon)

Distanța cu mouse-ul

Modificați aceleași valori la cursor.

• Marja stângă: 14vw
• Marja dreaptă: 14vw
• Căptușeală superioară: 8vw
• Căptușeală inferioară: 8vw

Bordură implicită

Treceți la setările de margine și asigurați-vă că fiecare dintre colțurile rotunjite are o valoare de „0px”.

Plasați mouse-ul peste frontieră

Activați opțiunile de deplasare pe colțurile rotunjite și modificați valorile din stânga sus și din dreapta sus.

• În stânga sus: 50vw
• Dreapta sus: 50vw

Box Shadow

Continuați oferind modulului o anumită adâncime folosind o umbră de cutie. Acest lucru vă va asigura că meniul nu trece neobservat pe pagină.

• Forța de estompare a umbrei cutiei: 1000 ms
• Culoare umbră: rgba (0,0,0,0,68)

Clasa CSS

Adăugăm și o clasă CSS la modul.

• Clasa CSS: dt-menu

Tranziții

Nu în ultimul rând, reduceți durata tranziției în setările tranzițiilor.

• Durata tranziției: 100ms

Recreați exemplul nr. 2

Adăugați un modul de text în coloană

Adauga continut

Trecem la al doilea exemplu! Aici, vom adăuga din nou „≡ Meniu” folosind stilul de text al paragrafului și elementele de meniu folosind o listă neordonată. Vom adăuga, de asemenea, un link către fiecare dintre elementele de meniu în mod individual.

Culoare de fundal implicită

Treceți la setările de fundal și schimbați culoarea de fundal.

• Culoare fundal: #ffffff

Plasați cursorul pe culoarea de fundal

Modificați culoarea de fundal la cursor.

• Culoare fundal: # f71535

Setări implicite pentru text

Apoi, accesați fila de proiectare și faceți câteva modificări la aspectul copiei de paragraf.

• Font text: Khand
• Culoarea textului: # 021827
• Dimensiune text: 3vh

Plasați cursorul pe Setări text

Modificați aceste setări la plecare.

• Culoare text: rgba (255,255,255,0)
• Dimensiune text: 0vh

Setări text link

Treceți la setările de text și modificați culoarea textului linkului.

• Culoare text link: #ffffff

Setări implicite pentru textul listei

Modificați și setările de proiectare ale elementelor de listă neordonate.

• Font Lista neordonată: Khand
• Stil font de listă neordonată: majuscule
• Alinierea textului listei neordonate: Centru
• Culoare text de listă neordonată: rgba (255,255,255,0)
• Dimensiunea textului listei neordonate: 0 px
• Înălțime linie listă neordonată: 0em
• Poziția stilului listei neordonate: în interior

Plasați cursorul pe setările textului

Și modificați câteva dintre aceste valori în cursul cursorului.

• Culoarea textului listei neordonate: #ffffff
• Dimensiunea textului listei neordonate: 2vh
• Înălțime linie listă neordonată: 2.1em

Spațiere implicită

Apoi, accesați setările de spațiere și acordați modulului spațiu.

• Marja dreaptă: 88vw (desktop și tabletă), 71vw (telefon)
• Căptușeală superioară: 6vw (desktop), 10vw (tabletă), 18vw (telefon)
• Căptușeală inferioară: 4vw (desktop), 10vw (tabletă), 12vw (telefon)
• Căptușeală stângă: 1vw

Distanța cu mouse-ul

Modificați valorile la cursor.

• Marja dreaptă: 59vw
• Căptușeală superioară: 13vw
• Căptușeală inferioară: 8vw
• Căptușeală stângă: 1vw
• Garnitura dreapta: 13vw

Frontieră

Și pentru a crea acest design al unui sfert de cerc, vom schimba marginea din dreapta sus în setările de margine.

• Dreapta sus: 50vw

Box Shadow

Vom adăuga, de asemenea, o umbră de casetă pentru a crea adâncime pe pagină.

• Puterea neclarității umbrei cutiei: 1000 px
• Culoare umbră: rgba (0,0,0,0,68)

Clasa CSS

Apoi, vom adăuga o clasă CSS în fila avansată.

• Clasa CSS: dt-menu

Tranziții

Și reduceți durata de tranziție în fila avansată pentru a crea o tranziție rapidă.

• Durata tranziției: 100ms

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Exemplul nr. 1

Desktop

Mobil

Exemplul nr. 2

Desktop

Mobil

Gânduri finale

În această postare, v-am arătat cum să creați un meniu lipicios care se extinde folosind pachetul de aspect mecanic al lui Divi. Am tratat două exemple de design diferite pe care le puteți recrea și utiliza pe orice fel de site web pe care îl construiți! Credem că vă bucurați de această inițiativă în curs de proiectare Divi, în care încercăm să punem ceva suplimentar în cutia de instrumente de proiectare în fiecare săptămână. Dacă aveți întrebări sau sugestii, asigurați-vă că lăsați un comentariu în secțiunea de comentarii de mai jos!

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.