Menu déroulant horizontal

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

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. https://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?page=menuder_sommaire_demo

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 :

<B_rubriques>
<ul>
<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>
</ul>
</B_sous_rubriques>
</li>
</BOUCLE_rubriques>
</ul>
</ul>
</B_rubriques>

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.

Discussion

57 discussions

  • 2
    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

  • 2

    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

    • 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

    • Bonjour,
      voici le résultat en ligne :
      http://www.le-clapotis.net/sculpteurs3/

      j’ai placé ce menu uniquement sur la page sommaire de mon site.

      Amicalement, jmarco.

    Répondre à ce message

  • 1
    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

    • 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

  • 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

  • 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

  • 1

    Bonjour,

    Ce plugin est vraiment très pratique et très bien pensé. Il est vraiment quasiment parfait pour les non developpeurs (graphiste bidouilleur) comme moi...
    J’aurais néamoins quelques remarques et questions, si des spipeurs pouvaient me répondre ce serait fantastique.

    1 : J’aurais voulu savoir s’il était possible d’afficher des articles également (un peu comme dans l’exemple de dhml dog, ou les rubriques cotoient les liens vers les pages d’articles).

    2 : quelqu’un a t’il réalisé ce menu en vertical ?
    J’ai vu que cela était réalisable sur le site htmldog : http://www.htmldog.com/articles/suckerfish/dropdowns/example/vertical.html

    3 : Un des menus de cssplay est vraiment très bien.
    http://www.cssplay.co.uk/menus/flyout_4level.html
    D’après vous est ce possible de réaliser en spip un tel menu déroulant ?

    Emmanuel
    bidouilleur spip

    Répondre à ce message

  • IE 6, Firefox 2 sont parfaits... mais Opéra 9.1 affiche les items en une colonne d’une largeur de 1 lettre.
    Je vous raconte pas la gueule du menu !

    C’est le

    left : -999em ;

    qu’il aime pas, dans :

    #nav li ul {
        position: absolute;
        left: -999em;
        height: auto;
        width: 14.4em;
        w\idth: 13.9em;
        font-weight: normal;
        border-width: 0.25em;
        margin: 0;
    }

    Du coup, j’ai pas trop envie de mettre en ligne ma page.
    Des idées ?
    Arnaud

    Répondre à ce message

  • Super plugin, est-ce qu’on peut le transformer en menu vertical facilement ?
    merci d’avance

    Répondre à ce message

  • Bonjour,

    Le plugin fonctionne bien cependant le menu des sous rubriques se cache derriere les autres elements de ma page dans le sommaire
    y a t il une astuce ??
    merci de votre réponse

    Répondre à ce message

  • Bonjour et félicitations, je recherchais ce plugin avec impatience.

    J’ai des rubriques avec des articles et des rubriques sans articles composées de sous-rubriques avec des articles.

    Je souhaite afficher toutes les rubriques contenant le mot clé “menu-entete” avec comme sous-menu : les articles dans le premier cas et les sous-rubriques sans les articles associés dans le second.

    voici le code utilisé :

    <!-- inc-menu-tete.html ->
    
    <BOUCLE_secteurs(RUBRIQUES){racine}{lang}>
    
    <B_rubriques>
    	<ul id="nav">
    	   <ul>
    			<li><a href="#URL_SITE_SPIP/"><:mgs_accueil:></a></li>
    		
    	<BOUCLE_rubriques(RUBRIQUES) {id_secteur} {titre_mot=menu-entete}{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" >[(#TITRE|supprimer_numero|couper{80})]</a><BOUCLE_re(BOUCLE_sous_rubriques)></BOUCLE_re>	</li>
    				</BOUCLE_sous_rubriques>
    			</ul>
    			</B_sous_rubriques>
    			
    				<B_articles>
    					<ul>
    						<BOUCLE_articles(ARTICLES) {id_rubrique} {par date} {inverse}>
    						<li>
    							<a href="#URL_ARTICLE">#TITRE</a>
    						</li>
    						</BOUCLE_articles>
    					</ul>
    				</B_articles>
    			
    			<//B_sous_rubriques>
    				
    		</li>
    	</BOUCLE_rubriques>
    	</ul>
    </ul>
    </B_rubriques>
    </BOUCLE_secteurs>
    </div>
    
    <!-- /inc-menu-tete.html -->

    J’ai inséré la boucle “article” dans la boucle "sous-rubrique" au niveau du Code HTML alternatif entre /B_n et //B_n.

    Malgré celà, les titres des articles apparaissent quand-même pour les rubriques ayant des sous-rubriques.

    Une idée ???

    Par avance, merci et bonne continuation.

    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