One page · Interface front-end

Navigation Rotative : une One Page avec menu animé en HTML, CSS et JavaScript

Navigation Rotative est un exercice d'intégration front-end, dans l'esprit des challenges Frontend Mentor. L'idée tient en une One Page sobre dont le menu ne s'ouvre pas de façon classique : au clic, toute la page pivote pour révéler la navigation cachée sur le côté. Un format court, pensé pour travailler une interaction précise plutôt qu'un site complet.

Côté technique, j'ai intégré la maquette en HTML et CSS, puis ajouté le mouvement en JavaScript. La rotation repose sur des transformations CSS (transform et transition) déclenchées par une simple bascule de classe au clic. La mise en page utilise Flexbox pour rester lisible, et l'ensemble s'adapte aux écrans desktop et tablette tout en gardant l'effet de pivot fluide.

Cet exercice me permet de montrer ma maîtrise de l'intégration et des micro-interactions : reproduire fidèlement un design, animer une interface sans dépendance externe et garder un code clair. Il illustre comment une animation bien dosée rend une navigation plus vivante, et confirme mon aisance avec le trio HTML, CSS et JavaScript sur des composants un peu hors des sentiers battus.

Animation de navigation en CSS et JS

Le pivot de la page repose sur des transformations et transitions CSS, déclenchées au clic par une bascule de classe en JavaScript, sans librairie d'animation externe.

Intégration fidèle de la maquette

Le design a été reproduit en HTML et CSS, avec une mise en page Flexbox et un soin particulier porté aux espacements, aux couleurs et au rendu de l'interface.

Mise en page responsive

La One Page reste lisible et l'effet de rotation fluide aussi bien sur desktop que sur tablette, grâce à une structure pensée pour s'adapter aux différentes largeurs d'écran.