SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 284 visiteurs en ce moment

Accueil > Navigation > Menus réactifs > ADX Menu > ADX Menu : un joli menu déroulant

ADX Menu : un joli menu déroulant

7 septembre 2010 – par PieroWbmstr – 109 commentaires

10 votes

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/.

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 : http://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

PNG - 13.9 ko
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 « ... » :

  1. #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 :

  1. #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 :

  1. <ul class="adxm adxmenu">
  2. <li>un item de menu</li>
  3. </ul>

Télécharger

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/.

Voir en ligne : http://plugins.spip.net/adxmenu

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 ...

Dernière modification de cette page le 12 novembre 2015

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 18 février à 00:23, par DD En réponse à : ADX Menu : un joli menu déroulant

    Bonjour,

    Je n’arrive pas à modifier la valeur par défaut de la coupe :
    [(#ADXMENU{50,...})]

    renvoie une erreur.

    Je n’ai pas besoin de spécifier des ID de rubrique.

    dd

    • Le 18 février à 07:27, par Manu En réponse à : ADX Menu : un joli menu déroulant

      Le code que tu indiques [(#ADXMENU{50,...})],semble donner l’impression que tu utilises des « virgules » comme séparateur alors que les exemples de la doc utilisent des « deux points ». Ce ne serait pas ça la cause des erreurs rencontrées ?

    • Le 18 février à 12:22, par DD En réponse à : ADX Menu : un joli menu déroulant

      J’ai réussi en indiquant :
      [(#ADXMENU{secteurs,50,...})]

      car j’ai l’impression qu’il faut obligatoirement indiquer une valeur de rubrique pour que les valeurs suivantes soient prises en compte.

      dd

    Répondre à ce message

  • Le 3 novembre 2015 à 11:49, par Eric En réponse à : ADX Menu : un joli menu déroulant

    Bonjour,

    J’utilise ce plugin pour mon siteweb. Or, je souhaiterais passer à Spip 3.1 mais le plugin ne semble pas compatible ?... Y aura-t-il une mise-à-jour du plugin ? Merci

    Répondre à ce message

  • Le 24 octobre 2015 à 14:47, par Théo En réponse à : ADX Menu : un joli menu déroulant

    PieroWbmstr C’est exactement le menu que je souhaite faire sur mon site local mais je suis débutant et me noie dans les boucles :(

    http://saintbrieuc-treguier.catholi...

    Répondre à ce message

  • Le 16 mars 2014 à 16:41, par Arnault En réponse à : ADX Menu : un joli menu déroulant

    Bonjour et merci pour commencer !
    Ensuite, je ne parviens pas à faire fonctionner le plugin avec zpip et le thème higherground (cf. http://webklas.free.fr/)

    J’ai bien ajouté la classe css (adxm adxmenu) dans la config du menu barrenav mais point de menu déroulant :/
    Ai-je oublié quelque chose ?

    • Le 16 mars 2014 à 17:03, par PieroWbmstr En réponse à : ADX Menu : un joli menu déroulant

      Salut Arnault,

      Oui, malheureusement, le plugin ne s’adapte pas automatiquement à toute situation ... notamment sur des menus déjà très stylisés :(
      Il va falloir que tu cherches dans les CSS le pourquoi du comment (ou que tu vires complètement la classe « menu-entree ... » du ul global du menu).
      Bref, un peu de boulot en perspective.

    • Le 16 mars 2014 à 17:21, par Arnault En réponse à : ADX Menu : un joli menu déroulant

      tu vires complètement la classe « menu-entree ... » du ul global du menu

      Hum, dans quel css ?

    • Le 20 avril 2014 à 09:37, par ElJuez En réponse à : ADX Menu : un joli menu déroulant

      Bonjour,

      Suis un peu dans le même cas mais avec andreas09

      Dans le thème on trouve ceci

      #nav .menu-entree .menu-liste
      display:none ;
      /*Prevoir menu déroulant*/

      J’ai essayé de juste mettre « block » et ça ne change rien, j’imagine qu’il y a plus à faire ... le soucis c’est qu’on ne sait pas quoi faire exactement. Quelle peut etre l’incompatibilité ?

      Si on complète la css du thème pour prendre en compte l’indentation des menus générés par le plugin menu ... alors pour moi ça veut dire plus besoin du plugin non ? Puisque les menus seront directement gérés, enfin sinon j’ai raté une étape.

      Donc j’imagine que la modification doit être triviale, tu n’as pas une idée ? Car s’il faut retirer la classe de menu par défaut, alors on perds toute la mise en page de menu du plugin ...

    Répondre à ce message

  • Le 19 avril 2014 à 07:20, par chris En réponse à : ADX Menu : un joli menu déroulant

    Juste super, j’ai remplacé un superfish qui marchait mal sur iPad, en 10 mn sans avoir a toucher mes styles.

    Bravo et merci pour ce plug

    Répondre à ce message

  • Le 11 mars 2014 à 16:09, par Matthieu En réponse à : ADX Menu : un joli menu déroulant

    Bonjour,
    Savez-vous s’il est possible d’ordonner différemment le menu ?
    Pour l’instant, tout est trié alphabétiquement et j’aimerais pouvoir choisir l’ordre des rubriques affichées.

    J’en profite également pour vous demander s’il est possible d’ajouter à ce menu la liste des brèves (en évitant de convertir les brèves en articles - notamment avec le plugin http://contrib.spip.net/Conversion-des-breves-en-articles).

    Par avance, merci de votre réponse.

    Matthieu

    • Le 12 mars 2014 à 19:55, par PieroWbmstr En réponse à : ADX Menu : un joli menu déroulant

      Bonsoir Matthieu,

      Tout est possible ;)

      Le contenu du menu est généré par le squelette modeles/adxmenu.html dans le plugin. Tu peux en faire une copie dans ton dossier squelettes/modeles/ (sans le renommer) et SPIP le prendra en priorité. Ensuite, il ne reste plus qu’à le modifier selon tes besoins ...

      Par exemple pour changer l’ordre du tri, tu peux modifier le {par titre} de la boucle ARTICLES. Jette un oeil à http://www.spip.net/fr_article902.html pour plus d’infos.

      Ensuite, pour boucler sur des brèves, tu fais une nouvelle boucle BREVES en t’aidant de http://www.spip.net/fr_article906.html.

      Voilà, à toi de jouer ;)

      @+

    Répondre à ce message

  • Le 4 mars 2014 à 17:39, par Matt En réponse à : ADX Menu : un joli menu déroulant

    Ah, merci. C’est bien ce que je croyais. Mais j’avais des gros problèmes liés au cache SPIP et également Firefox.
    Encore merci

    Répondre à ce message

  • Le 3 mars 2014 à 16:25, par Matt En réponse à : ADX Menu : un joli menu déroulant

    Bonjour,
    Comme certaines personnes ici, je n’arrive pas à modifier l’apparence du menu. J’ai beau triturer le fichier adxmenu_css_styles.css.html dans tous les sens, rien n’y fait...
    J’ai dû rater quelque chose.
    Par avance, merci de vos éclaircissements...

    • Le 3 mars 2014 à 22:01, par PieroWbmstr En réponse à : ADX Menu : un joli menu déroulant

      Bonsoir Matt,

      -  si tu es en SPIP version 3, c’est le fichier adxmenu_css_styles_spip3.css.html qu’il faut modifier
      -  pense bien à vider ton cache (ou à ajouter var_mode=recalcul à tes URLs) pour voir tes modifs.

      N’hésite pas à revenir poster ici si tu as toujours des difficultés ;)

      @+

    Répondre à ce message

  • Le 23 mars 2013 à 15:05, par JFD En réponse à : ADX Menu : un joli menu déroulant

    Bonjour à tous,
    J’utilise Spip en version 2.1.2
    J’essaie de mettre en place les plugins menus (version 0.9.2) et adxmenu (version 1.23.2)
    Je constate que si je mets comme entrée un texte libre (en l’occurrence le texte « Rubriques », voir saisie d’écran menu.jpg), la mise en forme est différente de celle d’autres types d’entrées. Je n’arrive pas à corriger ce pb dans le fichier css : « adxmenu_css_styles.css.htm ».
    Auriez-vous une solution ?
    Merci par avance.
    JF David

    JPEG - 21.5 ko

    Répondre à ce message

  • Le 4 novembre 2012 à 18:13, par DD En réponse à : ADX Menu : un joli menu déroulant

    Bonjour,

    Je viens de passer un site de la verison 2 à 3 et mon menu a perdu ses styles donc je cherche pourquoi.

    Est-ce que le nouveau fichier adxmenu_css_styles_spip3.css.html gère les styles dorénavant ? merci.

    • Le 16 novembre 2012 à 23:47, par PieroWbmstr En réponse à : ADX Menu : un joli menu déroulant

      Salut DD,

      Oui, les styles ont changé pour s’adapter à la distribution de SPIP version 3. Les classes et ID n’ont pas été modifiés par conte.

      Reviens poster ici si tu as toujours des problèmes.

      P.

    • Le 21 novembre 2012 à 12:29, par DD En réponse à : ADX Menu : un joli menu déroulant

      OK merci.

      Si je me souviens bien j’ai renommé ma feuille de style v2 en adxmenu_css_styles_spip3.css.html et ça marche.

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

Ça spipe par là