Share
Un modello di progettazione di navigazione popolare per il web reattivo sta collassando la navigazione del tuo sito web in a selezionare menu. Tuttavia, rappresentano la gerarchia o distinzioni categoriali in selezionare gli elementi spesso portano a HTML macellati con trattini manuali e molti spazi. In questo tutorial ti presenteremo un tag HTML oscuro di somehwat chiamato optgroup che ti fornirà un modo facile (e semantico) di raggruppare i contenuti correlati in selezionare menu.
Capire come adattare in modo ottimale la navigazione del sito Web nel piccolo schermo immobiliare dei dispositivi mobili è una sfida continua del responsive web design. Esistono vari modelli di navigazione del responsive web design che funzionano abbastanza bene. Uno dei metodi più popolari è la condensazione della navigazione del sito Web in un modulo selezionare elemento.
Questa tecnica è stata illustrata e spiegata in vari tutorial sul Web, incluso in un articolo su Webdesigntuts + di Ian Yates: Creazione di un layout reattivo con Skeleton. Tuttavia, la conversione della navigazione del sito in un controllo del modulo nativo non è esente da controversie. Alcuni sostengono che sia una cattiva idea, poiché gli elementi di forma non erano semplicemente pensati per la navigazione.
Accentsconagua
selezionare: Una panoramica rapidaIl selezionare elemento è un elemento di interfaccia utente eccezionale perché può nascondere molte opzioni sotto un unico controllo, risparmiando così molti spazi pubblicitari (una proposta interessante sui dispositivi mobili). Consente inoltre ai progettisti di mantenere la navigazione del sito nella parte superiore della pagina, in cui gli utenti sono abituati a trovarlo.
Inoltre, c'è un vantaggio di interazione selezionare i menu forniscono che gli altri elementi HTML semplicemente non possono: controlli nativi. Quando attivo, selezionare i menu consentono agli utenti di accedere a controlli nativi che offrono l'interazione più favorevole, indipendentemente dal dispositivo dell'utente o dal metodo di input.
Decidere se convertire o meno la tua navigazione in a selezionare a dimensioni mobili è in definitiva a voi come designer. Ogni caso è diverso Se decidi di seguire questa rotta, questo tutorial fornirà ulteriori informazioni su come raggruppare in modo ottimale i tuoi collegamenti navigabili usando il optgroup Tag HTML.
Useremo Webdesigntuts + come un semplice esempio di come utilizzare teoricamente il optgroup etichetta.
Nota: Questo esempio non è in alcun modo un suggerimento su come risolvere correttamente un problema di progettazione della navigazione per Webdesigntuts + o qualsiasi sito. È solo una rapida illustrazione di come si potrebbe usare il optgroup elemento.
Diciamo che volevamo condensare i tre elementi di navigazione separati nella homepage di Webdesigntuts + in a selezionare elemento.
optgroup La conversione di collegamenti navigabili in un elemento selezionato mantenendo il raggruppamento categoriale può rivelarsi disordinato se non eseguita correttamente. Alcuni designer / sviluppatori potrebbero creare un gigante selezionare menu utilizzando gli spazi manuali () e i trattini come separatori:
optgroup Tuttavia, utilizzando il optgroup elemento ti fornirà HTML più pulito e supporto integrato per la categorizzazione in a selezionare elenco. Noi usiamo il etichetta attributo per determinare cosa verrà visualizzato:
Puoi vedere che la marcatura HTML ti consente di rappresentare una relazione genitore / figlio senza dover inserire spaziature speciali e elenchi di trattini.
Come accennato, un vantaggio dell'utilizzo del selezionare elemento è l'accesso ai controlli nativi su dispositivi mobili o touch screen. Ecco alcuni esempi di come sarebbero questi menu:
Questo è tutto ciò che c'è da fare! Basta ricordare il optgroup elemento fornisce una soluzione più semantica e gestibile per categorizzare gruppi di collegamenti in a selezionare elenco. Se usi o meno un selezionare il menu per la navigazione del sito Web che condensa sui dispositivi mobili è una decisione che devi prendere come designer; tuttavia, ora disponi di un nugget di conoscenza aggiuntivo nella tua cintura degli strumenti per padroneggiare il web design reattivo!
