Menu secondaire réactif
J'ai une disposition similaire à la capture d'écran ci-dessous. Où la navigation supérieure sera réduite en utilisant hte Twitter Bootstrap Nav Collapsed. J'ai également un menu secondaire sous la barre de navigation sur le côté gauche, ce qui est important pour la navigation.
Quelle est la meilleure façon de remettre la même chose sur une tablette et un écran de taille de téléphone?
Incroyable comme je n'avais jamais pensé à cette "énigme" auparavant, mais c'est intrigant. Voici les solutions possibles que je pourrais trouver:
Deux boutons de menu
Ma première pensée fut de mettre le sous-marin hors toile à gauche. Vous laissant avec un bouton de menu à droite pour un menu déroulant de la navigation principale et un bouton de menu à gauche pour la sous-navigation hors toile. Mais c'est tout le problème, cela vous laisse avec deux styles de menu différents, ce qui est au moins déroutant. Vous pouvez résoudre ce problème avec un en-tête secondaire et un autre menu déroulant.
Navigation de fusion
Ma deuxième pensée a été de fusionner les deux navigations. Vous pouvez le faire lorsqu'il existe une hiérarchie claire avec le lien parent dans la navigation principale et tous les liens enfants dans la navigation secondaire. La structure ressemblera à ceci:
Dashboard
Account
Subscription
Billing information
Account members
Careers page
etc.
Candidates
Agenda
Reports
Activity
Cela ne fonctionnera pas lorsque les liens dans la sous-navigation n'ont rien à voir avec les liens dans la navigation principale. Ce serait cependant mon choix et je conseillerais même de réviser votre structure de navigation.
Laisser la sous-navigation visible
La dernière solution à laquelle je pourrais penser est de laisser la sous-navigation visible sur la page, mais de la changer en une navigation horizontale plus petite. Cela mettra plus de distance entre le contenu et l'en-tête principal avec le menu principal, ce qui pourrait ne pas être préférable pour vous.
Voici quelques lectures supplémentaires:
Modèle de conception adaptative pour la navigation secondaire - existe-t-il un moyen de ne pas submerger l'utilisateur?
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
Une solution serait de réduire la navigation principale, comme vous l'avez actuellement prévu et d'empiler simplement les éléments de navigation secondaires.
La raison de cette approche est donnée par le fait que de nombreuses actions seront impliquées dans la plupart de ces éléments tels que la saisie de texte, les listes déroulantes, les économies, etc., vous voudrez utiliser le peu de biens immobiliers dont vous disposez, mais néanmoins autoriser l'utilisateur de se concentrer sur une chose à la fois.