Share
Ett populärt navigationsdesignmönster för den mottagliga webben kollapsar din webbplatss navigering till en Välj meny. Men representerar hierarki eller kategoriska skillnader i Välj element leder ofta till slaktad HTML med manuella bindestreck och massor av utrymmen. I den här handledningen presenterar vi dig för en obekant HTML-tagg som heter Somehwat optgroup vilket ger dig ett enkelt (och semantiskt) sätt att gruppera relaterat innehåll i Välj menyer.
Att bestämma hur man optimalt anpassar webbplatsnavigeringen till den lilla skärmen av mobila enheter är en pågående utmaning för lyhörd webbdesign. Det finns olika mottagliga webbdesignnavigationsmönster som fungerar ganska bra. En av de mer populära metoderna är att kondensera webbplatsnavigeringen till en blankett Välj element.
Denna teknik har blivit täckt och förklarad i olika tutorials över hela webben, inklusive i en artikel om Webdesigntuts + av Ian Yates: Bygga en Responsive Layout with Skeleton. Omvandling av sidnavigering till en inbyggd formkontroll är dock inte utan kontrovers. Vissa hävdar att det är en dålig idé, eftersom formelementen helt enkelt inte var avsedda för navigering.
Accentsconagua
Välj: En snabb översiktDe Välj Elementet är utmärkt ett UI-element eftersom det kan dölja många alternativ under en enda kontroll, vilket sparar mycket av fastighetsskärmen (ett attraktivt förslag på mobila enheter). Det gör det också möjligt för konstruktörer att hålla sidnavigeringen högst upp på sidan, där användarna är vana vid att hitta den.
Dessutom finns det en interaktionsförmån Välj menyer anger att andra HTML-element helt enkelt inte kan: inbyggda kontroller. När aktiv, Välj menyer ger användarna tillgång till inhemska kontroller som möjligen ger den mest fördelaktiga interaktionen oberoende av användarens enhet eller inmatningsmetod.
Bestämmer huruvida du ska konvertera din navigering till en Välj i mobilstorlekar är i slutändan upp till dig som designer. Varje fall är annorlunda. Om du bestämmer dig för att gå ner denna rutt, kommer denna handledning att ge mer information om hur du optimalt grupperar dina navigerbara länkar med hjälp av optgroup HTML-tagg.
Vi ska använda Webdesigntuts + som ett enkelt exempel på hur man teoretiskt använder optgroup märka.
Notera: Detta exempel är inte på något sätt ett förslag på hur man korrekt löser ett navigationsdesignproblem för Webdesigntuts + eller någon webbplats. Det är bara en snabb illustration av hur man kan använda optgroup element.
Låt oss säga att vi ville kondensera de tre separata navigationselementen på Webdesigntuts + hemsidan till en Välj element.
optgroup Omvandling av navigerbara länkar till ett väljelement medan du behåller kategorisk gruppering kan visa sig vara rörigt om det inte görs korrekt. Vissa designers / utvecklare kan skapa en jätte Välj meny med manuella mellanslag () och bindestreck som separatorer:
optgroup Men med hjälp av optgroup elementet ger dig renare HTML och inbyggt stöd för kategorisering i en Välj lista. Vi använder märka attribut för att bestämma vad som ska visas:
Du kan se att HTML-markup gör det möjligt för dig att representera ett föräldra- / barnförhållande utan att behöva infoga specialavstånd och ordalydda listor.
Som nämnts, en fördel med att använda Välj Elementet är åtkomst till inbyggda kontroller på mobil- eller pekskärmsenheter. Här är några exempel på hur dessa menyer skulle se ut:
Det är allt det finns! Kom bara ihåg det optgroup elementet ger en mer semantisk och underhållbar lösning för kategorisering av grupper av länkar i a Välj lista. Oavsett om du använder en Välj Meny för kondensering av webbplatsnavigering på mobila enheter är ett beslut du behöver göra som designer; Men du har nu en extra koll på kunskap i ditt verktygsband för att mastera responsiv webbdesign!
