Bonjour, j'aimerais bien faire quelque chose de similaire à ce qu'ils ont fait sur ce site https://www.bhv.fr/ en particulier l'affichage sur petits écrans.
En gros en cliquant sur une catégorie, on passe à la sous catégorie, puis à la sous-sous-catégorie. La liste des sous catégories viens remplacer les catégories du dessus.
Alors de mon côté j'ai fait ça avec Vuejs + Vuetify (vuetify qui me donne le app bar + bouton à gauche pour ouvrir le menu latéral)

<v-navigation-drawer
      v-model="drawer"
      app
      width="400px"
      class="nav-drawer"
      style="text-align: left"
    >
      <!--<p class="py-0 mb-1 mt-3 headline" style="letter-spacing: 6px !important;"
            >CATEGORIES
    </p>-->
      <v-btn text  class="mt-3 close-drawer-btn" :class="{'mb-4': showLevel == 1}">
        <v-icon large @click.stop="drawer = !drawer">mdi-close</v-icon>
      </v-btn>
      <br>
      <div class="d-flex justify-center align-center mb-4 mx-auto" style="width:90px" v-if="showLevel > 1" @click="goToPreviousLevel">
        <div class="fleche-gauche"></div>
        <div style="font-size:16px; font-weight:900; font-family: 'Open Sans', sans-serif; color:black " >
          RETOUR
        </div>
      </div>
      <div class="categories-lateral-level1" v-show="showLevel == 1">
        <div
          v-for="(category, i) in level1Categories"
          :key="i"
          class=" mx-5 category d-flex align-center justify-space-between"
          @click="goToLevel2(category)"
        >
          <div class="d-flex align-center">
            <div class="mr-5">
              <v-img src="../assets/mode.webp"></v-img>
            </div>
            <div>
              {{ category.name }}
            </div>
          </div>
          <div class="fleche-droite"></div>
        </div>
      </div>
      <!--                -->
      <div class="categories-lateral-level2" v-show="showLevel == 2">
        <div
          v-for="(category, i) in level2Categories"
          :key="i"
          class=" mx-5 category category-level-2 d-flex align-center "
          @click="goToLevel3(category)"
          style="height:60px"
        >
          <div class="d-flex align-center mr-auto">

            <div class="">
              {{ category.name }}
            </div>
          </div>
          <div class="fleche-droite"></div>
        </div>
      </div>
      <!--                -->
      <div class="categories-lateral-level3" v-show="showLevel == 3">
        <div
          v-for="(category, i) in level3Categories"
          :key="i"
          class=" mx-5 category d-flex align-center justify-space-between"
          style="height:60px"
        >
          <div class="d-flex align-center">
            <div class="mr-5">
            </div>
            <div>
              {{ category.name }}
            </div>
          </div>
        </div>
      </div>
    </v-navigation-drawer>
    <v-app-bar app clipped-left flat color="white" >
      <v-app-bar-nav-icon color="black" @click.stop="drawer = !drawer" />
    </v-app-bar>

Ce qui donne ça comme résultat et en cliquant sur une catégorie on arrive sur les catégories de deuxième niveau :
Voilà en gros ce que je fait c'est du code html pour une liste de catégories, du code html pour une liste de sous catégorie et du code pour une liste de sous sous catégorie. J'utilise une variable showLevel qui s'initialise à 1 et s'incrémente lorsque l'utilisateur va sur une catégorie, se décrémente quand il appuie sur retour et en fonction de ça je sais quel niveau de catégorie afficher.
Alors ça marche bien mais j'aimerais pouvoir faire en sorte un effet de glissade : en passant d'un level 1 à un level 2 qu'on puisse voir les levels deux venir de droite à gauche et lorsqu'on fait retour pour repasser au level 1, que ça vienne de gauche à droite comme si on feuilletait un livre et les levels sont les pages.
C'est ce qu'ils font sur le site bhv mais j'ai aucune idée de comment faire ça. J'en profite pour demander si c'est la bonne manière de faire ce que j'ai fait.

Salut. C'est du code et je suis pas codeur. J'ai une simple question. Pourquoi est-ce tu trouverais pas un thème WP qui répondrait à ce que tu recherches ? Parce que j'ai l'impression que tu perds ton temps. Il existe de nombreux thèmes qui font exactement ce que tu souhaites avoir, j'en suis certain. Il faudrait que tu ailles voir du côté de themeforest.

Bonne journée.

Hello.
pour les animations tu as sûrement une bibliothèque sinon essaye de voir si tu peux pas faire une animation en css
https://developer.mozilla.org/fr/docs/Web/CSS/animation
https://www.creativebloq.com/how-to/power-up-your-menus-with-css-animation

J'ai trouvé comment faire https://youtu.be/P01FdxjTQn4

Le 05 janvier 2021 à 13:12:33 FHachemi a écrit :
Salut. C'est du code et je suis pas codeur. J'ai une simple question. Pourquoi est-ce tu trouverais pas un thème WP qui répondrait à ce que tu recherches ? Parce que j'ai l'impression que tu perds ton temps. Il existe de nombreux thèmes qui font exactement ce que tu souhaites avoir, j'en suis certain. Il faudrait que tu ailles voir du côté de themeforest.

Bonne journée.

j'avoue que j'y connais strictement rien à wordpress, la majeure partie du site est déjà fait en VueJS, c'est possible de greffer une side-bar comme ça faite avec wordpress ? Sachant que je récupère la liste des catégories via une API

A mon avis c'est un plugin Wordpress ( j'ai pas eu le temps de regarder le code source désolé ) je vois plusieurs sites sous Wordpress implémenter ce menu trait pour trait sur le web.
J'allais écrire un gros pavé pour t'aiguiller un peu sur la problématique mais c'est tout bon si t'as pu trouver la solution

N'écoute pas ceux qui te parle d'aller prendre un template Wordpress...

Tu n'es pas sur Wordpress alors leurs conseils n'en sont pas. Ils vont te faire perdre du temps et de l'argent.

Je n'ai jamais dit ça VDD