SPIP-Contrib

SPIP-Contrib

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

289 Plugins, 197 contribs sur SPIP-Zone, 66 visiteurs en ce moment

Accueil > Navigation > Menus réactifs > Menu animé > Menu animé déroulant

Menu animé déroulant

16 août 2015 – par Louis Possoz – 58 commentaires

Toutes les versions de cet article : [English] [français]

15 votes

Afficher très simplement un menu déroulant animé multi niveaux !

Ce plugin est adapté aux petits écrans (mobiles) !
Les thèmes de couleur et les dimensions sont modifiables, comme expliqué dans la dernière partie de l’article.

Introduction

Souplesse et simplicité de cet afficheur de menus. Un exemple sur le site de notre Repair Café.
Il utilise (tous ?) les potentiels des différents navigateurs : dégradés de couleurs, ombrage des boîtes et des textes ainsi qu’arrondis des coins, sans parler de la dynamique des boîtes de menu !

Pour les petits écrans, le plugin réagit différemment et permet d’afficher un menu déroulant vertical. Cerise sur le gâteau, le menu disparaît à l’impression, il sait se faire discret !

Menu animé n’est pourtant constitué que d’une simple (!) feuille de style (menu_anime.css). C’est elle qui fait tout le travail !
Ce plugin est un complément idéal au plugin menus mais il convient parfaitement à tous les menus contenant un sélecteur class="menu_anime".

Le plugin est conçu de manière à simplifier l’adaptation des couleurs et des dimensions à chaque site en particulier. Une méthode pour ce faire est décrite en détail en fin d’article.

L’idée originale de cet afficheur de menus revient à Catalin Rosu. Ce plugin a été développé au départ de son élégant et talentueux maniement des feuilles de style.

Installation

Choisissez une des méthodes manuelle ou automatique fournies par SPIP. Le plugin n’a aucune dépendance.

Utilisation

L’utilisation la plus simple et la plus générale se fait au moyen du plugin menus. Après avoir activé ce plugin (si ce n’est déjà fait), il suffit d’y créer un menu (ou de modifier un menu existant) en veillant à lui attribuer la classe CSS menu_anime comme on peut le voir sur la capture d’écran qui suit.

Ici, l’identifiant « barrenav » provoque l’affichage du menu dans la barre de navigation. Aucune autre intervention dans les squelettes n’est nécessaires !

Plus généralement, le plugin affichera toute liste de liens, à un ou plusieurs niveaux, dont le premier niveau contient le sélecteur .menu_anime (i.e. <ul class="menu_anime">) et dont le parent immédiat appartienne à la classe .menu-conteneur (e.g. <div class="menu-conteneur">).

Bien entendu et comme d’habitude, la feuille de style menu_anime.css peut être modifiée, en plaçant une copie modifiée dans le répertoire squelettes/css/). Certaines lignes peuvent également être surchargées, par exemple dans la feuille perso.css. Vous serez certainement intéressé.e.s à en modifier les couleurs. Cependant, l’intervention directe sur la feuille de style est particulièrement complexe et rébarbative. C’est pour cette raison qu’une méthode alternative a été développée (voir ci-dessous).

Modification des couleurs et dimensions

Le plugin contient un fichier menu_anime.less permettant une adaptation facile (?) aux spécificités propres à chaque site Internet.
Même si la procédure peut paraître un peu rébarbative, elle est infiniment plus simple qu’une édition directe du fichier menu_anime.css.

La procédure consiste à :

  1. Ouvrir pour édition le fichier menu_anime.less contenu dans le paquet.
  2. Modifier dans ce fichier les valeurs des variables de couleur et/ou de dimension souhaitées. Elles sont rassemblées tout au début du fichier.
  3. Compiler le fichier résultant au moyen d’un compilateur ’less’, par exemple un compilateur en ligne.
  4. Créer un fichier menu_anime.css vide et y copier-coller le résultat de la compilation.
  5. Placer ce nouveau fichier dans le répertoire squelettes/css/ ou remplacer celui qui se trouve dans le repertoire plugins/auto/menu_anime/css/ .
  6. Conservez soigneusement votre version du fichier menu_anime.less pour pouvoir y récupérer vos réglages lors des mises à jour ultérieures.

Exemple pour modifier la couleur de base du menu anime déroulant

  1. Choisir une nouvelle couleur au moyen d’un utilitaire de couleur en ligne.
  2. Ouvrir le fichier menu_anime.less dans un éditeur.
  3. Y remplacer la valeur de la couleur ( #b0422c ) dans la ligne @theme-basic: #b0422c; /* ... */ par celle qui a été choisie.
  4. Compiler le contenu du nouveau fichier ainsi obtenu au moyen d’un compilateur en ligne.
  5. Créer un nouveau fichier menu_anime.css vide et y placer tout le résultat de la compilation (par copier coller).
  6. Placer le fichier menu_anime.css ainsi obtenu dans le répertoire squelettes/css/ de votre SPIP préféré. Placez-y également votre fichier menu_anime.less modifié (pour ne pas le perdre).

Simple, n’est-il pas ?

Une autre solution consisterait probablement à utiliser le plugin LESS pour SPIP. Je ne suis cependant pas certain qu’elle présenterait un avantage dans la mesure où on ne modifie que rarement les couleurs d’un site Internet une fois celui-ci installé. A voir...

Voir en ligne : https://plugins.spip.net/menu_anime

Dernière modification de cette page le 1er novembre 2017

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 6 février à 22:09, par Fanchlerouge En réponse à : Menu animé déroulant

    Bonjour,

    J’ai un soucis avec menus. Tout fonctionnais bien jusqu’à ce que j’installe le thème dist_theme_waz, il y a environ 2 ans.

    Même avec spipr le problème persiste, si je désactive less_css et tous les plugins qui vont avec, le menu s’affiche correctement.

    Maintenant, j’utilise squelette_dist auquel j’ai juste ajouté en perso.css les datas css de dist_theme_waz.

    Il est couplé avec menu animé, la classe menu_anime. Et rien ne s’affiche ? Comprends pas.

    Le site est visible ici. Du coup, je l’ai laissé un peu à l’abandon, mais il va revivre.

    Auriez-vous une idée pour m’aidez à résoudre mon problème ?

    Bien cordialement

    Fanch

    • Le 7 février à 00:10, par Fanchlerouge En réponse à : Menu animé déroulant

      Bonsoir, problème résolu en mettant ceci
      #INCLUREfond=inclure/menu, env, identifiant=barrenav
      à l’emplacement du menu dans le squelette

    Répondre à ce message

  • Le 27 décembre 2017 à 16:47, par Olivier Cousson En réponse à : Menu animé déroulant

    Bonjour,

    J’essaie d’utiliser menu-anime-déroulant avec SPIP-r.

    J’ai un problème : la hauteur de la barre de menu augmente avec le nombre d’éléments que je mets dans les niveaux inférieurs (comme en prévision du futur déroulement du menu inférieur).

    Ne sachant pas programmer, je n’ai utilisé que les fonctionnalités « automatiques » d’installation de plugins. Je me suis risqué à jouer avec les paramètres réglables en less grâce aux explications limpides qui accompagnent le plugin ; j’ai pu changer les couleurs et la police, mais pas la hauteur de la barre de menu.

    Savez-vous où j’aurais pu faire une erreur, ou où je pourrais corriger ça ?

    Mon site bac à sable est ici : http://brouillon.moutontond.fr/spip/.

    Merci !

    Répondre à ce message

  • Le 16 octobre 2017 à 09:22, par AlainF En réponse à : Menu animé déroulant

    Bonjour,
    je suis très content de ce plugin, je souhaiterais savoir si une mise à jour pour SPIP 3.2 est envisagée pour faire le passage à cette version ou si je dois envisager une autre direction ?
    Par avance, merci

    • Le 16 octobre 2017 à 11:32, par Louis Possoz En réponse à : Menu animé déroulant

      Merci pour le compliment.
      Je me mets immédiatement au travail. :-)
      En attendant, vous pouvez éditer le fichier paquet.xml du plugin et y modifier la ligne de compatibilité en compatibilite="[3.0.0;3.2.*]". Reste plus alors qu’à activer le plugin. :-)

    • Le 16 octobre 2017 à 16:30, par AlainF En réponse à : Menu animé déroulant

      merci en effet, c’est assez simple, mais tous les plugins que j’utilise ne sont pas encore compatibles,
      je n’ai donc pas la possibilité de l’utiliser sur mon site en production malgré la modif...

    Répondre à ce message

  • Le 1er juillet 2017 à 12:41, par syldupac En réponse à : Menu animé déroulant

    Je travaille sur un site éditorial (beaucoup de rubriques, beaucoup d’articles).
    je voudrais un menu déroulant qui affiche rubriques et articles (grand écran) et qui propose en taille réduite un bouton, et que ce bouton ouvre un menu déroulant (vertical, bien sûr...)
    Pour le moment, avec menu animé déroulant 1.0.10 (et le plugin Menus 1.6.8) j’obtiens un bien un menu qui s’ouvre sous le pointeur mais qui n’affiche pas les articles (malgré l’option précise dans Menus).
    Et en petit écran, j’obtiens une liste, utilisable quand on a que quelques articles mais qui n’est pas un menu déroulant.
    Je suis un peu bloqué... merci

    Répondre à ce message

  • Le 14 mai 2017 à 07:48, par Pascal En réponse à : Menu animé déroulant

    Bonjour,
    je voudrais modifier le moment ou le menu hamburger pour les petit écrans s’affiche.
    la limite est actuellement à 767/769px
    Je voudrais qu’elle soit à 800px
    Cordialement

    • Le 14 mai 2017 à 08:20, par Louis Possoz En réponse à : Menu animé déroulant

      Bonjour Pascal,

      Les chiffres que vous indiquez (767/769px) sont très fréquemment utilisés pour définir la limite de largeur d’écran des smartphones. Par contre, ils ne se trouvent nulle part dans le plugin dans lequel la limite est fixée à 600px. Bizarre ! Auriez-vous un hyperlien vers votre site ?

      Sinon, il vous suffit de remplacer le 600 par 800 dans la ligne
      @media screen and (max-width: 600px)
      et 600 par 801 dans la ligne
      @media screen and (min-width: 600px)

      Dans une prochaine version je rendrai cette valeur paramétrable. :-)

    • Le 15 mai 2017 à 04:07, par Pascal Engelmajer En réponse à : Menu animé déroulant

      Merci beaucoup de votre réponse.
      C’est ce que j’avais vu.
      J’utilise bootstrap dans SPIPR-DIST
      J’ai modifié le paramètre du @media screen dans bootstrap (je ne suis pas un expert en .less tant s’en faut !). Cela modifie bien l’affichage de la page, mais le menu n’est pas le menu hamburger... comme vous pouvez le constater.
      Le site est un site de mise au point et non de production.
      http://www.safarine.ovh/index.php
      Merci encore de votre aide
      Cordialement

    • Le 15 mai 2017 à 10:38, par Louis Possoz En réponse à : Menu animé déroulant

      Bonjour,

      Il s’en faut d’un px. :-) Votre image indique 768px et vous avez réglé la transition a 767px dans bootstrap. Pour vos difficultés avec le plugin bootstrap, peut-être devriez vous plutôt poser vos questions sur la page du plugin bootstrap. Il est presque inévitable de rencontrer des problèmes lorsque deux plugins tentent de gérer la même fonctionnalité comme ici l’affichage (ce qui est différent de la gestion) des menus de navigation sur petit écran.

      Bonne chance. :-)

    Répondre à ce message

  • Le 25 mars 2017 à 20:20, par fgh En réponse à : Menu animé déroulant

    Bonjour
    J’utilise pour la 1re fois menu_animé... mais le menu affiché ne me donne accès qu’aux rubriques de niveau 1 !
    Ni les sous-rubriques, ni les articles ne sont présents.

    Merci pour toute aide

    • Le 26 mars 2017 à 08:33, par Louis Possoz En réponse à : Menu animé déroulant

      Aucune idée. Difficile de se faire une idée sans voir votre page. N’y a-t-il pas conflit avec un autre plugin qui gère déjà l’affichage ?

    • Le 26 mars 2017 à 10:30, par fgh En réponse à : Menu animé déroulant

      Merci pour votre réponse.
      Le projet de site est à l’url : http://berenice-goni-depreville.com/spip.php?rubrique1
      Les articles contiennent des photos affichées via le plugin « Galleria ».
      Voir http://berenice-goni-depreville.com/spip.php?article2

      Merci pour votre aide

    • Le 28 mars 2017 à 13:03, par fgh En réponse à : Menu animé déroulant

      Dans la (longue) liste des paramètres optionnels du plugin « menus », j’ai trouvé celui qui contrôle l’affichage des articles qui est par défaut négatif !!!
      Je me sens tout bête !...

    • Le 3 avril 2017 à 15:17, par lc En réponse à : Menu animé déroulant

      bonjour,

      je débute sur spip, et j’ai exactement le même problème que vous... sauf que je n’ai pas compris votre solution. Vous pourriez la détailler par étape ?
      merci beaucoup

    • Le 3 avril 2017 à 17:18, par Fhamonno En réponse à : Menu animé déroulant

      Bonjour lc
      De mémoire :
      L’activation du plugin « Menus » génère un nouveau lien dans le menu « Edition » de spip : « Mes menus ».
      On a alors accès à plein de paramètres dont l’affichage des articles (vers la fin de la liste).
      Si tu n’y arrives pas, je serai devant mon ordinateur demain...

    • Le 4 avril 2017 à 08:23, par lc En réponse à : Menu animé déroulant

      Alors, mon nouveau lien se trouve dans « squelettes » et c’est « menus du site », mais c’est tout. Rien dans « Edition ».
      Et j’ai bien réussi à faire mon menu, il est juste pas déroulant, comme fgh je n’ai que les rubriques de niveau 1

      Merci hein, je débute alors je galère haha

    • Le 4 avril 2017 à 17:27, par fgh En réponse à : Menu animé déroulant

      Aller sur Squelettes -> Menus du site -> Modifier ce menu

      -  Mettre la souris dans la zone « Construction du menu »
      ce qui fait apparaître des icônes : cliquer sur le crayon.
      Apparaît alors la liste des options... dont l’affichage des articles.

      -  On peut aussi y accéder en cliquant sur « Ajouter une entrée ».
      Sélectionner « Liste ou arborescence de rubriques et d’articles
      (avec beaucoup d’options) » puis cliquer sur « Suivant ».

    Répondre à ce message

  • Le 8 octobre 2016 à 14:11, par NS En réponse à : Menu animé déroulant

    Bonjour,

    J’utilise un squelette eva et souhaiterai intégrer ce menu. Cependant je n’y connais pas grand-chose et n’y suis pas arrivé.
    Lorsque je met « visualiser », voici ce que j’ obtiens ... (liste de lien sans mise en page). Pourriez-vous m’expliquez ce que j’ai raté ?
    Merci !

    • Le 26 mars 2017 à 08:29, par Louis Possoz En réponse à : Menu animé déroulant

      Si le squelette eva gère déjà l’affichage des menus, il y a probablement conflit.
      Il est toujours difficile de gérer « deux chiens sur le même os ». :-)

    Répondre à ce message

  • Le 19 septembre 2016 à 17:44, par Karen En réponse à : Menu animé déroulant

    Bonjour,

    J’ai réussi à adapter le menu à mes besoins, c’est super ! Merci pour ce travail.

    Cependant j’ai relevé un petit bug, que l’on voit aussi sur la « démo » sur le site de Repair Café : quand la fenêtre du navigateur est à 600px de large exactement, et seulement à 600, le menu en version mobile est déplié d’office et on ne peut pas le replier…

    J’ai réglé ça en modifiant la ligne 323 de menu_anime.css en remplaçant

    1. @media screen and (min-width: 600px)

    par

    1. @media screen and (min-width: 601px)

    J’ai tout travaillé sur le .css et non le point .less que je ne maîtrise pas du tout.

    Merci encore,
    Bonne soirée,
    Karen

    • Le 24 septembre 2016 à 08:45, par Louis Possoz En réponse à : Menu animé déroulant

      Bien joué !
      Votre correction sera intégrée dans la prochaine version du plugin (1.0.11).
      Merci.

    Répondre à ce message

  • Le 6 janvier 2016 à 10:41, par oliv En réponse à : Menu animé déroulant

    Bonjour,
    Je viens de faire une installation de ce plugin sous SPIP 3.0.21 en local et lorsque je diminue la fenêtre de mon navigateur pour tester la compatibilité avec un portable par exemple, le menu disparaît mais n’est pas remplacé par le menu mobile.

    Une idée peut-être ?

    Merci

    • Le 15 septembre 2016 à 15:29, par Karen En réponse à : Menu animé déroulant

      Bonjour,

      Je teste ce plugin pour la première fois et j’ai exactement le même problème en spip 3.1.1… Personne de concerné ou ayant une idée ?
      Il n’apparaît en version mobile qu’aux alentours de 600px de large, et disparaît à mettons 595px… ??
      Aussi, en version mobile, le premier niveau des 3 barres avec la dénomination « menu », qui cache le reste tant qu’on ne clique pas dessus, n’apparaît pas, tout est déroulé.

      Pour le moment je n’ai fait aucun réglage particulier, seulement utilisé le plugin Menus en lui mettant la classe menu_anime. Lui ayant donné l’identifiant barrenav, je l’appelle ainsi :

      1. <INCLURE{fond=inclure/menu, env, identifiant=barrenav} />

      C’est une installation vierge avec seulement les plugins Menus, Menu animé déroulant et Saisies pour formulaires… bref, le minimum.

      J’ai très envie de tester ce menu sur mon prochain site en production, en particulier pour sa souplesse en responsive ! D’avance merci…
      Karen

    • Le 15 septembre 2016 à 15:46, par Karen En réponse à : Menu animé déroulant

      :D ok, à peine 10 minutes après avoir posté, j’ai trouvé la réponse, simplissime, et qui servira peut-être à d’autres… je n’avais pas englobé mon appel dans un div de la classe menu-conteneur, ce qui donne :

      1. <div class="menu-conteneur"><INCLURE{fond=inclure/menu, env, identifiant=barrenav} /></div>

      À présent ça fonctionne parfaitement !
      Merci pour ce beau plugin que je suis impatiente de personnaliser :-)
      Bonne journée

    Répondre à ce message

  • Le 29 août 2016 à 10:15, par Polémil En réponse à : Menu animé déroulant

    Bonjour,
    Merci pour ce plugin.
    Mon site est en Spip 3.1 et utilise les plugins Bootstrap, Sarka-Spip v4, Z-core, Zen-Garden avec le thème Cerulean, et évidemment Menus.
    Or une fois installé le menu déroulant apparaît bien, mais n’affiche que les sous-rubriques de 1er niveau.
    Y a-t-il une incompatibilité avec les plugins listés ci-dessus ?
    Merci pour l’aide que vous pourrez m’apporter.
    Cordialement,
    Polémil

    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

  • Envoyer des fichiers avec un formulaire Formidable

    2 janvier 2017 – 56 commentaires

    La version 3.0.0 du plugin Formidable permet de créer des formulaires comprenant des envois de fichiers. Cet article regroupe la documentation relative à cette fonctionnalité. Pour une présentation générale de Formidable, voir « Formidable, le (...)

  • Grappes 1.0

    23 novembre 2012 – 33 commentaires

    Présentation et nouveautés Cette version 1.0 du plugin Grappes est un portage pour SPIP 3.x. Le plugin permet de grouper des objets de SPIP dans des grappes. Les objets du core (articles, rubriques, auteurs, etc.) sont pris en charge, ainsi que (...)

  • Cycle2

    7 août 2014 – 117 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)

  • LinkCheck : vérificateur de liens

    13 février 2015 – 128 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

  • Mon site affiche une page blanche ou je ne peux plus accèder à l’espace privé

    7 février 2008 – 34 commentaires

    Au secours ! « Tout à coup » votre site devient inutilisable ou inaccessible ! Comment faire ? Pourquoi ? Par où commencer ? Sans pouvoir couvrir tous les cas, cet article va essayer de vous guider rapidement vers la (...)