Deci, vom examina toate opțiunile posibile pentru crearea unui meniu CSS din cauciuc. Să începem cu crearea navigației din elemente inline.
Meniu text din cauciuc orizontal
Linia de fund este distribuirea uniformă a punctelor de navigare text la lățimea totală. Stânga și dreapta (la marginea meniului) nu există liniuțe, iar între cuvintele individuale distanțele sunt exact aceleași. Această metodă se bazează pe utilizarea proprietății text-align: justify, care, după cum știți, distribuie textul pe întreaga lățime prin schimbarea distanțelor dintre cuvinte, ceea ce este exact ceea ce avem nevoie.
Dar dacă șirul este unul, ca de fapt și ar trebui să fie atunci când creăm un meniu, textul nu este distribuit pe întreaga lățime. Va lua un mic truc pentru ao forța. Pentru acest lucru folosim pseudo-elementul: înainte, care va genera conținut suplimentar pentru noi, mărimea unei linii va fi depășită și textul va fi întins. Acest conținut suplimentar (în exemplul 1) nu va fi vizibil din cauza tăierii de supracurent: ascuns. Puteți ascunde opțional cu înălțime: 0 sau vizibilitate: ascuns.
Mai multe nuanțe ale codului: pentru a vă asigura că nu sunt rupte cuvintele din paragrafe separate, se utilizează blocul inline în loc de inline (în regulile pentru a).
Consultați codul și exemplul curent.
Meniul orizontal al blocurilor cu aceleași liniuțe
Utilizarea modelului cutie flexibilă
Pentru o lungă perioadă de timp m-am interesat de întrebarea cum să creezi navigație, lățimea tuturor punctelor care ar constitui o lățime care depinde de mărimea conținutului și de lățimea suplimentară care are aceeași valoare pentru fiecare element. Browserul său ar trebui să calculeze când se modifică dimensiunea ferestrei și se adaugă la blocurile de meniuri. Pentru o înțelegere mai bună, uitați-vă la imagine.
Săgețile roșii indică distanța dintre text și unitatea cadru de dreapta, acestea sunt padding suplimentare, care trebuie să fie schimbat în mod dinamic și să fie aceeași pentru toate articolele. Distanța dintre cuvintele ca elementele de meniu dintr-un meniu de aceeași (deoarece egală cu dublul adâncitură).
Vom încerca să aplicăm această tehnică în practică pentru nevoile noastre. Mai întâi, atribuiți clasei de containere listei ul și setați proprietatea de afișare: caseta la ea. Această valoare a proprietății afișate este nouă și spune browser-ului că acest bloc ar trebui tratat ca un element special numit "câmp flexibil". Copiii săi li vor fi afișați orizontal, datorită proprietății box-orient.
Următoarea proprietate foarte importantă care ar trebui atribuită elementelor de meniu este box-flex. Specifică gradul de flexibilitate al elementelor li. și anume de la ea depinde modul în care blocurile vor împărți spațiul liber între ele. În exemplul de mai jos, elementele de meniu sunt setate la box-flex: 1. prin urmare, vor împărți spațiul disponibil în proporții egale. Astfel, sarcina este rezolvată.
Următorul cod este HTML și CSS, precum și un exemplu practic de funcționare a meniului.
Utilizarea afișajului: tabel (sau tabel)
Totul ar fi bine, în primul exemplu de realizare, în cazul în care nu au fost un dezavantaj semnificativ - sprijin browser-ul este slabă, și pentru a obține cel puțin unele cross-browser-ul trebuie să utilizeze propriile sale proprietăți prefixe browser-ului. Cum ar fi -moz (Firefox), -webkit (Chrome și toate browserele pe bază de crom, inclusiv cea mai recentă versiune de Opera - dezvoltatorii abandonat cunoscută utilizarea motorului Presto), suport c pentru versiunile mai vechi de Opera și Internet Explorer este încă mai rău.
Prin urmare, este recomandabil să folosiți o altă metodă, mai mult sau mai puțin browser încrucișat. Primul lucru care vine în minte sunt mesele. Dar aici suntem dezamăgiți: în timp ce articolele de aproximativ aceeași lungime, vizualizarea meniului este, în principiu, normală, este necesar doar stabilirea unui punct lung sau scurt - tabelul devine urât disproporționat. La un punct lung, tălpile sunt mult mai mari decât celelalte, respectiv, sunt mult mai largi, cel mai scurt punct are cea mai mică indentare - este cel mai scurt. Se pare că acest lucru se datorează modului în care tabela redistribuie spațiu liber: cu cât este mai mare lățimea punctului - din spațiul disponibil îi este alocat un spațiu suplimentar. Și, din cauza acestei inegalități, apare un astfel de urât urât.
Cum de a rezolva asta? De exemplu, dacă adăugați o proprietate lățime celulelor: 1%, situația se schimbă radical. explicație exactă nu poate da, să presupunem că, atunci când lățimea celulelor este aceeași, și cu siguranță mai puțin decât conținutul spațiului liber începe distribuit în mod egal între ei. Orice s-ar explica, la ieșire obținem rezultatul aproape identic cu utilizarea modelului Flexible Box.
Iată codul pentru această opțiune de navigare.
Articole similare
Trimiteți-le prietenilor: