Cum se face un meniu adaptabil de cauciuc css 3 pași

Buna ziua. Un timp foarte lung nu a scris postări pe tema html / css de lucru. Recent, am început să impună aspect nou și în procesul dat peste o tehnică interesantă, care vă permite să faceți un meniu de cauciuc (va fi posibil să se adauge elemente noi și dimensiunea nu este crescut, și întotdeauna va fi de 100% din unitatea de bază). Deci, astăzi vom implementa un meniu de cauciuc pe css.







CSS din cauciuc meniu - Pasul 1

Primul pas este întotdeauna html markup, în cazul în care fără ea. Dar în cazul nostru totul va fi simplu:

  1. Blocare bloc pentru meniuri
  2. meniul în sine, afișat printr-o listă cu marcatori (tag ul)
  3. bine, elementele de meniu din interiorul și, respectiv, în ele, au deja legături

Totul este clar, aici este codul meu de marcare:



Arată toate standard, cum ar fi:

Acum vom pune totul în forma corectă, CSS este luat pentru muncă.

Pasul 2 - Stiluri de bază

Creați și conectați foaia de stil la documentul html. Mai întâi de toate, voi renunța la indentsul tuturor elementelor.

Apoi, voi adăuga stiluri la blocul de împachetare. Și anume, a existat o lățime maximă de 600 pixeli (doar pentru a face convenabil pentru a face o captură de ecran la pauzele de meniu) și aliniați unitatea.

Pasul 3 - Realizați cauciucul

Acum luăm meniul însuși. La el (la un tag ul) voi curata markeri, voi face un fundal gradient liniar. și, cel mai important, prin afișarea: proprietatea rândului de masă, voi face ca containerul pentru meniu să se comporte ca un rând de tabel. Acest lucru este important pentru manipularea ulterioară.







După cum puteți vedea, acest cod a rezolvat tot ce am scris. Apropo, gradienti sunt generati in mod convenabil folosind instrumentul generatorului CSS Gradient Ultimate. Voi scrie despre asta într-un fel.

Apoi, trebuie să specificați stilurile pentru elementele de meniu. aici:

  • vertical-align: bottom - această proprietate este necesară astfel încât dacă textul din elementul de meniu are 2 linii, este afișat exact. Când facem meniul, puteți să ștergeți această proprietate, să măriți pentru a micșora punctele, iar textul să fie mutat pe două linii și veți vedea o problemă cu afișajul. Retur proprietatea și totul va fi bine.
  • afișare: table-cell - de vreme ce am setat meniul de afișare în sine ca rând de tabel, este logic să setați elementele să fie afișate ca celule în tabel. Acest lucru este obligatoriu.
  • lățime: auto - lățimea va fi calculată automat, în funcție de lungimea textului din paragraf
  • text-align: center este doar pentru alinierea textului în interiorul centrului
  • înălțime: 50 pixeli - setați înălțimea la 50 de pixeli
  • bine, granița-dreapta este doar granița din dreapta, un astfel de separator pentru articole

Și acum meniul arată astfel:

Din nou, voi explica câteva linii:

Pasul 4 (opțional) puteți adăuga interactivitate

De exemplu, pentru a schimba culoarea elementului de meniu când plasați cursorul. Acest lucru este destul de simplu, folosind pseudo-clasa hover:

Testați meniul pentru cauciuc

Bine, meniul e gata, dar nu am verificat cel mai important lucru - cum e cauciucul, așa cum ți-am promis. Ei bine, voi adăuga încă două elemente în meniu:

Meniul este lăsat la o lățime de 600 de pixeli. Elementele rămase sunt doar puțin rigidizate pentru a se potrivi celor 2 noi.

Voi adăuga încă un punct lung:

După cum puteți vedea, meniul a fost puțin mai ciudat și elementul lung a apărut destul de normal. Și dacă nu există nici o verticală-aliniere: proprietatea de jos. despre care ți-am spus, meniul ar părea mai rău.

Reduceți meniul la trei puncte.

Elementele au devenit mult mai libere, însă meniul în sine nu sa schimbat în lățime. Așa că am făcut un meniu de cauciuc 100%!

Cum să o adaptați?

În principiu, dacă setați blocul de împachetare nu este fix, ci lățimea maximă, atunci nu trebuie nici măcar să fie adaptat. În cazul meu am este proprietatea max-lățime: 600px, iar când lățimea va fi mai mică de 600 de pixeli, unitatea va scădea numai după ecran, fără a forma o bară de derulare orizontală.

Ei bine, dacă vreți să schimbați sau să corectați meniul pe dispozitivele mobile sau pe ecranele largi, atunci solicitările media vă ajută! Succes în construirea site-ului!

Ați putea fi, de asemenea, interesat







Articole similare

Pagina anterioară

Pagina următoare

Trimiteți-le prietenilor: