Creați un meniu de navigare fix, html

Navigare meniu fix este adesea numit meniul „lipicios“, pentru că esența ei, în plus față de navigare, este că acesta rămâne întotdeauna în aceeași poziție pe pagina, indiferent de utilizator derularea.

Aceasta este o practică destul de comună, atunci când navigarea site-ul șablon utilizează o execuție similară opțiune de meniu, și nu numai meniul.

În acest articol vă voi arăta un simplu CSS pentru a pune în aplicare în site-ul accepta meniul de navigare orizontal „lipicios“.

Înainte de a începe, ne aruncăm o privire la câteva site-uri care utilizează deja o bară de navigare fix, doar pentru a vedea cum funcționează în practică.

Mai jos am enumerat câteva link-uri.

Dezvoltatorii de editor on-line 99U construit în meniul de navigare bara de navigare. În timp ce citiți o resursă de știri utilizatorul are posibilitatea de a comuta instantaneu la secțiunea dorită a site-ului să-l:

Acest lucru permite utilizatorilor să sari rapid la următorul articol după ce a citit cea anterioară. Bara de navigare fixă ​​crește timpul petrecut de utilizator pe site, deoarece cititorii sunt utilizate în mod constant pentru a selecta meniul de știri proaspete:

Și, după cum se poate vedea în mod clar din exemplul anterior, bara de navigare îmbunătățește în mod semnificativ gradul de utilizare a site-ului cu o varietate largă de conținut.

Crearea unei bare de navigare fix

Mai jos este un demo de modul în care se pare că, în practică:

Du-te la GitHub Repository

Partiționarea necesită un minim - aspect de bloc element pe care am pus conținutul unei bare de navigare fix:

nav element este excelent în acest caz. Acesta oferă servicii de la terțe părți (cum ar fi cum ar fi antenele motoarelor de căutare), fără posibilitatea de probleme de a înțelege structura de informații a site-ului. nav element este un bloc implicit, deci nu trebuie să scrie o linie suplimentară de -Code CSS.

Dar, dacă nu doriți să utilizați NAV, atunci puteți utiliza orice element bloc implicit, cum ar fi div. Puteți utiliza, de asemenea, element de linie, cum ar fi durata. dar să-l înregistreze pe afișajul de proprietate CSS-cod: bloc.

Aici este CSS-cod, ceea ce face ca barul nostru de navigare fixat într-un singur loc:

Anterior, am atribuit nostru de clasă-element HTML fix-nav-bar. astfel încât acum se aplică numai stilurile selectorului dorit.

Valorile ultimelor trei proprietăți (lățime. Înălțime și culoare de fundal) este modificată pentru a se potrivi site-ul tău.

Să considerăm acum mai în detaliu aceste patru magice CSS-proprietate responsabil pentru magia:

Proprietăți Setarea top. la stânga și la dreapta la 0, vom evita apariția nedorită a liniuțele de pe părțile laterale ale barei de navigare.

O astfel de valoare mare a indicelui z este utilizat pentru a evita apariția unui alt membru fix HTML -razmetki bara de navigare de sus (cu excepția cazului în elementul apare din valoarea indexului z mai mare de 9999).

Pe aceasta, probabil, totul.

remarcă

În exemplul demo aplicat versiune destul de învechită exercitarea receptivă efectuate pe CSS. meniul de navigare. În această formă, este un concept, dar nu a terminat forma. Deoarece în această lecție, obiectivul nostru principal a fost construirea unei bare de navigare fixă, care poate fi un container pentru toate celelalte elemente ale paginii, nu am de gând pentru a discuta despre meniu.

Examinați codul sursă. dacă vei fi întrebați cum această parte (dacă există momente ciudate, pur și simplu tweet și voi fi bucuros să vă ajute să aflați).

Rezumând

Bara de navigare fix este destul de simplu de implementat. Este nevoie de un minim de HTML si CSS -razmetki -Properties doar câteva pe care le-am examinat.

Discutate în acest articol, metoda are o excelenta compatibilitate cross-browser, deoarece folosește numai dovedite și proprietățile de încredere ale CSS. și, prin urmare, acesta va funcționa corect, chiar și în cele mai vechi browsere web. Cu toate acestea, în cazul în care compatibilitatea inversă este extrem de importantă pentru proiectele dvs., puteți decide să înlocuiască NAV (care se referă la HTML5) de pe div.

Bara de navigare context dreapta fix poate îmbunătăți gradul de utilizare, deoarece utilizarea acestuia reduce întârzierea atunci când trecerea la noua sarcină, în comparație cu panoul de navigare orizontală tradiționale care necesită defilare înapoi la partea de sus.

Traducerea articolului «Cum de a crea un fix bara de navigare» a fost pregătit de o echipă de proiect prietenos Web design de la A la Z.