Astuce #7: Menu déroulant responsive sans Javascript

Bonjour à tous et bienvenue dans cette nouvelle vidéo qui s'inscrit dans la série consacrée aux astuces de développement web. Aujourd'hui, nous allons créer un menu responsive qui s'adapte à tous les supports de navigation, que ce soit à écran large comme les PC et les TV, ou à petit écran comme les smartphones et les tablettes. Le résultat ressemblera à ceci. Dans la page HTML, nous avons intégré un menu dans la balise nav avec 5 entrées qui sont censées rediriger l'utilisateur vers les pages Accueil, Qui sommes-nous, Services, Partenaires et Contact. Le style appliqué se trouve dans la feuille qui s'appelle menu.css qui ressemble préalablement à ceci. Sur le navigateur, on aura le résultat suivant. Alors on va commencer par appliquer un style à notre balise nav avec display flex afin d'aligner les balises a de manière contrôlée horizontalement. Ensuite on va appliquer ce style aux liens hypertextes pour désigner les balises a qui sont incluses directement dans la balise nav avec display block parce que par défaut les balises a sont des inline. Dans un premier temps, nous allons appliquer une largeur de 400 pixels qui va s'appliquer à chacun des liens. Ensuite, on va appliquer une couleur d'arrière-plan pour les liens, transparente de préférence, et je vais opter pour un noir transparent. Déjà avec ça, on aura le résultat suivant. Ensuite, je vais centrer le texte au milieu de la balise a. Box-sizing avec la valeur border-box permet de maintenir la largeur 400 pixels même si on applique des paddings internes. Ensuite, on applique une marge interne de 20 pixels. Notez que si j'avais pas déclaré box-sizing avec border-box, dans ce cas la largeur totale de notre lien va mesurer 440 pixels. Mais avec ce style, ça veut dire border-box, dans ce cas la largeur est forcée à 400 pixels même si on applique une marge interne à l'aide du style padding. On applique la couleur blanche au texte. Puis une marge externe de 1 pixel afin d'écarter les liens et placer un petit espace entre eux. Text-decoration: none, c'est pour supprimer le surligné qui marque les liens hypertextes par défaut. Regardons ce que ça va donner. Donc à la fin nous avons un menu qui ressemble à ceci. Maintenant je vais appliquer la pseudo-classe hover sur les liens. Bon, je vais changer légèrement les couleurs d'avant-plan et d'arrière-plan. Pour l'arrière-plan, dans ce cas, je vais opter pour la couleur blanche un peu transparente. Ça permet de démarquer le lien survolé et la couleur du texte sera dans ce cas noire. Il serait bien d'appliquer une petite transition au cas où le menu est survolé. Je ferai pareil pour l'état initial. Exécutons. Alors nous avons ce résultat. Maintenant je vais appliquer les media queries afin de changer le style au cas où le support devient plus étroit. Donc je mettrai le point de basculement par exemple c'est 960 pixels. Bien sûr vous pouvez choisir des valeurs différentes si vous voulez. Ensuite, je vais modifier le style appliqué à la balise nav. À l'état initial, c'était display flex. Maintenant, ça deviendra block afin d'aligner le menu verticalement. Et je mettrai aussi position absolute afin de ne pas pousser les éléments qui viendront après comme les images ou les textes. Comme ça, on aura le menu qui va survoler les éléments de la page. Donc regardons ce qui va se passer. Donc avec une largeur qui est supérieure à 960 pixels, on aura ça. Une fois en passant en dessous de 960 pixels, on aura la position verticale de cette manière. Mais il est préférable que le menu occupe la largeur entière de la page. Dans ce cas, on va modifier la largeur du lien a. Au lieu de 400 pixels par défaut, on mettra auto. Comme ça. Voilà. Mais puisque c'est positionné, dans ce cas ça va pas occuper la largeur entière de la page. Donc on va appliquer le left et le right sur la balise nav. Ça donne ça. Au-dessus de 960 pixels et en dessous de 960 pixels. En général, quand vous passez sur un écran plus étroit, le menu ne s'affiche pas directement. Souvent, on a une sorte de bouton sur lequel on clique et puis le menu apparaît. Et si on reclique dessus, le menu disparaît aussitôt. Alors on va faire pareil. Généralement, ce type de traitement recourt à du JavaScript, mais nous on va tout faire en CSS. Donc nous allons reprendre l'astuce que nous avons vue dans une vidéo précédente et qui concerne l'application des styles sur les checkbox. C'est-à-dire que l'on va se servir aussi du checkbox dans ce cas. Alors dans le code HTML, nous allons intégrer une balise checkbox que l'on va identifier par ch. Donc on aura ça. L'idée maintenant, c'est que quand notre checkbox est décoché, le menu disparaît et quand l'utilisateur la coche, le menu apparaîtra. Alors on va faire ceci, c'est-à-dire si le checkbox est coché, la balise nav qui se situe juste après, on va lui appliquer ce style. Mais avant d'appliquer le style, il faut d'abord appliquer un style par défaut sur la balise nav au cas où on passe sur un écran plus étroit. On mettra par exemple transform translate afin de déplacer le menu vers la gauche ou bien vers la droite comme vous souhaitez, de telle sorte à ce qu'il ne soit pas affiché au sein de l'écran. On mettra par exemple la valeur -1000 pixels à l'horizontale et 0 pixels à la verticale. L'essentiel c'est qu'il faut que cette valeur soit supérieure à 960 pixels, que ce soit positif ou négatif. Regardons ce que ça va donner maintenant. Donc le menu disparaît. En fait, il est placé sur la gauche, on ne le voit pas. L'idée maintenant, c'est que quand je coche la case à cocher, le menu apparaîtra. Alors je vais le faire ici. Et là, je mets la valeur 0 qui est la valeur par défaut. Et voilà, donc le menu apparaît et il disparaît. Selon si l'utilisateur a coché ou décoché le checkbox. On va appliquer une petite animation sur l'apparition et la disparition du menu, toujours avec les transitions. Je fais pareil ici. Exécutons. Voilà, donc ça apparaît d'une manière animée et ça disparaît de la même manière. Cependant, le checkbox n'est pas approprié pour ce genre d'application. Déjà, sa forme est un peu moche. En plus, ce n'est pas intuitif du tout de cliquer sur le checkbox afin de faire apparaître le menu. Donc ce que nous allons faire, c'est encore recourir à la balise label que je vais déclarer par exemple avant la balise checkbox. C'est-à-dire que j'ai associé cette balise label à ce checkbox par le biais de l'ID ch. Maintenant, on va appliquer un style sur la balise label. Là par exemple. On va appliquer la couleur noire provisoirement avec une petite marge de 4px pour l'écarter des bords de l'écran. Et puisque la balise lab est une balise inline, donc il ne sera pas redimensionné et du coup il sera pas visible. Donc on va mettre display block. On aura donc ça. Voilà, quand je clique sur la balise label, on voit bien que le checkbox suit et le menu apparaît ou disparaît en fonction de l'état d'activation du checkbox. Alors on imagine que le checkbox maintenant on peut le masquer. Comme ça. Voilà. Et quand j'élargis l'écran, on constate que le label est toujours visible. Donc il faut le faire disparaître dans ce cas. C'est-à-dire que le label doit s'afficher uniquement quand l'écran est étroit. On va donc mettre ici display none. Et c'est plutôt ici, ça veut dire dans la media query, que l'on va mettre lab display block comme ceci. Alors là c'est sur un écran large et sur un écran étroit le label apparaît, quand je clique le menu apparaît et quand je reclique le menu disparaît. La dernière chose à faire maintenant c'est appliquer un style plus approprié au label. Donc on va essayer de réussir la forme conventionnelle du bouton, c'est-à-dire les 3 barres qui sont alignées verticalement. On va juste appliquer linear-gradient comme ceci. Background. Donc c'est un dégradé mais on mettra plusieurs couleurs à la fois. Parce que généralement avec le dégradé on choisit 2 couleurs, une couleur de début, une couleur de fin et le navigateur se charge de trouver les transitions entre les 2 couleurs. Nous par contre nous allons définir des couleurs qui sont nettes, c'est-à-dire sans nuance en appliquant des pourcentages de cette manière. Par exemple, on va appliquer la couleur blanche sur les barres comme ça, à la position 0%, c'est-à-dire par défaut à la position haute. La même couleur à la position 20%. Donc maintenant nous avons une barre qui mesure 20% de la hauteur totale du label. Ensuite, on va appliquer le transparent qui commence à partir de la position 21% et qui finit à la position 40%. Et on reprend encore le blanc à la position 41% et qui finit à 60%. Encore du transparent de 61 jusqu'à 80%. Et enfin le blanc pour constituer la dernière barre de 81 à 100%. Regardons ce que ça va donner. Donc notre barre ressemble à ceci. Le menu apparaît. Et là, il disparaît. Et sur un écran large, nous avons le menu qui s'affiche de manière horizontale par défaut. Alors, on se contente de ça pour cette astuce. Merci pour votre attention et à la vidéo prochaine.