BANK TAFKIR

 

Guide final : interface SaaS PEXMIR avec menu accordéon

1. Structure à créer

Dans la page, créez une boîte principale :

#applicationPexmir

├── #barreLaterale

│   ├── #titre1

│   ├── #boite1

│   ├── #titre2

│   ├── #boite2

│   ├── #titre3

│   ├── #boite3

│   ├── #titre4

│   ├── #boite4

│   ├── #titre5

│   ├── #boite5

│   ├── #titre6

│   ├── #boite6

│   ├── #titre7

│   ├── #boite7

│   ├── #titre8

│   └── #boite8

└── #zoneContenu

Chaque titre doit être un bouton Wix unique. La flèche est ajoutée par le code.

2. Catégories recommandées

🧩 Templates par secteur

🎯 Templates par objectif

📚 Ressources gratuites

⚙️ Applications de production

🤝 Prestations de services

📖 Guides et livres

🎓 Cours et formations

🏷️ Promotions

🎬 Médias

Pour neuf catégories, utilisez :

titre1 à titre9

boite1 à boite9

Les identifiants doivent être écrits sans espace ni accent.

3. Code complet recommandé

Ce code prévoit :

• premier menu ouvert par défaut ;

• tous les autres fermés ;

• un seul menu ouvert à la fois ;

• flèche ▼ ou ▲ intégrée au bouton ;

• affichage responsive ;

• largeur adaptée au mobile ;

• ajout facile de nouvelles catégories.

import wixWindowFrontend from 'wix-window-frontend';

 

const menus = [

  {

    bouton: '#titre1',

    boite: '#boite1',

    texte: '🧩 Templates par secteur'

  },

  {

    bouton: '#titre2',

    boite: '#boite2',

    texte: '🎯 Templates par objectif'

  },

  {

    bouton: '#titre3',

    boite: '#boite3',

    texte: '📚 Ressources gratuites'

  },

  {

    bouton: '#titre4',

    boite: '#boite4',

    texte: '⚙️ Applications de production'

  },

  {

    bouton: '#titre5',

    boite: '#boite5',

    texte: '🤝 Prestations de services'

  },

  {

    bouton: '#titre6',

    boite: '#boite6',

    texte: '📖 Guides et livres'

  },

  {

    bouton: '#titre7',

    boite: '#boite7',

    texte: '🎓 Cours et formations'

  },

  {

    bouton: '#titre8',

    boite: '#boite8',

    texte: '🏷️ Promotions'

  },

  {

    bouton: '#titre9',

    boite: '#boite9',

    texte: '🎬 Médias'

  }

];

 

$w.onReady(function () {

  initialiserInterface();

});

 

function initialiserInterface() {

  const appareil = wixWindowFrontend.formFactor;

 

  menus.forEach(function (menu) {

    $w(menu.boite).collapse();

 

    $w(menu.bouton).label =

      menu.texte + ' ▼';

 

    $w(menu.bouton).onClick(function () {

      basculerMenu(menu);

    });

  });

 

  if (appareil === 'Mobile') {

    // Mobile : premier menu fermé pour économiser l'espace

    fermerTousLesMenus();

  } else {

    // Ordinateur : premier menu ouvert

    ouvrirMenu(menus[0]);

  }

}

 

function basculerMenu(menuSelectionne) {

  const estFerme =

    $w(menuSelectionne.boite).collapsed;

 

  fermerTousLesMenus();

 

  if (estFerme) {

    ouvrirMenu(menuSelectionne);

  }

}

 

function ouvrirMenu(menu) {

  $w(menu.boite).expand();

 

  $w(menu.bouton).label =

    menu.texte + ' ▲';

}

 

function fermerTousLesMenus() {

  menus.forEach(function (menu) {

    $w(menu.boite).collapse();

 

    $w(menu.bouton).label =

      menu.texte + ' ▼';

  });

}

4. Organisation desktop

Dans l’Éditeur :

Barre latérale : 30 %

Zone de contenu : 70 %

Recommandations :

• largeur de barreLaterale : environ 280 à 320 px ;

• boutons de menu : largeur 100 % ;

• texte des boutons : aligné à gauche ;

• hauteur minimale : 44 à 50 px ;

• boîtes placées sous leur bouton ;

• zone de contenu à droite ;

• arrière-plan légèrement différent pour la barre latérale.

Le bouton complet est cliquable : texte, icône et flèche.

5. Organisation mobile

Sur mobile, ne gardez pas une colonne fixe de 30 %.

Configurez :

Barre latérale : 100 %

Zone de contenu : 100 %

Boutons : 100 %

Conseils :

• boutons suffisamment grands pour le doigt ;

• texte court ;

• icône placée au début du bouton ;

• boîtes affichées sous leur titre ;

• premier menu fermé sur mobile ;

• un seul menu ouvert à la fois.

Si vous préférez que le premier menu soit ouvert aussi sur mobile, remplacez :

if (appareil === 'Mobile') {

  fermerTousLesMenus();

} else {

  ouvrirMenu(menus[0]);

}

par :

ouvrirMenu(menus[0]);

6. Contenu des boîtes

boite1

Santé et bien-être

E-commerce

Immobilier

Créatif

Restaurants

boite2

Obtenir plus de clients

Vendre en ligne

Présenter ses services

Automatiser son activité

Développer sa visibilité

boite3

Checklist gratuites

Templates gratuits

Guides pratiques

Ressources SEO

Outils gratuits

boite4

Outils marketing

Outils de gestion

Outils de création

Outils IA

Outils de productivité

boite5

Création de site

Personnalisation Wix

Conseil stratégique

SEO

Accompagnement personnalisé

boite6

Guides pratiques

Livres numériques

Tutoriels

Documentation

Études de cas

boite7

Cours Wix

Formations marketing

Cours SEO

Formations IA

Ateliers pratiques

boite8

Offres du mois

Templates en promotion

Packs économiques

Réductions

Offres limitées

boite9

Vidéos

Webinaires

Démonstrations

Podcasts

Présentations

7. Ajouter une nouvelle catégorie

Pour ajouter une dixième catégorie :

Dans l’Éditeur

Créez :

titre10

boite10

Ajoutez le contenu dans boite10.

Dans le code

Ajoutez simplement cet objet dans menus :

{

  bouton: '#titre10',

  boite: '#boite10',

  texte: '🔒 Sécurité informatique'

}

La flèche, l’ouverture, la fermeture et le comportement mobile seront automatiquement pris en charge.

Attention avec votre code existant

Si votre page possède déjà :

$w.onReady(function () {

ne créez pas un deuxième bloc. Placez l’appel :

initialiserInterface();

dans votre bloc existant, et conservez les fonctions en dehors de celui-c