Comment ajouter une version pour mobile à un site web existant Adaptation d'un site au mobile : animation du menu
Dans cette dernière version pour les plus petits écrans, un clic sur le bouton Menu active la fonction JavaScript qui attribue à la balise ul la classe afficher, puis un autre clic change cette classe en masquer. C'est ainsi que la hauteur du menu passe de zéro à une valeur fixée, puis de nouveau à zéro.
La transition CSS d'une seconde appliquée sur la propriété height entraîne alors un déroulement progressif de ce bloc, puis une disparition animée dans le sens inverse.
Nous avons à présent un site adapté à la fois aux écrans d'ordinateurs, aux tablettes et aux smartphones. Grâce aux media queries qui sélectionnent automatiquement les styles en fonction de la taille de la fenêtre, les mêmes pages serviront aux différentes versions et il n'y aura qu'un seul fichier HTML à mettre à jour si le contenu doit être modifié.
Choix Méthodes pour afficher ou masquer le menu
Pour les plus petits écrans, c'est la propriété height qui est appliquée pour masquer ou afficher le menu, passant de 0 à une valeur fixe en pixels. D'autres méthodes auraient pu être utilisées, mais sans le même effet d'animation.
Il est possible de faire disparaître ou apparaître la balise ul d'identifiant menu en utilisant simplement la propriété display avec les valeurs none et block. Cependant, il n'y a plus d'animation dans ce cas, car la propriété CSS transition ne s'applique pas à display.
Une autre solution consiste à attribuer à la hauteur height de la balise ul la valeur auto, lorsque le menu doit être affiché. Celui-ci s'agrandit alors automatiquement en fonction du nombre de lignes, la hauteur de chaque ligne étant fixée. Cette solution a l'avantage d'être plus souple et de ne pas dépendre du nombre de lignes dans le menu. Hélas, la transition ne s'applique pas pour la valeur auto de la propriété height, elle ne vaut que pour le passage d'une valeur numérique à une autre, donc cette technique nous prive là encore de l'animation du menu déroulant.
Une alternative possible consiste à appliquer le changement de hauteur aux lignes li, au lieu de modifier leur conteneur ul, ce dernier ayant en permanence une hauteur automatique. En reportant sur les balises li du menu la transition sur la propriété height (au lieu de l'appliquer à la balise ul), une animation apparaît effectivement, mais ce n'est pas le déroulement habituel d'une liste déroulante : toutes les lignes apparaissent et s'agrandissent en même temps, ce qui n'est pas l'effet escompté.
Vous connaissez maintenant les méthodes pour adapter un site à tous types d'écrans, ce sera (presque) un jeu d'enfant de l'appliquer à votre site. Le code CSS devient évidemment un peu plus complexe et la mise à jour des pages doit tenir compte de la version mobile, notamment en ce qui concerne l'insertion d'images de grande taille et autres éléments qui augmentent le poids des pages.
Il existe d'autres cas de figure où des styles particuliers sont nécessaires, notamment pour les documents destinés à être imprimés, ou encore lorsqu'il s'agit de gérer la lecture orale des pages. Les propriétés spécifiques à ces pages sont décrites dans le chapitre qui suit.
