ValentinMadiot/carousel-menu_js
Menu interactif filtrable par catégorie, conçu en HTML/CSS/JS pur. Présentation fluide en grille responsive, avec un design soigné et adaptable. Idéal pour les menus digitaux ou galeries de produits.
🍽️ Carousel Menu – Carte Filtrable
📌 Sommaire
🎨 Introduction
🛠️ Technologies
🎯 Fonctionnalités
🚀 Installation
🎨 Introduction
Menu interactif filtrable par catégories avec génération dynamique des éléments depuis un tableau JavaScript. Chaque plat est présenté sous forme de carte élégante, avec image, titre, prix et description.
La grille responsive, combinée à des animations de survol fluides, offre une expérience utilisateur soignée et adaptable à tous les écrans.
Parfait pour les restaurants en ligne, les menus digitaux ou toute galerie de produits organisés par thème ou catégorie.
🛠️ Technologies
- HTML5 sémantique et accessible
- CSS3 moderne avec variables, media queries et transitions
- JavaScript ES6 clair et modulaire
- Manipulation du DOM sans librairie
- Font Awesome pour les icônes
- Responsive mobile-first
🎯 Fonctionnalités
- Filtres dynamiques (tout, entrées, plats et desserts)
- Composants injectés dynamiquement depuis un tableau
- Boutons interactifs avec état actif
- Design responsive pour toutes tailles d’écran
- Animation au survol sur les cartes
- Organisation claire des plats
- Filtres accessibles et intuitifs
- Structure modulaire et facilement réutilisable
🚀 Installation
✅ Prérequis
- Google Chrome — Navigateur moderne
- Visual Studio Code — Éditeur de code
- Live Server — Extension VS Code
📥 Cloner le projet
git clone https://github.com/ValentinMadiot/carousel-menu_js
cd carousel-menu_js▶️ Lancer le projet
Il suffit d’ouvrir le fichier index.html dans un navigateur, ou d’utiliser l’extension Live Server sur VS Code pour un aperçu dynamique.