🧭 MenusGratuit · 0 NahnahPar NAHNAH

Menu tiroir par catégories

Bouton « Menu » qui ouvre un tiroir de catégories en accordéon : chaque lien principal déroule ses sous-liens. Fonctionne sans JavaScript, idéal sur mobile.

Voir le code Modifier avec l’IA · 1 Nahnah

Aperçu en direct

Données de démonstration (produits, menus, textes d’exemple) : dans ta boutique, ce sont les tiennes.

Photos : Unsplash / Pexels (exemples de l’aperçu, jamais inclus dans le code).

Code à copier

Fichier complet sections/nahnah-menu-tiroir-categories.liquid (Liquid, CSS et JS inclus).

{%- comment -%} NAHNAH AI · Menu tiroir par catégories (bibliothèque Sections & effets) {%- endcomment -%}
<div class="nn-menu-tiroir-categories" style="--nn-fond: {{ section.settings.couleur_fond }}; --nn-texte: {{ section.settings.couleur_texte }}; --nn-accent: {{ section.settings.couleur_accent }};">
  <details class="nn-menu-tiroir-categories__tiroir">
    <summary class="nn-menu-tiroir-categories__bouton"><span class="nn-menu-tiroir-categories__barres" aria-hidden="true"><i></i><i></i><i></i></span>{{ section.settings.libelle | escape }}</summary>
    <nav class="nn-menu-tiroir-categories__panneau" aria-label="{{ section.settings.libelle | escape }}">
      {%- for lien in linklists[section.settings.menu].links -%}
        {%- if lien.links.size > 0 -%}
          <details class="nn-menu-tiroir-categories__groupe"><summary>{{ lien.title }}</summary><ul>{%- for sous in lien.links -%}<li><a href="{{ sous.url }}">{{ sous.title }}</a></li>{%- endfor -%}</ul></details>
        {%- else -%}
          <a class="nn-menu-tiroir-categories__simple" href="{{ lien.url }}">{{ lien.title }}</a>
        {%- endif -%}
      {%- endfor -%}
    </nav>
  </details>
</div>

{% schema %}
{
  "name": "Menu tiroir",
  "tag": "section",
  "class": "nn-section-menu-tiroir-categories",
  "settings": [
    { "type": "text", "id": "libelle", "label": "Texte du bouton", "default": "Menu" },
    { "type": "link_list", "id": "menu", "label": "Menu", "default": "main-menu" },
    { "type": "header", "content": "Couleurs" },
    { "type": "color", "id": "couleur_fond", "label": "Fond", "default": "#FFFFFF" },
    { "type": "color", "id": "couleur_texte", "label": "Texte", "default": "#1B1B1B" },
    { "type": "color", "id": "couleur_accent", "label": "Accent", "default": "#C2185B" }
  ],
  "presets": [{ "name": "Menu tiroir" }]
}
{% endschema %}

{% stylesheet %}
/* Menu tiroir : tout repose sur details/summary, aucun script */
.nn-menu-tiroir-categories { padding: 12px 16px; background: var(--nn-fond); color: var(--nn-texte); box-sizing: border-box; max-width: 100%; }
.nn-menu-tiroir-categories summary { list-style: none; cursor: pointer; }
.nn-menu-tiroir-categories summary::-webkit-details-marker { display: none; }
.nn-menu-tiroir-categories__bouton { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border: 2px solid var(--nn-texte); border-radius: 999px; font-weight: 700; }
.nn-menu-tiroir-categories__barres { display: grid; gap: 4px; }
.nn-menu-tiroir-categories__barres i { display: block; width: 18px; height: 2px; background: currentColor; transition: transform 0.3s ease, opacity 0.3s ease; }
.nn-menu-tiroir-categories__tiroir[open] .nn-menu-tiroir-categories__barres i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nn-menu-tiroir-categories__tiroir[open] .nn-menu-tiroir-categories__barres i:nth-child(2) { opacity: 0; }
.nn-menu-tiroir-categories__tiroir[open] .nn-menu-tiroir-categories__barres i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nn-menu-tiroir-categories__panneau { margin-top: 12px; border-top: 3px solid var(--nn-accent); animation: nn-menu-tiroir-categories-ouvre 0.3s ease; }
.nn-menu-tiroir-categories__panneau a, .nn-menu-tiroir-categories__groupe > summary { display: block; padding: 14px 4px; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(27, 27, 27, 0.12); font-size: 16px; }
.nn-menu-tiroir-categories__groupe > summary::after { content: "+"; float: right; color: var(--nn-accent); font-weight: 700; }
.nn-menu-tiroir-categories__groupe[open] > summary::after { content: "−"; }
.nn-menu-tiroir-categories__groupe ul { margin: 0; padding: 0 0 0 16px; list-style: none; }
@keyframes nn-menu-tiroir-categories-ouvre { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nn-menu-tiroir-categories__panneau { animation: none; } .nn-menu-tiroir-categories__barres i { transition: none; } }
{% endstylesheet %}

Télécharger le fichier .liquid

Licence NAHNAH AI : utilisation libre dans tes boutiques (y compris commerciales), modification permise, revente de l’élément seul interdite.

Prompt à copier

À coller dans Claude ou ChatGPT avec le fichier téléchargé (ou le code copié) : l’assistant t’aide à l’installer et à l’adapter à ta marque.

Tu es un expert des thèmes Shopify Online Store 2.0. Aide-moi à installer puis à adapter à ma marque cet élément gratuit de la bibliothèque NAHNAH AI.

Élément : « Menu tiroir par catégories » (Menus)
Description : Bouton « Menu » qui ouvre un tiroir de catégories en accordéon : chaque lien principal déroule ses sous-liens. Fonctionne sans JavaScript, idéal sur mobile.
Page de l’élément (aperçu en direct) : https://ai.nahnah.shop/bibliotheque-shopify/menu-tiroir-categories
Fichier : nahnah-menu-tiroir-categories.liquid (bouton « Télécharger » de la page) ou le code copié avec le bouton « Copier » : je te le joins ou je le colle après ce message.
Emplacement dans le thème : sections/nahnah-menu-tiroir-categories.liquid (Liquid, puis {% stylesheet %} et {% javascript %}, dans ce seul fichier).

Étapes d’installation :
1. Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
2. Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-menu-tiroir-categories ».
3. Efface le contenu proposé, colle le code de l’onglet Liquid (fichier complet), puis Enregistrer.
4. Ouvre Personnaliser → Ajouter une section → choisis-la, règle les textes et les couleurs, puis Enregistrer.

Ce que j’attends de toi :
- Guide-moi pas à pas dans Shopify : Boutique en ligne → Thèmes → « … » → Modifier le code → dossier sections → Ajouter une section, puis Personnaliser → Ajouter une section.
- Propose-moi d’adapter les couleurs, les textes et les liens à ma marque : demande d’abord mes couleurs (codes hexadécimaux), mon ton et mes liens.
- Garde le bloc {% schema %} et tous ses réglages (identifiants, types, presets) : je dois pouvoir tout régler ensuite dans l’éditeur de thème.
- Rends-moi le fichier complet modifié, prêt à coller, sans faux avis, fausse urgence ni chiffre inventé.

Si tu as le connecteur NAHNAH AI (MCP), récupère directement le code exact avec l’outil obtenir_code_element (id : menu-tiroir-categories).

Installer dans ma boutique

En un clic, la section est ajoutée à un thème de ta boutique Shopify connectée (un thème non publié par défaut).

Chargement de tes boutiques…

Installer dans Shopify

Dans Shopify : Boutique en ligne → Thèmes → bouton « … » du thème → Modifier le code.
Dossier « sections » → « Ajouter une section » (ou « Nouveau fichier ») → nomme-la « nahnah-menu-tiroir-categories ».
Efface le contenu proposé, colle le code de l’onglet Liquid (fichier complet), puis Enregistrer.
Ouvre Personnaliser → Ajouter une section → choisis-la, règle les textes et les couleurs, puis Enregistrer.

Installer via le MCP

Depuis Claude, Claude Code ou ChatGPT connecté à NAHNAH AI, demande : « Donne-moi le code de l’élément menu-tiroir-categories de la bibliothèque NAHNAH AI et les étapes pour l’installer ». L’assistant récupère le code et les étapes (outil obtenir_code_element), gratuitement.

Boutique connectée à NAHNAH AI : l’assistant peut aussi l’installer directement (outil installer_element).

Connecter le MCP