Détails

Créé le lundi 16 janvier 2012 14:32

CSS3 média Queries, une aubaine pour vos [Web]App.

Dans vos projets [Web]App ne négligez pas vos menus !!!

En effet, nous constatons très souvent que beaucoup de temps est consacré à adapter vos pages aux différentes tailles d’écrans, alors que vous négligez vos menus.

La percée des terminaux mobiles engendre pourtant en premier lieux une adaptation d'un menu déroulant car c’est votre point central de navigation.

La solution est d'avoir un composant générique qui grâce aux CSS3 Media Queries s'adapte aux différentes tailles d'écrans. Vous pouvez utiliser des CSS différents pour des plages de tailles d’écrans et des changements d’orientation portait/paysage. 

Ainsi vous n'avez plus à vous soucier de développer des versions de menus pour smartphones et pour tablettes. En gardant le même design, les menus s'adaptent convenablement à ces différents écrans.

N’hésitez pas à utiliser la composante verticale plutôt qu’horizontale à partir d’une certaine taille d’écran, type smartphone par exemple. Pour cela grâce au JavaScript, le sous menu vient s’insérer à l’intérieur du menu, le menu se déplie et se replie. 

Autre avantage, comme il se redimensionne en fonction de la taille de l'écran, la modification des textes du menu n'entraîne pas la dégradation du design.

• < Précédent