Déplacement d'éléments suivant la largeur du conteneur

Le rendu

Redimensionnez la fenêtre du navigateur pour voir le changement de rendu..

Le principe

On place un observateur sur le « menu principal » qui va scruter le changement de taille de celui-ci, pour ce faire on utilise l'API ResizeObserver qui remplace avantageusement window.onresize.

Lors d'un changement de taille du menu, redimensionnement de la fenêtre par exemple, on va vérifier que tous les éléments peuvent être contenus dans celui-ci.

Si un élément ne peut pas « tenir entièrement » dans le menu alors on le déplace vers le « menu hamburger », tous les suivants seront également déplacés afin de garder la structure du menu. Ce n'est que de la manipulation du DOM.

Le code

Ressources