SPIP - Contrib

[ar] [en] [es] [fr] [it]



Accueil du site > Navigation > Menus déroulants > Plugin Menu déroulant

Un menu déroulant horizontal en plugin

samedi 16 décembre 2006, par Alexandra, Cedric Morin, L’instit. Dernier ajout vendredi 15 décembre 2006


Menu déroulant dynamique en plugin, sans limitation de niveaux de hiéarchie

Vous voulez un joli menu déroulant ?

Un joli menu qui descende dans tous les niveaux de la hiérarchie, qui ne soit pas seulement limité à deux ou trois sous-rubriques, même si la règle des trois clics reste une bonne règle de conduite, et tout cela en dynamique, ie, qui s’adaptera à vos changements de rubriques, rajout etc...


Vous voulez de plus qu’il soit full css, compliant W3C, sans tableaux, sans trop de javascript, et surtout compatible avec tous les navigateurs du marché...

Mais vous n’avez que 5 minutes pour le mettre en place, sinon, votre patron vous vire ?

Le père Noël a pensé à vous !

Installation

Téléchargement : Récupérer le zip « menu_deroulant » sur l’espace de téléchargement, ou le miroir, de spip-zone, cf. rubrique Produits finis

Mise en œuvre : Comme tous les autres plugins, cf. http://www.spip.net/fr_article3396.html

Pour installer ce plugin de menu déroulant, copier le contenu du zip dans le dossier plugins à la racine de votre site. Recopier le fichier inc-menu-deroulant.html ainsi que le fichier menu_deroulant.css dans votre dossier de squelettes. Cela vous permettra éventuellement de le personnaliser à souhaît, et surtout, de ne pas l’écraser ou le perdre lors d’une future mise à jour.

Versions inférieures à SPIP 1.9.2

Si vous êtes sur une version de SPIP antérieure à la 1.9.2, il vous faudra aussi installer le plugin jquery. La partie javascript initiale du script a en effet été réécrite en jquery pour assurer une parfaite compatibilité avec internet explorer. Au delà de la 1.9.2, il sera inutile d’installer jquery, celui-ci a été intégré au core.

Dans vos squelettes

Il faudra aussi vous assurer que votre squelette a bien dans son entête la fameuse balise #INSERT_HEAD, celle qu’on trouve dans le inc-head.html de la dist, balise permettant aux plugins d’insérer des appels javascript ou css. C’est un script PHP du plugin qui se charge d’insérer le script javascript pour internet explorer et la feuille de style. Par conséquent, même si le javascript a été désactivé, le menu fonctionnera sur tous les navigateurs sauf ie, qui lui devra se servir du petit script en jquery.

Insérer la noisette de menu déroulant où bon vous semble dans votre squelette (généralement en haut de page, en dessous du bandeau) par un inclure :

<INCLURE{fond=inc-menu-deroulant}{lang}>

Exemple

L’auteur de plugin nous fournit par ailleurs un squelette sommaire de la dist avec le menu déroulant en inclure, à titre d’exemple, pour que vous vous rendiez compte de ce que ca peut donner.

C’est le fichier menuder_sommaire_demo.html.
Pour l’appeler et le tester
http://www.monsitespip.net/spip.php...

Et voilà le tour est joué !

Personnalisation

Pour personnaliser votre menu, vous pouvez modifier quelques lignes du fichier menu_deroulant.css :

la ligne : [*border: solid #eda;*] sous [*#nav, #nav ul*] vous permet de régler la couleur des lignes entourant le menu.

La ligne [*background: #eda;*] sous [*#nav li:hover, #nav li.sfhover *] vous permet de régler la couleur de fond des items survolés.

Toutefois, notez que pour les changements de CSS, il faut y aller tout doucement, notamment à cause de l’éternelle problématique internet explorer. La feuille de style a été calibrée de façon très précise. Donc, pour plus de sûreté, nous vous conseillons de ne changer que les couleurs, ou de modestes petites choses, ca vous évitera bien des déconvenues. Ne pas trop jouer, à moins d’être un pro de la css qui connaît tous les mauvais tour d’internet explorer, sur les padding, les margin, les positions et sur les tailles etc...

Pour en savoir plus

Pour les petits curieux qui voudraient savoir d’où l’auteur a puisé son inspiration pour cette merveille de petit plugin, allez voir sur le site de htmldog. Il a remplacé toute sa partie javascript en jquery, et surtout trouvé la boucle qu’il fallait pour le rendre dynamique et non plus simplement statique.

On ne peut s’empécher de mettre ici cette boucle récursive, tant elle est belle et bien pensée :

Toute l’originalité de ce plugin est d’avoir trouvé la boucle qu’il fallait avec le meilleur exemple de menu déroulant qu’on puisse trouver. En effet, ceux d’Alsa Création, par exemple, utilisaient les listes de définitions et se limitaient à deux niveaux. Cf http://css.alsacreations.com/xmedia....

On pourrait très certainement aussi arriver à pluginiser les modèles de menus déroulants proposés par CSSplay.


Répondre à cet article

  • Un menu déroulant horizontal en plugin

    17 décembre 2007 18:07, par mailou

    Bonjour,

    Après mon message précédent, je viens de tester avec IE7 et c’est la catastrophe, le site trois colonne se retrouve avec la colonne centrale complètement descendue.

    Puis-je avoir de l’aide, merci.

    Répondre à ce message

    Retour au début des forums

  • Un menu déroulant horizontal en plugin

    17 décembre 2007 15:31, par mailou

    Bonjour,

    Voilà, je cherchais une solution pour un menu déroulant, mais vertical, j’en ai essayé je ne sais plus combien, mais je suis si mauvais en css que je n’ai pas réussi.

    Tellement décidé à avoir ce type de menu que j’ai décidé d’installer ce plugin en me disant "je dois pouvoir le bidouiller".

    J’ai été surpris de n’avoir pas eu à le faire, il m’a suffit de l’installer à la place de l’ancien menu, dans un cadre, et il fonctionne à merveille.

    Je n’ai rencontré qu’un problème, quand on développe le nombre de rubriques, si il y a cadre dessous, il n’est pas poussé avec le développement des menus, j’ai été obligé de rajouter des <br><br> c’est pas trés propre.

    Quelqu’un a un conseil ?

    En tout cas, merci pour ce plugin, il est génial.

    Répondre à ce message

    Retour au début des forums

  • Ca ne fonctionne pas sous IE 7 ???

    15 juin 2007 15:39, par c-line

    Bonjour, mon menu ne fonctionne pas sous IE 7 :
    - parfois il se déroule mais reste déroulé
    - parfois il ne se déroule carrément pas... Gênant dans ls deux cas.

    Quelqu’un a-t-il une explication voire une solution à proposer ???

    Merci

    Répondre à ce message

    • Ca ne fonctionne pas sous IE 7 ??? 10 juillet 2007 14:36, par Christophe Noisette

      Bonjour j’ai aussi un problème avec le menu déroulant et Internet Explorer. Je suis en spip 1.9.2 donc a priori, si j’ai bien lu les autres commentaires, je n’ai pas besoin d’ajouter JQuery car il est intégré dans le noyau de spip. Aucun probleme autrement sous Safari. Le site : www.lairederien.net, le menu déroulant n’est pas installé sur la page d’accueil, mais sur les pages rubrique et article. Une idée ? une piste à creuser. Je vous remercie et bravo pour ce plugin, car quand il marche, c’est vraiment trop fort ;) Amicalement Christophe

      Voir en ligne : L’aire de rien

      Répondre à ce message

    • Ca ne fonctionne pas sous IE 7 ??? 4 septembre 2007 19:10, par Boubou

      En passant d’IE6 à IE7, j’ai eu ce bug. Les parties développées du menu restaient déroulées.

      Bon, il faut rajouter le morceau de JS dispo sur le site htmldog.

      Dans "menu_deroulant.js", à la suite.

      /*
      *
      Cette partie doit être ajoutée pour la compatibilité avec IE7
      *
      */

      sfHover = function() {
              var sfEls = document.getElementById("nav").getElementsByTagName("LI");
              for (var i=0; i<sfEls.length; i++) {
                      sfEls[i].onmouseover=function() {
                              this.className+=" sfhover";
                      }
                      sfEls[i].onmouseout=function() {
                              this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
                      }
              }
      }
      if (window.attachEvent) window.attachEvent("onload", sfHover);

      En espérant que cela aide.

      Répondre à ce message

    Retour au début des forums

  • Un menu déroulant horizontal en plugin

    23 octobre 2007 16:03, par MichelD

    Bonjour, Sous spip 1.9.2 squelettes Alternatives le menu déroulant "passe" dessous l’image du haut. Ben, j’aimerai bien pouvoir la faire passer au-dessus.

    Une idée ?

    Merci

    MichelD

    Répondre à ce message

    • Un menu déroulant horizontal en plugin 10 décembre 2007 14:16, par YBourgeois

      Bonjour, j’ai eu le même soucis que toi. J’ai eu la réponse dans la liste.

      Dans les paramètres du code de "menu_deroulant.css", il te faut rajouter dans le code suivant après, en fin de liste des paramètres pris entre { et } :

      #nav-container...{
      ....
      z-index=50
      }

      Insèrer un z-index élevé : ex : z-index=50 Je te suggère de le mettre à 100 pour voir, puis si c’est ok de descendre un peu. J’espère t’avoir un peu aidé.

      Répondre à ce message

    Retour au début des forums

  • Un menu déroulant horizontal en plugin

    1er décembre 2007 12:44, par carlès Totap

    salut, et grand bravo pour ton menu

    je suis tout nouveau avec le CMS SPIP et j’éssais depuis 1h d’intégrer ce menu juste après la bannierre d’un css que j’ai télécharger sur le web. Aucun menu ne s’affiche, pourtant j’ai suivi à la lettre les étapes nécessaire pour. j’ai aussi éssayé les memes étapes sur la page sommaire du site spip que j’ai installé en local mais le menu s’affiche tout en vertical. s’il vous plait aidez- moi je ne pige rien à ce probleme.

    Merci d’avance

    Répondre à ce message

    Retour au début des forums

  • Un menu déroulant horizontal en plugin

    14 novembre 2007 16:11, par Jmarco

    Bonjour, bravo pour ce menu, je le teste en ce moment en local sur un spip 1.9.2c, çà marche bien sauf que je n’ai pas la petite flêche en face des sous rubriques.... ???

    voici le code que j’ai copier plus bas

    <div id='nav-container'>
    <B_rubriques>
    <ul id="nav">
           <ul>
           <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
                   <li>
                           <a href="#URL_RUBRIQUE" class="intitule">[(#TITRE|supprimer_numero|couper{80})]</a>
                           <B_sous_rubriques>
                           <ul>
                                   <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
                                           <li>
                                           <a href="#URL_RUBRIQUE" <BOUCLE_test_sousrub(RUBRIQUES){id_parent}{0,1}>class='daddy'
    </BOUCLE_test_sousrub>>[(#TITRE|supprimer_numero|couper{80})]</a>
    <BOUCLE_re(BOUCLE_sous_rubriques)></BOUCLE_re></li>                                      
                                   </BOUCLE_sous_rubriques>
                                   ---------------
                                   <BOUCLE_articles_ss_rub(ARTICLES) {id_rubrique} {par date} {inverse}>
                                           <li>
                      <a href="#URL_ARTICLE" <BOUCLE_test_artssrub(ARTICLES){id_rubrique}{0,1}>class='daddy2'
    </BOUCLE_test_artssrub>>[(#TITRE|supprimer_numero|couper{80})]</a></li>
                                   </BOUCLE_articles_ss_rub>
                           </ul>
                           </B_sous_rubriques>
                           <ul>
                                   <BOUCLE_articles(ARTICLES) {id_rubrique} {par date} {inverse}>
                                           <li>
                      <a href="#URL_ARTICLE" <BOUCLE_test_sousart(ARTICLES){id_rubrique}{0,1}>class='daddy2'
    </BOUCLE_test_sousart>>[(#TITRE|supprimer_numero|couper{80})]</a></li>
                                   </BOUCLE_articles>
                           </ul>                      
                           <//B_sous_rubriques>
                   </li>
           </BOUCLE_rubriques>
           </ul>
    </ul>
    </B_rubriques>
    </div>

    Que puis-je faire ?

    merci Jmarco

    Répondre à ce message

    • Un menu déroulant horizontal en plugin 14 novembre 2007 18:49, par Jmarco

      Je me réponds...

      il fallait changer la class="daddy" de place, et la mettre juste après le href="#URL_RUBRIQUE", ce qui donne :

      <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
                                             <li>
                                             <a href="#URL_RUBRIQUE" class="daddy"<BOUCLE_test_sousrub(RUBRIQUES){id_parent}{0,1}>
      </BOUCLE_test_sousrub>>[(#TITRE|supprimer_numero|couper{80})]</a>
      <BOUCLE_re(BOUCLE_sous_rubriques)></BOUCLE_re></li>                                      
                                     </BOUCLE_sous_rubriques>

      çà marche mais j’aimerais bien comprendre pourquoi, et aussi pourquoi il y a le "daddy2" au niveau des articles ??

      amicalement, Jmaco

      Répondre à ce message

    Retour au début des forums

  • Un menu déroulant horizontal en plugin

    1er octobre 2007 22:11, par phil.cado

    Bonjour, Je souhaite créer un nouveau site en Spip pour mon club de plongée. Mon hébergeur ne me permettant normalement pas le php, je l’héberge pour l’instant chez free dans mes pages perso. J’ai créé, un peu à la va-vite je l’accorde des rubriques, sous rubriques et quelques articles. J’aimerais bien un menu horizontal, et j’ai alors trouvé la page consacrée à "menu déroulant" j’ai décompressé le .zip, copié les fichiers grâce à Filezilla dans un dossier "plugins" que j’avais créé. Ces opérations se sont bien passées puisque dans le menu "configuration\Gestion des plugins" je peux activer le plugin "menu déroulant". Je n’ai pas de squelette personnalisé, donc si j’ai bien compris mon spip appelle le squelette contenu dans "/dist". J’ai néanmoins déposé une copie dans le dossier "/squelettes" des fichiers "inc-menu-deroulant.html" et "menu_deroulant.css". Hélas, pas de menu déroulant Quelqu’un sait-il pourquoi ? Je précise que mon site se trouve là : http://phil.kdo.free.fr Merci de votre aide Philippe

    Répondre à ce message

    • Un menu déroulant horizontal en plugin 1er octobre 2007 22:38, par linstit

      Ben oui, il manque une opération : relis ce passage :

      "Insérer la noisette de menu déroulant où bon vous semble dans votre squelette (généralement en haut de page, en dessous du bandeau) par un inclure :

      "

      Répondre à ce message

    Retour au début des forums

  • Quand on imprime la page...

    25 septembre 2007 20:07, par SPQR

    Toute l’arborescence du menu est imprimée verticalement... Il y a-t-il un moyen de corriger cela ?

    Sinon, un très bon plugin même si je me suis un peu arraché les cheveux avec le CSS...

     :-)

    Répondre à ce message

    Retour au début des forums

  • Un menu déroulant horizontal en plugin

    2 août 2007 10:25, par Paul

    Hello,

    Comment y ajouter les articles de la rubrique de premier niveau, j’ai bien tenté ceci :

    <div id='nav-container'>
    <B_rubriques>
    <ul id="nav">
            <ul>
            <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
                    <li>
                            <a href="#URL_RUBRIQUE" class="intitule">[(#TITRE|supprimer_numero|couper{80})]</a>
            <B_articles>
                                    <ul>
                                    <BOUCLE_articles(ARTICLES) {id_rubrique} {par num titre, titre}>
                                                    <li>
                                                    <a href="#URL_ARTICLE">[(#TITRE|supprimer_numero)]</a>
                                                    </li>
                                                    </BOUCLE_articles>
                                            </ul>
                            </B_articles>               
                    <B_sous_rubriques>
                            <ul>
                                    <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
                                            <li>
                                            <a href="#URL_RUBRIQUE" <BOUCLE_test_sousrub(RUBRIQUES){id_parent}{0,1}>class='daddy'</BOUCLE_test_sousrub>>
    [(#TITRE|supprimer_numero|couper{80})]
    </a>
    <BOUCLE_re(BOUCLE_sous_rubriques)></BOUCLE_re>        </li>
                                    </BOUCLE_sous_rubriques>
                            </ul>
                            </B_sous_rubriques>
                            </li>
            </BOUCLE_rubriques>
            </ul>
    </ul>
    </B_rubriques>
    </div>

    Mais il me superpose les articles et les rubriques ! Un problème de classe de style je supose, mais j’ai déjà tenté pas mal de choses sans résultat !

    Une idée, un conseil, je suis preneur !

    Merci Paul

    Répondre à ce message

    • Un menu déroulant horizontal en plugin 20 septembre 2007 10:42, par lbpr23b

      Voila, une petite modif qui permet d’afficher les articles des rubriques ainsi que ceux des sous rubriques. Visible sur www.cyberlcs.com

      Répondre à ce message

      • Un menu déroulant horizontal en plugin 20 septembre 2007 10:51, par lbpr23b

        Avec les balises code, c’est mieux !

        <div id='nav-container'>
        <B_rubriques>
        <ul id="nav">
                <ul>
                <BOUCLE_rubriques(RUBRIQUES) {racine} {par num titre, titre}>
                        <li>
                                <a href="#URL_RUBRIQUE" class="intitule">[(#TITRE|supprimer_numero|couper{80})]</a>

                                <B_sous_rubriques>
                                <ul>
                                        <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, titre}>
                                                <li>
                                                <a href="#URL_RUBRIQUE" <BOUCLE_test_sousrub(RUBRIQUES){id_parent}{0,1}>class='daddy'
        </BOUCLE_test_sousrub>>[(#TITRE|supprimer_numero|couper{80})]</a>
        <BOUCLE_re(BOUCLE_sous_rubriques)></BOUCLE_re></li>                                       
                                        </BOUCLE_sous_rubriques>
                                        ---------------
                                        <BOUCLE_articles_ss_rub(ARTICLES) {id_rubrique} {par date} {inverse}>
                                                <li>
                           <a href="#URL_ARTICLE" <BOUCLE_test_artssrub(ARTICLES){id_rubrique}{0,1}>class='daddy2'
        </BOUCLE_test_artssrub>>[(#TITRE|supprimer_numero|couper{80})]</a></li>
                                        </BOUCLE_articles_ss_rub>

                                </ul>
                                </B_sous_rubriques>
                                <ul>
                                        <BOUCLE_articles(ARTICLES) {id_rubrique} {par date} {inverse}>
                                                <li>
                           <a href="#URL_ARTICLE" <BOUCLE_test_sousart(ARTICLES){id_rubrique}{0,1}>class='daddy2'
        </BOUCLE_test_sousart>>[(#TITRE|supprimer_numero|couper{80})]</a></li>
                                        </BOUCLE_articles>
                                </ul>                       
                                <//B_sous_rubriques>
                        </li>
                </BOUCLE_rubriques>

                </ul>
        </ul>
        </B_rubriques>
        </div>

        Répondre à ce message

    Retour au début des forums

  • Un menu déroulant horizontal en plugin : pb IE 6

    14 septembre 2007 14:45, par mp

    Bonjour

    j ai installé le plugin, sur une v spip 1.9.2b

    ça fonctionne sous IE 7 mais erreurs sous IE 6 !!!!

    sous IE6 je n ai pas le surlignement au survol ni le developpement de la rubrique au survol toujours !

    j avoue ne pas bien comprendre . de plus je ne suis pas à l aise avec les CSS , et debute avec spip

    j ai recopié les fichiers dans des repertoires du squelette car le "plugin" ne s affichait pas dans l interface de spip du menu configuration/plugin l important : c’est que ça marche

    ai lu les articles postés sur ce forum - et comme je suis en v 19.2b donc sup a 1.9.1 je n ai pas besoin d installer un module jquery

    suis allee voir si il existait bien dans dist/javascript : oui, il y est en v 1.1

    dois je rajouter qqchose ? comment faire pour avertir un utilisateur que sa version est ancienne et qu une meilleure visu sera avec un upgrade de ce dernier ?

    MERCI d avance !

    MERCI pour les contributions et les aides !!

    mp

    Répondre à ce message

    Retour au début des forums

  • Je viens de l’installer sur une 1.9.2, ça marche bien tant qu’on ne depasse pas trois sous-niveau. Après tous les sous menus se déroulent en même temps... Est-ce que je suis le seul ?

    Répondre à ce message

    Retour au début des forums

0 | 25



Suivre la vie du site RSS 2.0 | Plan du site | Espace privé | Charte et fonctionnement SPIP-Contrib | SPIP | L'autre.net