Share
Un model popular de design de navigare pentru web receptiv este colaps navigarea site-ul dvs. într-o Selectați meniul. Cu toate acestea, reprezentând ierarhia sau distincțiile categorice în Selectați elementele conduc adesea la coduri HTML martor, cu cratime manuale și multe altele spații. În acest tutorial vă vom prezenta o etichetă HTML puțin obscură numită Optgroup care vă va oferi o modalitate ușoară (și semantică) de grupare a conținutului înrudit în Selectați meniuri.
Imaginând cum să se potrivească în mod optim navigarea pe site-ul web în imobile pe ecranul imobiliar al dispozitivelor mobile este o provocare continuă a unui design web receptiv. Există diferite modele de navigare cu design receptiv care funcționează destul de bine. Una dintre metodele mai populare este condensarea navigării pe site într-o formă Selectați element.
Această tehnică a fost acoperită și explicată în diverse tutoriale de pe web, inclusiv într-un articol despre Webdesigntuts + de Ian Yates: Construirea unui plan responsabil cu scheletul. Totuși, convertirea navigării site-ului într-un control nativ nu este controversată. Unii susțin că este o idee proastă, deoarece elementele de formă nu erau pur și simplu destinate navigației.
Accentsconagua
Selectați: O prezentare rapidă Selectați elementul este un element UI, deoarece poate ascunde multe opțiuni sub un singur control, economisind astfel o mulțime de imobile pe ecran (o propunere atractivă pe dispozitivele mobile). De asemenea, permite proiectanților să păstreze navigarea site-ului în partea de sus a paginii, unde utilizatorii sunt obișnuiți să-l găsească.
În plus, există un beneficiu de interacțiune Selectați meniurile prevăd că alte elemente HTML nu pot pur și simplu: controale native. Când este activ, Selectați meniurile oferă utilizatorilor acces la controalele native care oferă eventual cea mai favorabilă interacțiune, independent de dispozitivul utilizatorului sau metoda de introducere.
Decideți dacă doriți sau nu să convertiți navigația într - un Selectați la dimensiuni mobile este în cele din urmă până la tine ca designer. Fiecare caz este diferit. Dacă decideți să mergeți în jos pe acest traseu, acest tutorial vă va oferi mai multe informații despre cum să grupați în mod optim linkurile dvs. navigabile utilizând Optgroup Etichetă HTML.
Vom folosi Webdesigntuts + ca un exemplu simplu de utilizare a teoretic Optgroup etichetă.
Notă: Acest exemplu nu este nicidecum o sugestie de rezolvare corectă a problemei de proiectare a navigației pentru Webdesigntuts + sau orice alt site. Este doar o ilustrare rapidă a modului în care s-ar putea folosi Optgroup element.
Să presupunem că am vrut să condenseze cele trei elemente de navigare separate de pe pagina de pornire Webdesigntuts + într-un Selectați element.
Optgroup Transformarea legăturilor navigabile într-un element selectat, în timp ce se păstrează gruparea categorică, se poate dovedi a fi dezordonată dacă nu este făcută corect. Unii designeri / dezvoltatori ar putea crea un gigant Selectați meniul utilizând spațiile manuale () și cratițele ca separatoare:
Optgroup Cu toate acestea, folosind Optgroup element vă va oferi un cod HTML mai curat și un suport încorporat pentru categorisire într-un Selectați listă. Noi folosim eticheta atribut pentru a determina ce va fi afișat:
Puteți vedea că marcajul HTML vă permite să reprezentați o relație părinte / copil fără a fi nevoie să introduceți spații speciale și liste cu despărțitori.
Așa cum am menționat, un avantaj al utilizării Selectați element este accesul la comenzile native pe dispozitive mobile sau touch screen. Iată câteva exemple despre cum arată aceste meniuri:
Cam despre asta e! Doar amintiți-vă Optgroup elementul oferă o soluție mai semantică și mai ușor de întreținut pentru a clasifica grupurile de linkuri într-un Selectați listă. Indiferent dacă utilizați sau nu Selectați meniul pentru condensarea navigării site-ului web pe dispozitivele mobile este o decizie pe care trebuie să o faceți în calitate de designer; cu toate acestea, acum aveți un nugget suplimentar de cunoștințe în centura dvs. de instrument pentru mastering web design receptiv!
