Share
Navigarea este un interfață utilizator necesară pe orice site web. Indiferent de pagina cu o singură scală sau cu un comerț electronic complet, un site web are nevoie de navigare pentru a permite utilizatorilor să se deplaseze prin pagini și secțiuni. Urmând tutorialul nostru despre Material Design Lite Grid, în această tranșă vom vedea cum să folosim o altă componentă MDL: Navigația.
Înainte de a începe, nu uitați să includeți bibliotecile MDL; foile de stil și JavaScript în cadrul cap din pagina ta:
Acum, putem începe construirea navigației.
Navigarea în MDL este o subcomponentă a Layout-ului, împreună cu celelalte, cum ar fi grila, filele și subsolul. Forma de bază a navigării în MDL cuprinde numele site-ului, câteva meniuri de legătură și o navigare în afara canvasului.
Pentru a crea una, adăugați o imagine goală div cu mdl-aspect și mdl-js-layout atașat. Aceste două clase sunt obligatorii. mdl-aspect clasa utilizează stiluri predefinite care asigură în principiu componenta UI, în principal Navigația, sunt așezate corect. Între timp, mdl-js-layout va adăuga un comportament dinamic prin JavaScript, care include adăugarea de elemente noi și câteva clase suplimentare pentru a face funcția de navigare.
În acest sens div, creeaza o antet element cu mdl-layout__header clasă anexată.
Apoi, creați un nou div cu mdl-layout__header-rând. Acesta este elementul în care vom seta de fapt navigația.
Înfășurați numele site-ului folosind a deschidere element cu mdl-layout-titlu clasă atașată, apoi o etichetă de ancorare cu o adresă URL care indică pagina de pornire. Puteți înlocui textul și cu o imagine a siglei site-ului dvs..
Culme
Creeaza o div sub numele site-ului cu mdl-layout-spacer clasă anexată. Acest div va adăuga spațiu între numele site-ului și în cele din urmă va împinge navigația spre dreapta în antet.
Culme
Acum, adăugăm meniurile de navigare de mai jos distanțier folosind nav element.
Culme
În cele din urmă, adăugați un nou div cu mdl-layout__drawer in afara antet element pentru a construi navigația în afara canapelei.
CulmeCulme
Pe măsură ce reporniți pagina, navigarea în afara canapelei ar trebui să funcționeze imediat; ar trebui să găsiți pictograma "hamburger" pentru ao activa și dezactiva. Încearcă:
Cu toate acestea, după cum puteți vedea mai sus, bara de navigare, precum și numele site-ului și meniul de navigare sunt ascunse. MDL intenționează să le ascundă atunci când este afișată prin ferestrele de vizualizare cu dimensiuni de tabletă. Aceasta este de fapt o decizie luată în considerare de către echipa MDL. Meniul orizontal este puțin adaptat la scalarea orizontală, mai ales dacă aveți zeci de meniuri. La un moment dat, acesta nu se va potrivi într-un port de vizualizare îngust și, cel mai probabil, se va prăbuși sau va suprapune celălalt interfață utilizator în navigație.
Cu toate acestea, dacă dorim să ne păstrăm vizibilitatea într-un port de vizualizare mai mic, adăugați mdl-layout - antet fix în linie cu mdl-aspect clasă.
... mai mult conținut aici ...
Această clasă va forța navigarea să fie vizibilă pe telefoane și tablete.
Formularele de căutare sunt un element suplimentar comun în navigarea pe site. Ele pot fi foarte utile pentru utilizatorii care nu pot fi siguri de ce meniu să treacă pentru a găsi conținutul pe care îl caută. Cu ajutorul formularului de căutare, aceștia pot pur și simplu tasta și căuta.
Găsiți HTML complet pentru a construi formularul de căutare de sub nav element
... mai mult conținut aici ...... mai mult conținut aici ...
Aici am definit două componente diferite ale MDL, și anume câmpul text și butonul. Butonul apare ca o pictogramă de căutare care va extinde câmpul de introducere a căutării când se face clic pe:
Navigarea în MDL este o componentă covârșitoare uriașă având în vedere numărul de variații pe care le putem aranja pentru diferite scenarii. În acest tutorial, am construit doar o navigație de bază utilizând clasele esențiale.
Navigarea poate fi extinsă suplimentar cu clase de utilitate sau prin adăugarea altor componente din MDL. De exemplu, putem face fundalul de navigare transparent și să folosim o imagine de fundal, să setăm navigarea în afara canapelei vizibile întotdeauna, să facem navigația ne-lipicios, și chiar înlocuiți meniurile de link-uri cu Tab-uri care pot fi utile pentru un singur site web.
Componenta de navigație, totuși, este destul de convingătoare.
Stilurile de navigare inspectate prin Chrome DevToolsAmplasarea din partea stângă a navigării, care este setată pentru 72 de pixeli, sugerează, de exemplu, că navigația ar trebui să aibă o navigare în afara canvasului cu pictograma "hamburger". Uneori, putem avea nevoie doar de o navigare decentă cu caracteristici de bază. Totuși, navigația este o componentă solidă. Aștept cu nerăbdare îmbunătățiri și, eventual, funcționalități suplimentare.
În următorul tutorial, vom examina două componente pe care le-am analizat deja pe scurt: Butoane și câmpuri de text. Pana data viitoare!
Accentsconagua