Share
Un modèle de conception de navigation populaire pour le Web réactif est la fusion de la navigation de votre site Web en un sélectionner menu. Cependant, représenter des distinctions hiérarchiques ou catégoriques dans sélectionner éléments conduit souvent à HTML bouché avec des tirets manuels et beaucoup de les espaces. Dans ce tutoriel, nous vous présenterons une balise HTML obscure appelée Somehwat optgroup qui vous fournira un moyen simple (et sémantique) de regrouper le contenu associé dans sélectionner des menus.
Trouver un moyen d’intégrer de manière optimale la navigation sur le site Web dans l’immobilier de petit écran des appareils mobiles est un défi permanent de la conception Web réactive. Il existe divers modèles de navigation réactifs pour la conception Web qui fonctionnent assez bien. Une des méthodes les plus populaires consiste à condenser la navigation sur un site Web dans un formulaire. sélectionner élément.
Cette technique a été abordée et expliquée dans divers didacticiels sur le Web, y compris dans un article sur Webdesigntuts + de Ian Yates: Construire une mise en page réactive avec Skeleton. Toutefois, la conversion de la navigation du site en contrôle de formulaire natif n’est pas sans controverse. Certains soutiennent que c'est une mauvaise idée, car les éléments de formulaire n'étaient tout simplement pas destinés à la navigation..
Accentsconagua
sélectionner: Un aperçu rapidele sélectionner element est un élément d'interface utilisateur génial, car il peut masquer de nombreuses options sous un seul contrôle, ce qui permet d'économiser beaucoup d'espace à l'écran (une proposition attrayante sur les appareils mobiles). Il permet également aux concepteurs de conserver la navigation du site en haut de la page, là où les utilisateurs sont habitués à le trouver..
En outre, il existe un avantage d'interaction sélectionner les menus prévoient que les autres éléments HTML ne peuvent tout simplement pas: les contrôles natifs. Quand actif, sélectionner les menus donnent aux utilisateurs l'accès à des contrôles natifs offrant éventuellement l'interaction la plus favorable, indépendamment du périphérique ou du mode de saisie de l'utilisateur.
Décider de convertir ou non votre navigation en un sélectionner aux tailles mobiles est finalement à vous en tant que concepteur. Chaque cas est différent. Si vous décidez de suivre cette voie, ce didacticiel vous expliquera comment grouper de manière optimale vos liens de navigation à l'aide de la optgroup Balise HTML.
Nous allons utiliser Webdesigntuts + comme exemple simple d'utilisation théorique de la optgroup étiquette.
Remarque: Cet exemple ne constitue en aucun cas une suggestion sur la manière de résoudre correctement un problème de conception de la navigation pour Webdesigntuts + ou pour tout site. C’est simplement une illustration rapide de la façon dont on pourrait utiliser le optgroup élément.
Supposons que nous voulions condenser les trois éléments de navigation distincts de la page Web Webdesigntuts + dans un sélectionner élément.
optgroup La conversion de liens de navigation en un élément sélectionné tout en conservant un regroupement catégorique peut s'avérer compliquée si elle n'est pas effectuée correctement. Certains concepteurs / développeurs pourraient créer un géant sélectionner menu utilisant des espaces manuels () et des traits d'union comme séparateurs:
optgroup Cependant, en utilisant le optgroup élément vous fournira un code HTML plus propre et un support intégré pour la catégorisation dans un sélectionner liste. Nous utilisons le étiquette attribut pour déterminer ce qui sera affiché:
Vous pouvez constater que le balisage HTML vous permet de représenter une relation parent / enfant sans avoir à insérer des listes d'espacement et de césure spéciales..
Comme mentionné, un avantage d'utiliser le sélectionner L'élément est l'accès aux contrôles natifs sur les appareils mobiles ou à écran tactile. Voici quelques exemples de ce à quoi ces menus pourraient ressembler:
C'est tout ce qu'on peut en dire! Rappelez-vous juste le optgroup élément fournit une solution plus sémantique et maintenable pour la catégorisation de groupes de liens dans un sélectionner liste. Que vous utilisiez ou non un sélectionner le menu permettant de condenser la navigation sur les sites Web sur les appareils mobiles est une décision que vous devez prendre en tant que concepteur; Cependant, vous disposez maintenant d'une pépite de connaissances supplémentaire dans votre ceinture d'outils pour maîtriser la conception Web réactive.!
