Toujours dans cette optique d’avoir un site optimisé pour tous, je me suis retrouvé face à un souci au niveau de mon thème en responsive, notamment sur les petits écrans avec mon menu.
En effet, sous mobile, avec n’importe quel navigateur, mon menu se refermait tout seul lors du scrolling pour faire défiler un peu le menu.
Cet effet de fermeture correspond en fait au moment où le navigateur enlève une de ses barres de navigation (celle de l’URL surtout).
Ce souci a lieu avec les navigateurs Firefox, Samsung, Opéra et Chrome pour mobile… Autrement dit, tous.
L’astuce que j’ai trouvé c’est donc de faire un menu déroulant lorsque l’écran est un peu petit (si vous voulez tester, il suffit de vous mettre en paysage sur mobile sur la page d’accueil).
Mais le plus fun, c’est que ça se fait en CSS.
Le code que j’ai appliqué est celui-là :
overflow: scroll;
overflow-x: hidden !important;
max-height: 100vh;
Overflow c’est pour afficher l’ascenseur de défilement, ça autorise un débordement avec défilement.
Je dis à mon block de ne pas afficher de barre de défilement sur l’axe x (« Overflow-x »). Cette technique évite à mon menu d’avoir un glissé vers la droit qui apparaît lorsque l’ascenseur vertical se montre, ça ajoute une marge en quelque sorte et décale le block du menu.
Enfin, je dis à mon menu que sa hauteur maximale théorique ne pourra pas dépasser 100vh. Le vh c’est une unité qui se définit comme un pourcentage de la surface d’affichage visible en hauteur. 100vh c’est donc 100% de l’écran visible.
Dans ce cas, mon menu occupera 100% de la page mais aura un ascenseur de défilement.
Quelques unités qui peuvent être utiles sans devoir tout calculer à chaque fois :