Menus

Créez enfin vos menus facilement !

Introduction

Lorsqu’on ne se sert pas du plugin ’Menus’, on est obligé de définir tous ses menus dans les squelettes, ce qui fait que les administrateurs du site n’ont pas directement la main dessus, que lorsqu’ils veulent y changer quelque chose, ils sont obligés d’en faire la demande à la personne en charge des squelettes.

De plus, lorsqu’on veut des liens statiques (un lien vers un article précis, ou vers une page précise, ou vers un site externe) il faut les écrire en dur dans le squelette du menu.

Le but du plugin ’Menus’ est donc de permettre de facilement élaborer des menus au moyen d’une interface conviviale, directement dans la partie privée.

Attention ! Ce plugin ne s’occupe pas de la manière dont seront affichés les menus. Il permet de les créer facilement et d’en générer le HTML.

Pour l’affichage, voyez avec votre thème ou des plugins spécifiques tels que Menu animé déroulant, Menu Déroulant 2, Menu Accordéon 2 ou Menu jQuery Superfish.

Installation

Menus (0.9.5)
Menus (1.7.25)

Télécharger le paquet ZIP du plugin et placer son contenu dans votre répertoire “plugins/”. Activez-le ensuite dans la page de gestion des plugins.

Vous devez aussi avoir le plugin SPIP Bonux déjà installé.

Création d’un menu

Le plugin ajoute un lien dans le bandeau de SPIP :

La page liste tous vos menus, et vous propose d’en créer un nouveau :

D’abord vous devez identifier votre menu. Il faut lui donner un titre, ainsi qu’un mot-clé qui vous permettra de l’appeler facilement. En effet, vous ne pouvez pas prévoir à l’avance dans vos squelettes le numéro du menu. Grâce à ce mot-clé identifiant, vous n’avez donc pas à modifier vos squelettes à chaque fois. Vous pouvez également saisir une classe qui sera ajoutée au premier élément ul du menu généré. Ceci peut permettre d’activer la gestion de l’affichage par un plugin tiers.

Vous pouvez alors commencer à construire le menu en ajoutant des entrées :

Les différents types d’entrées

Les Menus sont fournis pour l’instant avec plus de dix types d’entrées qui permettent déjà de construire la plupart des menus facilement.

N’hésitez pas à en proposer d’autres !

Voici la description de quelques uns des types d’entrées disponibles :

-  Lien arbitraire : vous pouvez créer des liens vers ce que vous voulez en donnant une adresse et un titre.

-  Objet de SPIP : crée un lien vers n’importe quel objet éditorial de SPIP. Ça peut être un article, une rubrique ou n’importe quoi venant d’un plugin.

-  Liste dynamique de rubriques et d’articles : vous pouvez afficher les rubriques de SPIP, y compris de manière arborescente. Pour cela, il suffit de définir la rubrique dans laquelle il faut commencer la liste, le niveau maximum de sous-rubriques, les exclusions éventuelles, le type de tri... Vous pouvez aussi inclure les articles dans l’arborescence, limiter leur nombre, en gérer le tri...

Modification des entrées

Lorsque vous avez déjà ajouté des choses, vous obtenez alors la liste des entrées sous cette forme :

Vous pouvez alors déplacer les entrées pour modifier leur ordre, les supprimer, changer leurs paramètres et créer des sous-menus en-dessous des entrées qui le permettent.

Utiliser les menus dans votre site

Pour afficher un menu dans votre site, il vous suffit d’inclure un petit squelette où vous le désirez :

#INCLURE{fond=inclure/menu, env, identifiant=<votre_menu>}

Vous pouvez aussi tester votre menu facilement en cliquant sur le bouton «Voir en ligne» ou en allant sur la page : spip.php?menu<numero>

Exporter les menus vers un autre site

Imaginons que sur une version de votre site en local vous réorganisez tous les menus. Pour reporter ces changements en prod, il faut exporter les menus dans un fichier et les réimporter en prod.

S’assurer tout d’abord que le plugin Yaml est activé .

Lorsqu’il est activé une icône apparaît : exporter ce menu

Le sauvegarder sur votre ordinateur

Sur le site de destination, il suffit de créer un nouveau menu avec le même identifiant ( penser à le supprimer avant s’il existe). Et à la création, si le plugin YAML est bien activé, la boite de choix de fichier est proposée.

Surcharge des fichiers menus/<type>.html

Si pour des besoins particuliers, on doit surcharger un fichier du répertoire menus/, il ne faut pas oublier de copier le fichier XML de description qui va avec.

En effet, le plugin cherche le fichier XML au même endroit que le fichier HTML.

updated on 2 April 2020

Discussion

330 discussions

  • 4

    Bonjour,

    Est-il possible d’utiliser le plugin Menu avec le plugin Sidr ou avec un autre plugin Spip de menu hamburger?

    Merci d’avance,

    Cordialement,

    Hervé

    • Aucune idée, le plugin ne fait que générer un HTML standardisé pour les listes de liens, donc après chacun fait ce qu’il veut.

    • Oui c’est possible.

      Il faut reprendre la classe css du menu dans l’inclure :

      Exemple (mon code n’est pas récent, ça a peut-être évolué):

      [(#REM) MAIN NAVIGATION / NAVIGATION PRINCIPALE ]
      <div id="nav">
      <div id="mobile-header">
      <a id="responsive-menu-button" href="#sidr-main">Menu</a></div>
      <INCLURE{fond=inclure/barre-nav, env, identifiant=barrenav}>
      </div>
    • Bonjour,

      Mon code est légèrement différent mais fonctionne:

      <div id="mobile-header">
      <a id="responsive-menu-button" href="#sidr-main"></a>
      </div>
      <nav id="menuhaut">
          #INCLURE{fond=inclure/menu, env, identifiant=barre_nav}
      </nav>

      Par contre, il reste un point que je n’arrive pas à régler :
      Mon menu à l’identifiant barre_nav utilise pour la version desktop, le plugin « jQuery Superfish ».
      Conséquence : même avec des media query les classes CSS de jQuery Superfish se tape l’incruste en se mêlant à celle de Sidr.
      Comme dire au plugin « Menus » qu’en-dessous de 900px (par exemple), la classe « .sf_horizontal » de jQuery superfish n’agit plus ?

    • Je n’ai pas de style .sf_horizontal mais tu peux peut-être essayer :

      @media (max-width: 900px) {
      sf_horizontal {display: none;}
      }

    Reply to this message

  • 2

    Bonjour,
    Sur une page quand je passer par squelettes&css, j’ai entre autre :
    plugins/auto/spipr_doc/v0.5.13/content/sommaire.html

    J’édite sommaire.html, je rajoute le inclure donc j’ai :

    <div class="lead">#DESCRIPTIF_SITE_SPIP</div>
        #INCLURE{fond=inclure/menu, env, identifiant=<barenav>}
    <p><:spipr_doc:coincoin:></p>

    (ouais, je sais barenav, c’est pas très original) :-)

    Ça ne donne rien, à part qu’en plus de sommaire.html j’ai

    plugins/auto/spipr_doc/v0.5.13/content/sommaire.html
    joie et bonheur !
    plugins/auto/menus/v1.6.7/inclure/menu.html
    coincoin

    Je ne vois pas ce que je pourrais faire de plus...

    Bonne journée,
    Yves

    • Je comprend pas, tu avais deja plugins/auto/spipr_doc/v0.5.13/content/sommaire.html, donc je vois pas pourquoi tu l’a en plus.

      De plus je ne saisie pas de quoi tu parle lorsque cite “plugins/auto/menus/v1.6.7/inclure/menu.html” comme cela, sans contexte.

      Cela étant:
      -  si tu modifie un fichier de plugins, il faut en faire une copte dans ton dossier squelettes. Donc tu recopier plugins/auto/spipr_doc/v0.5.13/content/sommaire.html dans squelettes/content/sommaire.html. Cela évitera de perdre tes modifs en cas de mise à jour du plugin
      -  identifiant=<barenav> est erronnée. identifiant=barenav est correcte. Dans une documentation informatique, un texte entre crocher désigne en général quelque chose qui doit être remplacé.
      -  je suis étonné que spipr n’intègre pas deja cela en natif (mais ce n’est pas impossible)

    • Bonjour
      merci pour ta réponse, je vais essayer d’être plus clair...
      Pour le moment, je n’ai que la page d’accueil affichée, là je regarde par squelettes&css je vois donc tous les bouts de squelette qui sont dans la page, dont “sommaire.html” si j’ai choisi celui là c’est qu’il est simple, j’aurais pu en prendre un autre.

      Il est dans /htdocs/beta-lisi/plugins/auto/spipr_doc/v0.5.13/content/

      Je sais qu’il fait modifier ça dans le dossier /squelette, là je fais ça juste pour tester.

      barenav, pas <barenav>

      ok, ça me rappelle la fois où je mettais un $ devant toutes les lignes de commandes unix

      => Ça marche !!

      Mille merci et bonne fin de journée,
      Yves

    Reply to this message

  • 2

    Bonjour.

    J"ai créé un menu avec un sous menu.

    Je ne voudrai pas changer le sous menu, mais la nature du sommet du sous menu (de page en article ou rubrique). Suis-je obligé de détruire le sous menu pour recréer le tout en ayant changé le sommet (c’est me semble-t-il ainsi quand on utilise l’outil de création de menus).

    Merci.

    Reply to this message

  • 1
    Pascal Engelmajer

    Bonjour
    J’ai un site en français et en anglais avec deux secteurs (fr, en)
    Comment afficher le menu dans des langues différentes ?
    Rubrique1 => fr
    Rubrique2 => en
    Merci
    Cordialement

    • Ça ne fait pas ce genre de test complexe. Moi je ferais deux menus genre “firstnav_fr” “firstnav_en” et afficher celui de la langue courante. Ou mieux, tester si un menu existe avec le suffixe de la langue courante, et sinon utiliser un menu par défaut (qui peut être celui fr).

    Reply to this message

  • 3

    Bonjour,
    je voudrais obtenir un menu horizontal avec les rubriques de premier niveau du secteur courant.
    Je n’y arrive pas.
    Avez-vous une solution.
    J’utilise SPIPR-DIST
    Merci
    Cordialement

    • Hello,

      Peut-être avec {id_secteur]{profondeur=1} dans ta boucle RUBRIQUES

    • Il ne me semble pas qu’il y ait d’options pour “le secteur courant”. Mais bon c’est pas vraiment le but du plugin Menus qui sert à composer plein d’entrées manuellement, pas à faire des menus dynamiques. Pour ça il faut effectivement le faire dans un boucle dans un squelette, pour l’instant.

    • Pascal Engelmajer

      Je me suis débrouillé...
      Merci pour vos réponses....
      Cordialement

    Reply to this message

  • 1

    Bonsoir,

    J’utilise le plugin Menu depuis longtemps, mais là, je rencontre un bug bizarre :

    Pour le type d’entrées « Article, rubrique ou autre objet SPIP », si je mets le nom d’une class dans l’option « Classes CSS de l’entrée (du conteneur) [Facultatif] », tout va bien si je ne dépasse pas plus de 4 class sur l’ensemble des entrées du menu.

    À partir de la cinquième class, le nom de la class est généré dans le code HTML, mais par contre la class CSS n’est pas chargée.

    Une idée ?

    Merci d’avance,

    Cordialement,

    Hervé

    • Oubliez le commentaire ci-dessus:

      j’avais oublié de fermer un commentaire dans le code de la feuille CSS.

    Reply to this message

  • 6

    Bonjour,
    je rencontre un bug lorsque je surcharge menus/objet.html : dans l’interface privé les objets de menu deviennent non-modifiable.
    Pour pouvoir éditer mon menu je dois renommer objet.html dans mes squetettes en autre chose, éditer mon menu, puis renommer objet.html
    J’ai déjà rencontré ce problème sur plusieurs sites...
    Je ne sais pas si d’autres l’ont rencontrés aussi ?
    joz

    ps : Ce n’est pas ma modification sur objet.html qui cause ce bug.

    • En effet, même problème ici. Il ne faut pas le modifier pour pouvoir éditer les menus dans la zone privée. Cela dit, si votre menu est complet, vous pouvez quand même faire la modification a posteriori pour la partie publique.

    • Bonjour,

      Problème que j’ai déjà rencontré.. depuis au moins 2 ans.
      Mais il me semblais que c’était réparé avec SPIP3. Quelle version de SPIP avez-vous ?

      dd

    • Bonjour,

      J’ai également eu ce problème.
      La solution est de copier également le fichier objet.xml dans vos squelettes.

    • Bonjour,

      J’aurai dû lire ce message aussi… Il faudrait l’ajouter dans la documentation :

      Surcharge des fichiers menus/fichier.html

      Si pour des besoins particuliers, nous devons surcharger un fichier du répertoire menus/ du présent plugin, il ne faut pas oublier de copier le fichier .xml qui va bien avec.

      En effet, le plugin cherche le fichier XML au même endroit que le fichier HTML. Le couple étant indissociable actuellement.

    • C’est ajouté Teddy merci

    • Merci à toi! ;-)

    Reply to this message

  • 2

    Bonjour RastaPopoulos ,
    suite à une récente m.a.j, je me pose la question de la source d’un rewriting aléatoire de mes adresses de rubriques dans le menu :
    ex : la 1ère rubrique : donne : http://www.productivix.com/?page=rubrique&id_rubrique=24 alors qu’il est affiché (en bas en survol) http://www.productivix.com/rubrique24.html
    la 2ème donne bien : http://www.productivix.com/rubrique44.html comme prévu
    de même la 5 ème et 7éme (http://www.productivix.com/?page=rubrique&id_rubrique=4) blaguent comme la 1ère ...
    ce ne sont pas que des menus de 1er niveau car http://www.productivix.com/?page=rubrique&id_rubrique=2 blague aussi.
    Une idée ? merci d’avance (j’ai vidé le cache avant)
    Cordialement
    William

    • Je ne vois aucun problème sur ton propre site là en y allant. Et de toute façon, si dans le HTML ça génère le bon lien (puisque tu dis qu’en le survolant ton navigateur t’affiche le bon lien) c’est tout ce que fait le plugin Menus, de générer le HTML. Une fois cliqué dessus ça n’a plus aucun rapport avec Menus, donc ça ne peut pas venir de lui.

    • bonsoir et merci ,
      désolé , je me suis aperçu vers 18:00 que c’est en fait le tampon du navigateur Firefox qui faisait cela !! en le purgeant cela ne faisait plus rien de tordu.
      Sans doute bien de purger ce post ?

    Reply to this message

  • Bonjour,

    Je suis passé à spip 3.1 sur certains de mes sites, précdemment en zpip ou spipr selon le cas. Mais je voudrais retrouver la dist. Donc j’ai menu + spip3.1 + dist tout à jour.

    Si je nomme le menu barrenav : j’ai comme html:

    <div class="menu-conteneur navbar-inner">
    <ul class="menu-liste menu-items">
    		<li class="menu-entree item">
    		<a href="http://blog.example.org/">Accueil</a>
     
    			</li>
    	</ul></div>

    alors que la dist attend un contenu de ce type

    <div class="nav clearfix" id="nav">
    	<ul>
    		<li class="nav-item  first"><a href="a-propo">A propos</a></li>
     
    	</ul>
    </div>

    Les classes .nav et .nav .nav-item ne fonctionne donc pas.

    Je peux donc modifer les classes, mais je me pose la question du meilleur moyen de le faire.

    Utiliser #ENV{class} dans inclure/nav du squelette ? utiliser #VAL{_MENUS_EXTRA_CLASS} ? ou modifier directement inclure/menu et inclure/barre-nav ?

    Merci :)
    PS : a moins que cela soit déjà prévu
    PS2 : le simple ajout de la classe nav règle le soucis, mais ca serait cooool que cela soit “direct compatible”

    Reply to this message

  • login et login public - conflit entre sarkaspipr et menus - suite

    Mille excuses !
    D’abord, j’ai oublié l’élémentaire “bonjour”.
    Ensuite, il s’agit de sarkaspipr et non de spipr.
    En tous cas, merci à l’avance si une solution est possible.

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom