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 > Menu animé > Menu animé déroulant

Menu animé déroulant

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

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

13 votes

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

Comme ce plugin est encore tout neuf, vous seriez bien aimable de me signaler toute anomalie ou imperfection !

Le 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 (son exemple). 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 la copie modifiée dans le répertoire squelettes/css/) ou surchargée (par exemple dans la feuille perso.css). Vous serez par exemple 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/ .

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

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 : http://plugins.spip.net/menu_anime

Dernière modification de cette page le 5 février 2016

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 8 octobre à 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 !

    PNG - 65.8 ko

    Répondre à ce message

  • Le 19 septembre à 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 à 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 à 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 à 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 à 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 à 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

  • Le 28 août à 16:35, par polemil En réponse à : Menu animé déroulant

    Bonjour,
    Merci pour ce plugin.
    Mon site est en spip 3.1, j’utilise les plugins Bootstrap, Z-core, Zen garden avec le thème Cerulean, Sarka-Spip v4 et Menus. Or le menu animé n’affiche que les rubriques de 1er niveau déclarés dans Menus. Les sous-rubriques quant à elles n’apparaissent pas.
    Y a-t-il une incompatibilité avec les plugins énoncés plus haut ?
    Merci pour l’aide que vous pourrez m’apporter.
    Cordialement,
    Polemil

    Répondre à ce message

  • Le 11 juillet à 12:52, par web/ccc En réponse à : Menu animé déroulant

    Bonjour,
    Super la simplicité d’usage du fichier .less
    Par contre je cherche à supprimer l’aspect arrondi... si vous pouviez me dire où trouver ce réglage.
    Cordialement ;)

    • Le 11 juillet à 16:10, par Louis Possoz En réponse à : Menu animé déroulant

      Ça devrait être assez simple.

      Editer le fichier menu_anime.less et y reprérer tout ce qui commence par .border-radius.

      On a alors le choix le plus simple de mettre tous les rayons à 0px (i.e. .border-radius(0px); sans oublier les .border-radius-left(0px); etc.

      Le plus propre consiste à supprimer toutes les définitions de sélecteurs de type .border-radius { ... } et tous les appels à ces sélecteurs (i.e. .border-radius-left(3px); par exemple).

      Dans les deux cas, c’est juste une question de ne rien oublier.

      Ensuite, on compile le fichier modifié comme d’habitude.
      Bon courage...

    • Le 12 juillet à 11:21, par web/ccc En réponse à : Menu animé déroulant

      Merci pour les infos.
      Par contre je n’ai pas trouvé le moyen d’avoir une taille de caractères plus petite dans le menu déroulant par rapport au menu principal....cdt

    • Le 14 juillet à 06:58, par Louis Possoz En réponse à : Menu animé déroulant

      C’est typiquement le genre de petit réglage particulier que l’on met dans sa feuille de style perso.css.
      Par exemple en y ajoutant la ligne :

      1. .menu_anime ul a { font-size: 80%; }

      C’est bien pour ça que les géniaux concepteurs de spip ont créé cette feuille personnelle. :-)

    Répondre à ce message

  • Le 29 avril à 19:10, par AlainF En réponse à : Menu animé déroulant

    Bonjour et bravo pour ce plugin,

    je recherche d’où peut venir mon problème :
    Spip 3.1
    Zoundation 1.0.10
    Pas de plugins Menus, j’ai juste modifié le inclure/nav déjà présent

    Et lorsque je suis en version smartphone :
    =>le menu s’affiche sur une largeur supérieure à l’écran !

    J’ai bien indiqué dans le div parent :

     <div class="top-bar-left menu-conteneur">

    et dans l’inclure :

    <ul class="dropdown menu[ (#ENV{class})] menu_anime" data-dropdown-menu>

    Si quelqu’un voit une direction, j’ai changé pas mal de chose dans le menu_anim.css copié collé et modifié dans /squelettes/css/

    Voir le site en ligne

    Je sèche, par avance, merci

    J’ai déjà essayé Responsive nav, mais incompatible avec Zoundation, dommage aussi

    • Le 30 avril à 10:09, par Louis Possoz En réponse à : Menu animé déroulant

      Bonjour Alain,

      Ici encore, On a deux chiens sur le même os, qui se battent pour l’affichage du menu. :-)

      La feuille de style ’foundation.css’, que vous chargez après celle ’menu_anime.css’, surcharge (2 fois !) le sélecteur ’.menu > li’. La valeur de sa propriété ’display:’ passe ainsi de ’block’ à ’table-cell’ ce qui, par un habile jeu de poulies et de miroirs :-), explique votre problème.

      Bon courage.

    • Le 9 mai à 10:35, par AlainF En réponse à : Menu animé déroulant

      Bonjour Louis,
      merci pour la direction, j’ai surchargé mon menu_perso.css par

      @media screen and (max-width: 600px) {
      .menu > li  {
        clear: left;
        float: left;
              }

      ce n’est certainement pas très propre, mais ça a le mérite de donner l’affichage souhaité, voir ici en version écran < 600px.
      Cordialement, Alain

    Répondre à ce message

  • Le 1er février à 15:57, par Patrick En réponse à : Menu animé déroulant

    Bonjour,
    Merci pour ce plugin que je fais fonctionner sur une adaptation simpliste de la dist, pour le moment en local et en spip 3.1.0.
    Je l’ai habillé comme prévu, mais je coince lignes 230 à 234 de la css :

    background : url(data:image/png ;base64,

    J’ai obtenu une image base64 à partir d’un png, mais je ne parviens pas à l’adapter, elle est trop grande.
    C’est ce fond orange qui me gène, j’aurais voulu un fond gris.
    Pour le moment, j’ai supprimé tout simplement ces lignes mais je n’ai pas le burger...
    Merci pour tout conseil éventuel

    • Le 2 février à 16:18, par Louis Possoz En réponse à : Menu animé déroulant

      Bonjour,

      Vous avez mis le doigt sur une insuffisance du plugin (lignes 230 à 234).
      La nouvelle version corrige ceci (v 1.0.8).
      Je pense qu’ainsi tout rentre dans l’ordre :-)

      PS : dans ces lignes 230 à 234, les couleurs du dégradé se trouvent tout à la fin de la ligne.

    • Le 3 février à 06:17, par Patrick En réponse à : Menu animé déroulant

      Merci, je vois ça dans la journée. Je vous tiens au courant
      J’ai été obligé de désactiver le plugin, la mediabox semble être en conflit avec lui et ne marchait plus correctement.
      Une fois le plugin désactivé, j’ai laissé la css dans le squelettes, avec une copie du js dans le squelettes, tout fonctionne comme voulu.
      En distant ici sur un site d’essai où le hamburger est une image en png :
      ici
      Merci et bonne journée

    • Le 3 février à 08:07, par Patrick En réponse à : Menu animé déroulant

      Bonjour,
      C’est en place, mais l’activation du plugin semble provoquer un dysfonctionnement de la mediabox qui ne lance plus de lightbox.
      Css adapté selon vos conseil en distant, avec une adresse sur un message qui attend validation.
      Merci et bonne journée

    • Le 16 mars à 15:21, par Patrick En réponse à : Menu animé déroulant

      Bonjour,
      La dernière version n’a plus l’inconvénient de bloquer la médiabox.
      Merci.
      Bonne journée

    Répondre à ce message

  • Le 25 février à 12:46, par ignace72 En réponse à : Menu animé déroulant

    Salut à tous,

    Snif, j’ai mis à jour le greffon (1.0.10) et malheur, les belles couleurs rouge, orange on été remplacé par du gris et noir tout moche (mais c’est la mode du moche).

    Puis-je avoir les codes de couleurs CSS pour remettre comme c’était avant car les vielles versions du greffon avec les belles couleurs ne sont plus disponible ?

    Merci.

    • Le 25 février à 16:30, par Louis Possoz En réponse à : Menu animé déroulant

      Le « gris-noir tout moche » répond à une demande d’un fan qui voulait quelque chose de plus neutre que du rouge-orange criard. :-)

      Pour revenir aux anciennes couleurs, vous pouvez simplement aller « piquer » le fichier menu_anime.css sur le site dont les couleurs vous plaisent.

      Donc ici, pour le rouge-orange, vous le trouverez sur notre site de Repair Café : http://rc.agora-lln.be/sites/rc.agora-lln.be/squelettes/css/menu_anime.css.

      Et si vous voulez d’autres couleurs, vous pouvez utiliser la procédure décrite ci-dessus. Elle est relativement simple (?! :-). Elle me prend tout au plus 5 minutes pour obtenir un nouveau menu_anime.css, avec les couleurs qui me plaisent et qui sont bien adaptées à mon nouveau site.

      Les goûts et les couleurs ...

    • Le 25 février à 17:08, par ignace72 En réponse à : Menu animé déroulant

      Merci beaucoup, c’est exactement ça, super.
      En fait, j’aime ces couleurs chaudes et c’était exactement les couleurs de mon menu de mon site quand il était juste en html5 fait main avant que je mette Spip.
      Encore merci.

    Répondre à ce message

  • Le 5 février à 11:26, par yann45 En réponse à : Menu animé déroulant

    Bonjour,

    J’utilise actuellement la version 1.0.7 sous SPIP 3.1 qui fonctionne très bien. Lorsque je veux mettre à jour vers la dernière version, cela plante ma gestion des plugins qui disparaît complètement de mon espace privé !!
    Merci

    Yann

    • Le 5 février à 15:27, par Louis Possoz En réponse à : Menu animé déroulant

      Cette petite erreur aux grands effets a été corrigée dans la version 1.0.10. :-)

    • Le 5 février à 16:48, par yann45 En réponse à : Menu animé déroulant

      Merci beaucoup pour votre réactivité.

      Yann

    • Le 8 février à 07:40, par Patrick En réponse à : Menu animé déroulant

      Bonjour,
      Le dysfonctionnement de la mediabox dont j’ai pu parler dans un poste plus haut a disparu avec la version 1.0.10
      Bonne journée et merci

    Répondre à ce message

Répondre à cet article

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