Gérer le menu de longue liste d'onglets dans responsive
Je travaille actuellement sur une interface avec un long menu de liste d'onglets (sept onglets. Ce n'est pas si long en anglais, mais en version allemande ça commence à être compliqué.
Cela fonctionne parfaitement dans un bureau HD, mais en 13 pouces, c'est un gâchis.
Voici un croquis des éléments de l'interface: en-tête, navigation verticale à gauche et menu onglets:
Avez-vous une idée/un conseil sur la manière de rendre ces onglets réactifs et efficaces dans n'importe quelle langue?
MERCI BEAUCOUP
Félicitations - vous avez découvert l'un des principaux défis avec les onglets :-)
Une partie du défi est basée sur la façon dont vous construisez l'onglet (je suppose que c'est HTML), par exemple si vous utilisez CSS pour définir la largeur de l'onglet, vous aurez des problèmes (il est préférable de ne pas définir de largeur et de laisser le conteneur adopter sa largeur en fonction de son contenu textuel).
Si vous utilisez jQuery, vous pouvez voir un exemple d'onglets réactifs et comment répondre à la largeur du navigateur ici: http://www.jqueryscript.net/demo/Responsive-Scalable-Bootstrap-Tabs-Enhancement-Plugin-with -jQuery /
Il existe d'autres types de métaphores de regroupement et d'organisation de l'interface utilisateur, qui pourraient mieux évoluer, vous pouvez donc envisager une conception alternative.
Cependant, si vous vous en tenez aux onglets, il existe des moyens de les améliorer, mais ils peuvent ne pas être l'expérience utilisateur optimale.
Grâce à un collègue de travail, j'ai enfin trouvé une solution:
Le lien source: https://material.angularjs.org/latest/demo/tabs
Lea, au lieu d'un faible contraste pour le premier et le dernier onglet, vous pouvez masquer les flèches.
juste mon 2 cent, https://au.pinterest.com/pin/180284791312274083/ au lieu d'afficher l'onglet complet, je cache la moitié du premier et du dernier 'onglet de navigation' afin que l'utilisateur puisse comprendre/curieux il y a plus de liens. Ce n'est pas un gros problème, mais simplement partager une option. (* désolé pour le lien, j'ai un ancien navigateur qui ne peut pas télécharger d'image)
Quelque chose qui est généralement fait est que si vous souhaitez utiliser des onglets, faites-le évoluer de manière réactive jusqu'à un certain point de rupture, puis faites des onglets un menu en accordéon.
Par exemple, pour mobile et tablette, ce serait un menu accordéon, puis au-dessus de 768 pixels, il éclaterait et deviendrait un menu à onglets élargi.
Je pense que ce serait la meilleure réponse pour vous.
https://css-tricks.com/container-adapting-tabs-with-more-button/