Meniul fix în partea de jos și de sus a ecranului


Un meniu cu meniuri fixe poate fi util aproape peste tot. La urma urmei, nu ocupă mult spațiu, evident, iar utilizatorul poate să acceseze orice pagină a site-ului dvs. fără a găsi dificultăți în găsirea blocului de meniuri.

În acest exemplu, vom analiza două tipuri de meniuri fixe: prima opțiune de meniu este apăsată în partea de sus a ecranului, cea de-a doua în partea de jos a ecranului. Un astfel de meniu este creat foarte simplu, folosind poziționarea, iar colțurile sunt create folosind pseudo-clase. Dar despre totul în ordine. Mai întâi, creați un meniu fix, apăsat în partea de sus a ecranului.

Ca de obicei, începeți cu designul clasei topMenu. transparență, tranziție. fundal, indentare internă:

Acum, când plutiți în sus, faceți ca transparența să dispară:

Referințe: liniuța internă, culoarea textului, fundalul când se deplasează:

Acum, cel mai interesant. Facem colțuri. Pentru a face acest lucru vom folosi pseudo-clase: după. pentru primul colț și pseudo-clasa: înainte. care merge ultima.
Pentru a crea colțuri, utilizați proprietatea pentru lățimea marginii. Stil de frontieră. border-color. Doar pentru a obține un colț, trebuie să îl puneți mai întâi și să îl plasați în locul în care vrem să vedem colțul.

În primul rând, vom crea primul colț:

Ei bine, respectiv, al doilea, care merge ultima:

Asta e tot. Primul nostru meniu fixat în partea de sus este gata. Cu a doua opțiune fixată în partea de jos a meniului, totul este același, numai proprietățile pseudo-claselor: după și: înainte s-au schimbat. Ei bine, în sine, codul complet al celei de-a doua opțiuni de meniu, fixat în partea de jos:



Articole similare