06/2023
Une TabBar est un mot d’origine anglaise, qui désigne une barre de navigation placée au bas de l’écran conçue pour la navigation sur mobile. Elle est démocratisée en 2008 par Apple, qui la met au centre de navigation sur iOS, nouvellement créé.
Ici, j’ai voulu créer un équivalent pour la navigation web, solution qui diffère des burger menus, largement démocratisés aujourd’hui dans les sites. Cette solution, permet la simplicité d’accès et de navigation sur le site à la main sur les grands écrans de nos téléphones.
Après quelques recherches, aucune TabBar ne répond à mes besoins alors j’ai décidé d’en créer une nouvelle, un peu plus sophistiquée. En effet, cette Tabbar contient un menu caché dans le menu pour afficher 4 entrées supplémentaires. Par exemple, dans mon cas je voulais un sous-menu pour afficher les différents formulaires dans le projet Intranet pour un cuisiniste. lors de la mise en compatibilité du site en regard du responsive design.
Alors dans un premier temps, j’ai créé la structure, un menu composé d’éléments classiques “collé” au bas de l’écran au moyen d’un “position:fixed” et d’un “bottom:0;” en CSS.
Enfin pour le menu qui apparaît en plus, j’ai injecté du JS pour ajouter une class au clic qui permet de faire bouger le menu de haut en bas.
