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.
Discussions par date d’activité
57 discussions
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
pour le message du 1er decembre, j’ai oublié de mentionner que j’utilise la version 1.9.2 de spip.
merci
Peux-tu donner une url ou voir ton squelette ?
Répondre à ce message
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
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 :
çà 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
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
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
Tu peux essayer de voir les autres menus proposés sur spip-contrib : http://www.spip-contrib.net/-Menus- pour trouver des solutions de menus verticaux. Attention, ce ne sont pas des plugins, et la mise en place est sensiblement plus technique.
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
qu’il aime pas, dans :
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é :
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 :
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.
Suivre les commentaires : |