ADX Menu : un joli menu déroulant

Le plugin ADX Menu pour SPIP 2.0 (et plus) est une adaptation du menu CSS/JavaScript « ADXmenu » de Aleksandar Vacic ; il permet de mettre en place un menu ouvrant horizontalement ou verticalement en CSS (et Javascript pour IE<7).

Script original et informations sur le site : http://aplus.rs/adxmenu/.

Page de démonstration : http://demo-spip3.ateliers-pierrot.... (documentation livrée avec le plugin).

Installation

  1. Téléchargez l’archive ’.zip’ de cette page vers le dossier de plugins de votre SPIP
  2. Installez le plugin depuis votre espace privé comme expliqué ici : https://www.spip.net/fr_article3396.html
  3. Si vous avez CFG, accédez à la page du plugin via le bouton de l’onglet ’Configuration’ de l’espace privé (réservé aux webmestres du site).

Utilisation & configuration

Le plugin peut s’utiliser de deux façons détaillées plus loin :

  • en utilisant la balise #ADXMENU,
  • en utilisant la classe CSS « adxm admenu ».

Il est prévu pour proposer une page de configuration grâce au plugin CFG : moteur de configuration mais celui-ci n’est pas obligatoire.

La page de configuration permet de définir notamment le sens d’ouverture du menu ; celui-ci peut être horizontal, de bas en haut ou de haut en bas, mais aussi vertical, de gauche à droite ou de droite à gauche [1].

Aperçu

Copie d’écran ADX Menu

La balise #ADXMENU

Cette balise s’utilise seule par défaut, mais peut prendre les trois arguments suivants :
-  liste des rubriques (par défaut tous les secteurs) :
Liste des ID de rubriques à inclure dans le menu, séparés par deux-points ; cette valeur est détaillée ci-dessous ;
-  longueur avant de couper les titres (par défaut 30) :
Nombre de caractères au-delà desquels les titres seront tronqués ;
-  caractère(s) de coupe (par défaut « . ») :
Le ou les caractères qui seront indiqués pour un titre tronqué.

Exemple pour un menu contenant les rubriques 1, 3 et 12, des titres coupés à 50 caractères et auxquels on ajoute « ... » :

#ADXMENU{1:3:12,50,...}

Le modèle utilisé par la balise expose la rubrique ou l’article courant, à la façon de SPIP. Si un identifiant de rubrique est trouvé dans le contexte (dans les boucles de la page), le titre de la rubrique en question portera la classe CSS on, ainsi que tous ses parents. S’il s’agit d’un article, le titre de l’article portera la classe CSS on ainsi que toutes ses rubriques parentes : secteur, rubrique, sous-rubrique puis article ...

La liste des rubriques affichées peut être écrite de différentes façons :
-  une liste simple d’ID, séparés par deux-points ; par exemple 1:2:5 ;
-  le mot-clé « secteurs » (valeur par défaut) pour lister tous les secteurs du site ;
-  le mot-clé « tout » pour lister toutes les rubriques du site.
Dans chacune des alternatives ci-dessus, vous pouvez ajouter une liste d’identifiants que vous voulez exclure du menu, en précédant cette liste par un point d’exclamation ; par exemple :

#ADXMENU{ secteurs!1:3 }

qui listera tous les secteurs sauf ceux ayant les ID 1 et 3 [2].

La classe « adxm admenu »

L’effet menu ouvrant s’applique en ajoutant simplement la classe « adxm adxmenu » à n’importe quel menu (liste imbriquée de <ul><li>) [3].

Exemple :

<ul class="adxm adxmenu">
	<li>un item de menu</li>
</ul>

Personnalisation

Les styles CSS des différents liens ou items du menu sont personnalisables dans le fichier CSS présent à la racine du plugin :
-  « adxmenu_css_styles.css.html »

A noter également, si vous avez besoin de modifier l’ensemble de l’apparence du menu, que les styles définissant la disposition des blocs, leur apparence au passage de la souris et toute la mécanique du menu sont modifiables dans les fichiers CSS (complexes) :
-  « adxmenu_css.css.html »
-  « adxmenu_css_ie.css.html »

Il est conseillé de bien tester vos personnalisations pour vérifier que le menu est toujours présentable (!). À noter ici qu’il est possible de coloriser la zone de sécurité des items du menu en décommentant la ligne 91 du fichier « adxmenu_css.css.html » (une zone rouge encadrera chaque item).

Compatibilité

Les CSS utilisés pour générer le menu sont compatibles avec la distribution (bien-sûr) mais également avec les squelettes Z compatibles. Vous pouvez notamment, si vous utilisez un squelette Zpip, préciser la classe « adxm adxmenu » au menu général utilisé par le squelette, l’effet ouvrant s’ajoutera automatiquement, en accord avec le sens d’ouverture de vos réglages [4].

Conditions d’utilisation

La version originale du script du menu est proposée par son auteur sous licence Creative Commons Attribution. Il est donc demandé d’indiquer sur la page de crédits de votre site l’information :

Ce site web utilise ADxMenu, par studio.aplus

Pour plus d’informations, reportez-vous à la page dédiée par l’auteur : http://aplus.rs/adxmenu/buy/.

Notes

[1Cette option n’est accessible que si le plugin CFG est installé sur votre site. À défaut, vous pouvez éditer directement le fichier ’adxmenu_options.php’ à la racine du plugin.

[2Cette fonctionnalité a été ajouté au plugin en version 1.23.2.

[3Cette méthode permet notamment d’utiliser le plugin sur des menus définis grâce au plugin Menus, en ajoutant au menu concerné la classe « adxm adxmenu ».

[4À noter ici que des problèmes d’affichage persistent sur des squelettes Z pour les menus verticaux ...

Discussion

41 discussions

  • 4

    Salut !
    Mi sono permessa di ampliare le funzioni di questo bel menù !
    http://lnx.frammenti.org/francesca/spip.php?article12.
    Non so come si fa per contribuire, così carico tutto sul mio spazio web. Se può esser utile a qualcuno...

    • Bonsoir (traduzione di sotto),

      merci pour cette contribution, je viens d’essayer et ça a l’air efficace (je ne connais pas bien le squelette Median, mais l’idée d’utiliser Palette pour le choix des couleurs est vraiment intéressante) ...

      J’ai quand même quelques remarques mineures :
      -  il serait bien que tous tes textes soient dans un fichier de langue (même ceux de la page de config)
      -  il y a des moyens moins violents que d’utiliser if ( ... ) else ( ... ) dans les squelettes ... SPIP est fait pour ça

      Ceci dit ça a l’air de fonctionner et ça peut être utile aux utilisateurs du squelette. Du coup, je te propose de faire un article dans cette rubrique pour le présenter et le proposer. Qu’en penses-tu ?

      [it - google trad.]
      Buona sera,

      vi ringrazio per questo contributo, ho appena provato e sembra efficace (non so bene lo scheletro Median, ma l’idea di usare Palette per la scelta dei colori è davvero interessante) ...

      Ho alcune osservazioni minori :
      -  Sarebbe bello se tutti i vostri documenti sono in un file di lingua (anche quelle della pagina config)
      -  Ci sono modi per utilizzare meno violenta di quella if ( ... ) else ( ... ) in scheletri ... SPIP è fatto per questo

      Detto ciò, sembra funzionare e può essere utile per gli utenti dello scheletro. Quindi, io suggerisco di fare un articolo su questo argomento per il presente e proposte. Cosa ne pensi ?

    • Di nulla, sono contenta se posso contribuire ed imparare anche qualche cosa di più.

      Non sono professionista di SPIP e, complice la mancanza di tempo, non sono riuscita ad inserire tutto nel file lingua.

      Non riesco sempre ad usare il codice di spip al posto di « if ( ... ) else ( ... ) ». Ci provo ma anche se la sintassi di spip risulta corretta, spesso perdo solo tanto tempo senza che funzioni, e allora ripiego sul PHP che invece funziona.

      Non riesco bene a sistemare nel css i colori. Ho aggiunto una porzione di codice in « adxmenu_css.css.html » ma funziona solo in parte e non è inserito con criterio.

      Cosa significa esattamente fare un articolo su questo argomento, e soprattutto come si fa a contribuire ? Purtroppo ho qualche difficoltà col francese, anche se cerco di arrangiarmi.

      Grazie per l’attenzione

    • fr - google trad :

      Je suis heureux si je peux contribuer et apprendre quelque chose de plus.

      Ils ne sont pas professionnels SPIP et, grâce à l’absence de temps, je n’ai pas réussi à mettre quelque chose dans le fichier de langue.

      Je peux toujours utiliser le code au lieu de spip « si (...) autre (...) ». J’essaie mais même si la syntaxe est correcte spip, perdent souvent seulement si longtemps sans travail, et puis se rabat sur son vrai PHP.

      Je ne peux pas ajuster ainsi les couleurs dans le css. J’ai ajouté un morceau de code dans « adxmenu_css.css.html » mais il ne fonctionne que partiellement et ne sont pas inclus dans la politique.

      En quoi consiste exactement un article sur ce sujet, et surtout comment vous aider ? Malheureusement j’ai du mal avec le français, même si j’essaie de faire avec.

      Je vous remercie de votre attention

    • Salut,

      Cosa significa esattamente fare un articolo su questo argomento, e soprattutto come si fa a contribuire ? Purtroppo ho qualche difficoltà col francese, anche se cerco di arrangiarmi.

      Questa è la registrazione su questo sito (http://www.spip-contrib.net/spip.ph...) e scrivere un articolo sul tuo adattamento del plugin nel « ADX menu » (una volta registrati : http://www.spip-contrib.net/ecrire/...).

      Ci puoi spiegare come funziona, cosa fa così. E si può allegare il documento zip.

      Se volete maggiori informazioni, scrivimi a questa pagina (fondo alla pagina) indicando il vostro e-mail, è scritto in private (in english if you are ok with that).

      [original]----
      Cela consiste à t’inscrire sur ce site (http://www.spip-contrib.net/spip.ph...) et à écrire un article sur ton adaptation du plugin dans la rubrique « ADX menu » (une fois que tu es inscrite : http://www.spip-contrib.net/ecrire/...).

      Tu peux y expliquer comment ça se passe, ce qu’il fait etc. Et tu peux y joindre ton zip en document.

      Si tu veux plus d’infos, écris-moi sur cette page (en bas de la page) en indiquant ton email, on s’écrira en privé.

    Répondre à ce message

  • Bonjour,
    Je teste actuellement ces menus, ça a l’air sympa. Je vois deux problèmes, peut-être dû à une mauvaise configuration de ma part.
    ( Le site en test est celui-ci : http://test.cef.fr/)

    J’ai juste ajouté dans l’entête [(#ADXMENU{n°,50,...})] sous chacune des icônes avec « n° » = le numéro du secteur concerné. Je constate :
    1) Seul le niveau 1 des sous-rubriques se déroule : par exemple, dans « Découvrir le diocèse » la sous-rubrique « Zones pastorales et paroisses » devrait afficher 7 sous-rubriques de niveau 2 (secteur=niveau 1).
    2) Des articles s’affichent alors que je ne veux afficher que les rubriques, par exemple, toujours dans « Découvrir le diocèse » et dans la sous-rubrique « Zones pastorales et paroisses ».
    Merci de me renseigner :-)

    Répondre à ce message

  • Ho già trovato qualche cosa da aggiustare nel plugin ’ampliato’. Qualcosa (una parte relativa ai colori) ho già aggiustato ed ho aggiornato il file. Per altro (non tutti i colori al momento compaiono) vedrò con calma di aggiustare. Tengo aggiornati i files al link indicato.
    Saluti

    Répondre à ce message

  • 1

    Bonjour,
    Je ne vois pas trop comment on se sert de la balise #ADXMENU. Il y a des exemples visibles quelque part ?

    Répondre à ce message

  • 3

    Bonsoir,

    Merci pour ce plugin
    Est ce qu’il persiste encore certains problèmes d’affichage de certains menus déroulants avec les squelettes Z Spip ?

    • Bonsoir,
      Fais-tu référence à un problème connu particulier ?

      Si c’est en rapport avec des messages de ce forum, je n’ai pas encore vérifié sur toutes les anciennes versions mais il me semble qu’effectivement (et malheureusement) des problèmes d’affichage persistent sur Internet Explorer < 7 dans l’utilisation de ce plugin.
      Je travaille dessus (je n’aime pas trop me confronter à IE, mais alors dans ses anciennes versions ...)

      Par contre je ne crois pas que le fait d’utiliser des squelettes Zpip pose un problème particulier (je n’en ai jamais rencontré, et les problèmes de squelette référencés parmi ces tickets ont été résolus).

    • Bonsoir,

      Par exemple, je n’arrive pas à avoir un menu correct vertical déroulant avec Zpip Thème OutDoor que ce soit ADX seul ou bien en déclarant le CSS avec le plugin Menu : totalement déstructuré, passage en arrière plan ....
      A quoi cela peut il bien tenir ?

      Merci bcp ;-)

    • Salut,
      Je viens de tester, il y a effectivement un souci de compatibilité entre ADXmenu et le menu ’barrenav’ du thème OutDoor : les sous-items du menu s’ouvrent sur toute la largeur du contenu de la page ...
      Après un rapide coup d’oeil au CSS, le problème vient je pense de :

      #nav .menu-liste .menu-entree a{     /* ligne 471 */
      	...
      	width: auto;
      	...
      }

      dans « theme_Outdoor1-0/habillage.css » ...
      Pour ce problème, tu dois pouvoir t’en sortir en spécifiant une largeur fixe (à tester).

      Si tu parles d’un autre problème, j’aurai besoin de plus d’infos pour t’aider :
      -  quelle version de SPIP,
      -  quel navigateur,
      -  quel type de menu (via le plugin Menu, en squelette perso ou via le modèle ADXmenu).

    Répondre à ce message

  • 3

    bonjour,

    ce plugin est vraiment top, merci +++
    je rencontre un pb cpdt, les secteurs qui ne contiennent pas d’article a la racine (juste des sous rubriques) ne se deroulent pas. Comment puis resoudre ce pb ?

    Merci par avance.

    • Effectivement, un petit oubli de ma part dans le modèle de construction du menu ... merci de l’avoir pointé !

      J’ai mis à jour ledit modèle et le zip de cette page.
      Du coup, le plugin passe en version 1.1 (pour vérifier si tu as bien la mise à jour).

      Cordialement,
      PW

    • Désolé pour le post plus haut, je n’avais pas vu ta réponse. Merci pour cette belle rapidité !

      j’ai rencontré quelques soucis pour installer la V1.1 (bouton enregistrer n’apparaissait plus). c’est réglé maintenant, cpdt, est-ce normal que la V1.1 en installation auto apparaisse dans un dossier « h231e2ee6-adxmenu » qui contient le sous dossier ADXmenu et tout le contenu normal... ?

      2 autres petites questions au cas ou :
      1 - possibilité derouler sous rubriques de niv 2 ?
      2 - quand 1 seul article lie a un item du menu (liens, ou contacts), le menu se deroule sur celui ci et donne un effet de doublon, comment puis je faire pour que le déroulé ne se produise pas et que le lien dirige directement vers l’article ?

      Merci encore +++

    • Salut Luapmada,
      je réponds à tes questions dans l’ordre :

      1 - si tu utilises la balise, elle génère logiquement un menu qui ouvre toutes les sous-rubriques depuis les rubriques ou secteurs que tu lui as indiqués, donc oui, il est bien sûr possible de dérouler des sous-rubriques ; c’est d’ailleurs un problème sur lequel je travaille : pouvoir demander à la balise un niveau de profondeur maximal pour le menu.

      2 - il faudrait que j’en sache plus sur ton menu : est-ce que tu utilises un autre plugin (« Menu » par exemple), est-ce que c’est un squelette que tu as écrit ...

      Prenons un exemple : un squelette Zpip dont le menu porte la classe « adxm adxmenu ».
      Si dans ton menu, tu as un lien unique, au premier niveau, sans sous-niveau (mettons un lien de contact), il doit apparaître dans la barre générale du menu (toujours visible), avec le lien voulu (vers la page de contact donc), sans rien ouvrir lorsque la souris passe dessus (c’est pas très clair je crois !).
      Si tel n’est pas le cas, le problème vient du squelette ... et là, sans l’avoir sous les yeux, je ne pas faire grand chose !

    Répondre à ce message

  • bonjour,
    tres bon plugin facile d’utilisation. je rencontre cpdt un petit pb qui doit etre mineur.
    le menu ne se deroule pas quand que des rubriques sont presentes au niveau 1. cette rubriques contiennent des articles et sous rubriques.

    2 questions donc :

    1 - suis je obligé d’avoir un article au niveau 1 en plus des rubriques pour que le menu se deroule ?

    2 - y a t’il possibilité de derouler des sous rubriques (niveau 2) ?

    Merci d’avance pour votre aide.

    Répondre à ce message

  • 2

    Bonjour

    dans le site que je suis en train de créer, le menu ADXMenu fonctionne bien sous Firefox, mais ne fonctionne pas sous IE (IE8 que j’ai testé)

    il me renvoie l’erreur suivante :
    Fatal error : Call to undefined function sql_select() in /homepages/36/d344783247/htdocs/plugins/adxmenu/adxmenu/balise/adxmenu.php on line 22

    mon hébergeur est 1and1.fr,
    ma version de SPIP est SPIP 2.1.2 [16017]

    Pouvez-vous m’aider ?

    Merci d’avance !

    • Même problème sous Internet Explorer de la version 6 à la version 8, les blocs des volets dépliants restent blancs et je ne vois pas où modifier cela dans la feuille de style dédiée à IE, je suis preneur de quelques explications complémentaires si quelqu’un a trouvé la solution

      Merci par avance

    • Salut,

      je viens de vérifier sur IE8, avec les styles par défaut de SPIP et de Zpip et, en tout cas pour la page de démo du plugin, aucun problème d’affichage ... donc peut-être faut-il ajouter certaines définitions CSS pour la classe ’.adxmenu’ dans le bloc de ’Reset’ présent en début du fichier ’adxmenu_css.css.html’. Le problème vient probablement du fait que vous définissiez quelque part l’apparence des listes (ul et li) dont le menu hérite.

      Pour l’erreur sur ’sql_select’, je ne comprends vraiment pas : PHP te dit qu’il n’a pas trouvé cette fonction lors de la compilation de la balise (??). Je ne vois vraiment pas comment t’aider là ... En guise de piste, sur IE8 j’ai très souvent depuis SPIP 2 une erreur de droits en écriture (notamment sur le répertoire ’tmp/’), alors que je n’ai jamais ce problème, pour les mêmes sites, sur un autre navigateur. Il faut peut-être chercher du côté des en-têtes de requêtes HTTP transmises par IE (?)

      Pour l’apparence sur IE6, je n’ai pas les moyens de vérifier. L’auteur du javascript m’avait conseillé une fois de désactiver le Javascript pour vérifier : le menu devrait apparaître complètement ouvert et ses liens devraient être visibles. Si ce n’est pas le cas l’erreur vient du CSS.

      J’ai regardé dans le fichier css pour IE du plugin (mais sans pouvoir tester ...) et il y a peut-être une erreur : essaies de remplacer la ligne 66

      [(#GET{ouverture}|=={horizontal}|?{.adxmenu .adxmhoverUL .adxmhoverUL,.adxmenu .adxmhoverUL})] { /* inset 2nd+ submenus, to show off overlapping */

      par

      [(#GET{ouverture}|=={horizontal}|?{.adxmenu .adxmhoverUL .adxmhoverUL})] { /* inset 2nd+ submenus, to show off overlapping */

      Si ça marche tiens moi au courant, je corrigerai le plugin ...

      Courage ... et revenez nous dire ce qu’il en est ;-)

    Répondre à ce message

  • 3

    Bonjour,

    la classe « adxm adxmenu » ???

    Je n’arrive pas a trouver où je dois préciser cette classe
    Quelqu’un peut il m’aider :(

    • La classe est à attribuer au premier « <ul> » de ton menu.

      Dans une boucle de rubriques par exemple, ça pourrait donner :

      <B_rubriques>
      	<ul class="adxm adxmenu">
      	<BOUCLE_rubriques(RUBRIQUES) {racine}>
      		<li><a href="#URL_RUBRIQUE">[(#TITRE|couper{80})]</a>
      ... ici on peut ajouter ce qu'on veut (des boucles récursives par exemple) ...
      		</li>
      	</BOUCLE_rubriques>
      	</ul>
      </B_rubriques>
    • Merci pour cette réponse rapide mais j’ai du réviser quelques bases avant d’attaquer une nouvelle fois la bête !
      Vous êtes vraiment sacrement fort, je retente donc à présent l’expérience de mon menu et je vous dis si ca marche !
      Merci encore !!!

    • Yes ca marche merci merci merci !

    Répondre à ce message

  • 1
    calamity jane

    Bonjour,

    Ha ben puisque vous y etes voilà que je me heurte a un probleme avec votre plug in (qui me séduit il faut le dire, et que j’aimerai bien utiliser pour un nouveau projet)

    J’ai un
    Fatal error : Call to undefined function : spip_abstract_select() in / ... /spip/plugins/adxmenu/balise/adxmenu.php on line 22

    Il faut dire que je crée un squelette spip perso et que j’ai peut etre oublié un include ? Ou autre ?

    En plus je me suis permis de bidouiller le adxmenu.html afin qu’il n’affiche pas les articles mais juste les rubriques avec deux niveaux de navigation. Mais je ne pense pas que ce soit de lui dont vienne le probleme... As tu une idée ?

    Merci

    • Salut,

      a priori je ne vois pas ... peux-tu me donner plus d’infos :
      -  version exacte de SPIP
      -  utilises-tu CFG (et si oui avec quelle config pour ADXmenu)
      -  as-tu modifié le code de la balise ?
      -  quel est ton appel de balise dans tes squelettes (balise + arguments) ?

      Courage ... on va trouver !

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom