Share
Navigasjon er en nødvendig brukergrensesnitt på et hvilket som helst nettsted. Uavhengig av skalaenes enkeltside eller fullblåst e-handel, trenger et nettsted navigering slik at brukerne kan bevege seg gjennom sidene og seksjonene. Etter vår tidligere opplæring om Material Design Lite Grid, i denne delen skal vi se hvordan du bruker en annen MDL-komponent: Navigasjonen.
Før du begynner, ikke glem å inkludere MDL-bibliotekene; stilarkene og JavaScript i hode av siden din:
Nå kan vi begynne å bygge navigasjonen.
Navigering i MDL er en underkomponent av Layout, sammen med de andre som rutenett, faner og bunnteksten. Den grunnleggende form for navigering i MDL omfatter nettstednavnet, et par koblingsmenyer og en off-canvas navigasjon.
For å opprette en, legg til en tom div med MDL-layout og MDL-js-layout vedlagte. Disse to klassene kreves. De MDL-layout Klassen gjelder forhåndsdefinerte stiler som i utgangspunktet sikrer at UI-komponenten, hovedsakelig navigasjonen, er lagt ut riktig. I mellomtiden MDL-js-layout vil legge til noe dynamisk oppførsel via JavaScript som inkluderer å legge til nye elementer og et par ekstra klasser for å gjøre navigasjonsfunksjonen.
Innenfor dette div, lage en Overskrift element med MDL-layout__header klasse vedlagt.
Deretter oppretter du en ny div med MDL-layout__header rad. Dette er elementet der vi faktisk skal sette navigasjonen på plass.
Vri nettstednavnet ved hjelp av a span element med MDL-layout-tittel klasse vedlagt, deretter en ankermerke med en URL som peker til hjemmesiden. Du kan erstatte teksten med et bilde av nettstedet ditt også.
Acme
Lage en div under nettstednavnet med MDL-layout-spacer klasse vedlagt. Dette div vil legge til mellomrom mellom nettstednavnet, og til slutt skyve navigasjonen til høyre på overskriften.
Acme
Nå legger vi til navigasjonsmenyene under spacer bruker nav element.
Acme
Til slutt, legg til en ny div med MDL-layout__drawer Utenfor Overskrift element for å bygge off-canvas navigasjonen.
AcmeAcme
Når du laster opp siden, bør ikke-kanvasnavigasjonen arbeide umiddelbart. Du bør finne "hamburger" -ikonet for å slå det på og av. Gi det et forsøk:
Men som du kan se over, er navigasjonslinjen, samt nettstednavnet og navigasjonsmenyen skjult. MDL gjemmer dem med hensikt når de vises gjennom tablettstørrelsesvisningsporter. Dette er faktisk en vurdert beslutning fra MDL-teamet. Den horisontale menyen er dårlig tilpasset når det gjelder skalering horisontalt, spesielt hvis du har dusinvis av menyer. På et tidspunkt vil det ikke passe inn i en smal visningsport og vil mest sannsynlig kollapse eller overlappe den andre brukergrensesnittet i navigasjonen.
Ikke desto mindre, hvis vi ønsker å beholde synligheten i en mindre visningsport, legger du til MDL-layout - fast-header inline med MDL-layout klasse.
... mer innhold her ...
Denne klassen vil tvinge navigasjonen til å være synlig på telefoner og tabletter.
Søkeformularer er et vanlig tilleggselement i websideregistrering. De kan være veldig nyttige for brukere som kanskje ikke er sikker på hvilken meny som skal gå gjennom for å finne innholdet de leter etter. Med søkeskjemaet kan de bare skrive og søke.
Finn fullstendig HTML for å bygge søkeskjemaet under nav element
... mer innhold her ...... mer innhold her ...
Her har vi faktisk definert to forskjellige MDL-komponenter, nemlig tekstfeltet og knappen. Knappen vises som et søkeikon som vil utvide søkefeltet når det klikkes:
Navigasjonen i MDL er en overveldende stor komponent gitt antall variasjoner vi kan ordne for forskjellige scenarier. I denne opplæringen bygget vi bare en grunnleggende navigasjon ved å bruke de essensielle klassene.
Navigasjonen kan videre utvides med brukerklasser eller ved å legge til andre komponenter fra MDL. For eksempel kan vi gjøre navigasjonsbakgrunnen gjennomsiktig og bruke et bakgrunnsbilde, sett av-lerretnavigasjonen for alltid synlig, gjør navigasjonen un-klebrig, og til og med erstatte koblingsmenyene med faner som kan være nyttige for en nettside.
Navigasjonskomponenten er imidlertid ganske uttalt.
Navigasjonsstilene inspiseres gjennom Chrome DevToolsPadding på venstre side av navigasjonen som er angitt for 72px, for eksempel, antyder at en navigasjon skal ha en off-canvas navigasjon med "hamburger" -ikonet. Noen ganger må vi kanskje bare ha en anstendig navigasjon med grunnleggende funksjoner. Likevel er navigasjonen en solid komponent. Jeg gleder meg til forbedringer og kanskje flere funksjoner.
I neste veiledning ser vi på to komponenter som vi allerede kort har sett på: Knapper og tekstfelt. Til neste gang!
Accentsconagua