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
Juste un petit comment pour remercier et dire que ce plugin fonctionne très bien sous 1.9.2.
Personnalisable à souhait grâce à sa css. Que du bonheur ! Merci les chef(e)s
Répondre à ce message
Bonjour,
Je souhaiterais que les noms des rubs lorsqu’ils sont un peu long
apparaissent sur une seule ligne, sans retour.
Je cherche bien dans le CSS, mais pour l’instant rien d’efficace.
Si quelqu’un a solutionner ce pb, minime j’imagine,
merci d’avance.
Scal
Je me réponds, mais ce n’est pas la solution.
Si je place mon nom de rub entre les balises obsolètes
ça marche, le nom est bien sur une seule ligne, mais il chevauche le nom de la rub suivante... ; (
Ma question est toujours pas résolue...
Répondre à ce message
Bonjour,
j’ai un soucis de compatibilité de ce plugin avec le plugin diaporama_innerfade (javascript également) : le menu se place en dessous du diaporama et devient inutilisable.
J’ai tenté de rajouter un z-index:2 ; dans le css du menu et z-index:1 ; dans le css du diaporama mais rien n’y fait : une idée ?
Merci d’avance !
Répondre à ce message
Le menu marche super sous firefox mais absolument pas sous IE6. cela vient forcément du code CSS car le code d’origine marche à peu près, seulement j’en ai récup un sur le site proposé, mais les sous rubriques ne se déroulent pas... Voici mon code CSS, si ça peut aider :
#nav
float:left ; width:100% ; font-family : verdana, arial, sans-serif ; font-size:11px ;
background:white ;
border-top:3px solid #4c597f ; border-bottom:3px solid #4c597f ;
margin:0 0 20px 0 ; /* for this demo only */
#nav ul
padding:0 ;margin:0 ;list-style-type:none ;
#nav ul li
float:left ; position:relative ; background:url(images/divider1.gif) no-repeat top right ;
#nav ul li a, #nav ul li a:visited
float:left ; display:block ; text-decoration:none ;color :#ddf ; padding:0px 16px ; line-height:25px ; height:30px ; border-bottom:3px solid #fff ;
#nav ul li:hover width:auto ;
#nav ul li a:hover border-color :#c00 ; color :#f88 ;
#nav ul li:hover a border-color :#c00 ; color :#f88 ;
#nav ul li ul
display : none ;
#nav table
margin:0 ; border-collapse:collapse ; font-size:11px ; position:absolute ; top:0 ; left:0 ;
/* specific to non IE browsers */
#nav ul li:hover ul
display:block ;position:absolute ;top:32px ;margin-top:1px ; left:0 ;width:154px ;border-bottom:1px solid #000 ;
#nav ul li:hover ul.endstop
left :-92px ;
#nav ul li:hover ul li ul
display : none ;
#nav ul li:hover ul li a
display:block ;background :#fff ;color :#000 ;height:auto ;line-height:15px ;padding:4px 16px ; width:120px ; border:1px solid #000 ; border-bottom:0 ;
#nav ul li:hover ul li a.drop
background :#ccd url(images/bullet1.gif) no-repeat 3px 8px ;
#nav ul li:hover ul li a:hover
color :#000 ; background : #ccd url(images/bullet1.gif) no-repeat 3px 8px ;
#nav ul li:hover ul li a:hover.drop
background : #ccd url(images/bullet1.gif) no-repeat 3px 8px ;
#nav ul li:hover ul li:hover ul
display:block ; position:absolute ; left:153px ; top :-1px ;
#nav ul li:hover ul li:hover ul.left
left :-153px ;
/* specific to IE5.5 and IE6 browsers */
#nav ul li a, #nav ul li a:visited height:33px ;
#nav ul li a:hover ul
display:block ;position:absolute ;top:30px ; t\op:33px ; background :#fff ;left:0 ; border-bottom:1px solid #000 ;
#nav ul li a:hover ul.endstop
left : -92px ;
#nav ul li a:hover ul li a
display:block ;background :#fff ;color :#000 ; height:1px ; line-height:15px ; padding:4px 16px ; width:154px ; w\idth:120px ; border:1px solid #000 ; border-bottom:0 ;
#nav ul li a:hover ul li a.drop
background :#ccd url(images/bullet1.gif) no-repeat 3px 8px ; padding-bottom:4px ;
#nav ul li a:hover ul li a ul
visibility:hidden ; position:absolute ; height:0 ; width:0 ;
#nav ul li a:hover ul li a:hover
color :#000 ; background : #ccd url(images/bullet1.gif) no-repeat 3px 8px ;
#nav ul li a:hover ul li a:hover.drop
background : #ccd url(images/bullet1.gif) no-repeat 3px 8px ;
#nav ul li a:hover ul li a:hover ul
visibility:visible ; position:absolute ; top:0 ;color :#000 ; left:153px ;
#nav ul li a:hover ul li a:hover ul.left
left :-153px ;
Moi j’ai résolu le problème d’IE <=6 avec les « conditional comments » ; ça marche très bien :
Répondre à ce message
Salut,
J’aimerais que lorsque l’on se trouve dans un secteur, le background de mon secteur courant ai une couleur différente des background des autres secteurs. Afin que le visiteur sache ou il se trouve.
Je suppose qu’il faut jouer avec le code Spip du menu et les css mes je n’en sais pas plus. Pouvez vous me dire comment faire ?
P.S : Merci pour ce menu déroulant. Le l’utilise déjà pour deux de mes sites. Les premières modifications n’ont pas été faciles mais ca commence à venir :)
Répondre à ce message
Bravo et merci pour cet excellent plugin.
La boucle est aussi simple que souple ; je l’ai modifiée pour contrôler l’affichage des items en fonction de mots-clés affectés aux rubriques (rendre des rubriques invisibles par exemple) et tout marche à merveille.
On a aussi des possibilités assez grandes pour modifier les styles apparemment sans que ça casse.
Répondre à ce message
Je souhaite rajouter un ou plusieurs liens vers d’autres pages html ne faisant pas partie de spip, comment je procède pour les inclurent dans ce fabuleux menu ??
Exemple, je souhaite rajouter un lien vers www.monsitespip.com/forum
Merci et bonne continuation
Répondre à ce message
Bonjour,
Merci au père noël pour ce menu qui fonctionne parfaitement, sauf que...
... avec 4 niveaux de sous rubriques, les dernières ne sont pas faciles à « attraper », savez vous si il est possible de laisser le menu ouvert (déplié) même si la souris est en dehors de la case. Je n’ai pas trouvé dans le java script un « onmouseover » ou un « onmouseout »...
Merci
Répondre à ce message
Bonjour
Le plugin fonctionne plutôt bien pour un menu horizontal effectivement. Par contre pour un menu vertical, auriez vous une solution svp ?
Merci pour votre réponse :-)
Répondre à ce message
salut,
j’ai plusieurs problèmes avec ce menu, tous sous firefox et safari, pas de problèmes avec ie.
j’ai mis le inclure menu_deroulant dans une div, suivie d’une autre div qui affiche des images de différentes tailles (donc height : auto ;). Les deux font partie d’une une autre div (donc height : auto ; aussi) :
css associé :
voici le css du menu :
Premier problème :
le menu déborde de la div menu en bas, ce qui entraine un espace d’une dizaine de pixels au dessus (couleure verte). En plus, la balise menu_box semble s’agrandir en proportion et créé elle aussi un espace d’une dizaine de pixels. La div menu_bottom ne semble pas être affectée.
en retirant le inclure, les div retrouvent leur taille normale
Deuxième problème :
Un décalage a gauche du menu en entier d’au moins 50 pixels, le même décalage à l’intérieur des menus déroulés.
regardez plutot par vous même (essayez avec ie pour voir le résultat demandé)
j’ai coloré les div pour bien se rendre compte du problème
site test
Si quelqu’un a une réponse à ce problème, dite le moi, merci d’avance.
je me répons a moi même,
j’avais trop modifié le css, du coup il y avait des incohérences qui créaient les erreurs.
tout fonctionne bien maintenant
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 : |