Share
Et populært navigasjonsdesignmønster for den følsomme weben kollapserer nettsiden din til en å velge Meny. Men representerer hierarki eller kategoriske forskjeller i å velge elementer fører ofte til slaktet HTML med manuelle bindestreker og mange mellomrom. I denne opplæringen vil vi introdusere deg til en noe skjult HTML-kode som heter OPTGROUP som gir deg en enkel (og semantisk) måte å gruppere relatert innhold på å velge menyer.
Å finne ut hvordan du optimaliserer nettstednavigering i den lille skjermen på eiendomsmegling av mobile enheter, er en kontinuerlig utfordring for responsivt webdesign. Det er forskjellige responsive webdesignnavigasjonsmønstre som fungerer ganske bra. En av de mest populære metodene er å kondensere nettsidernavigasjon til et skjema å velge element.
Denne teknikken har blitt dekket og forklart i ulike opplæringsprogrammer på nettet, inkludert i en artikkel om Webdesigntuts + av Ian Yates: Bygg et responsivt layout med skjelett. Imidlertid er konvertering av nettstednavigering til en innfødt skjermkontroll ikke uten kontrovers. Noen hevder at det er en dårlig ide, da formelementer ikke bare var ment for navigasjon.
Accentsconagua
å velge: Et raskt oversiktDe å velge elementet er flott et brukergrensesnitt fordi det kan skjule mange alternativer under en enkelt kontroll, og sparer dermed mye skjerm fast eiendom (et attraktivt forslag på mobile enheter). Det gjør det også mulig for designere å holde navigeringsnavigasjonen øverst på siden, der brukerne er vant til å finne den.
I tillegg er det en interaksjonsfordel å velge menyer gir at andre HTML-elementer ganske enkelt ikke kan: innfødte kontroller. Når aktiv, å velge menyer gir brukerne tilgang til innfødte kontroller som muliggjør det mest gunstige samspillet, uavhengig av brukerens enhet eller inngangsmetode.
Bestemme om du skal konvertere navigasjonen til en eller ikke å velge i mobile størrelser er til slutt opp til deg som designer. Hvert tilfelle er annerledes. Hvis du bestemmer deg for å gå ned denne ruten, vil denne opplæringen gi mer informasjon om hvordan du optimaliserer dine navigable koblinger ved å bruke OPTGROUP HTML-tagg.
Vi skal bruke Webdesigntuts + som et enkelt eksempel på hvordan du teoretisk kan bruke OPTGROUP stikkord.
Merk: Dette eksemplet er på ingen måte et forslag til hvordan du kan løse et navigasjonsdesign problem for Webdesigntuts + eller et hvilket som helst nettsted. Det er bare en rask illustrasjon av hvordan man kan bruke OPTGROUP element.
La oss si at vi ønsket å kondensere de tre separate navigasjonselementene på Webdesigntuts + hjemmeside til en å velge element.
OPTGROUP Konvertering av navigable koblinger til et velg element mens du opprettholder kategorisk gruppering kan vise seg å være rotete hvis ikke gjort riktig. Noen designere / utviklere kan skape en gigant å velge meny ved hjelp av manuelle mellomrom () og bindestreker som separatorer:
OPTGROUP Imidlertid bruker du OPTGROUP elementet vil gi deg renere HTML og innebygd støtte for kategorisering i en å velge liste. Vi bruker merkelapp attributt for å bestemme hva som skal vises:
Du kan se at HTML-oppretting gjør at du kan representere et foreldre / barn forhold uten å måtte sette inn spesielle mellomrom og bindestreklister.
Som nevnt, en fordel med å bruke å velge Elementet er tilgang til innfødte kontroller på mobil- eller berøringsskjerm enheter. Her er noen eksempler på hvordan disse menyene vil se ut:
Det er alt der er til det! Bare husk OPTGROUP elementet gir en mer semantisk og vedlikeholdsbar løsning for kategorisering av grupper av lenker i a å velge liste. Hvorvidt du bruker en å velge Meny for kondensering av nettsidernavigering på mobile enheter er en avgjørelse du må lage som designer; Men du har nå en ekstra kunnskap i verktøyet ditt for å mestre responsivt webdesign!
