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
Bonjour,
quelqu’un(e) sait où régler le « délai » de disparition des sous-menus ? j’ai cherché dans les fichiers javascripts du plugin mais je n’ai rien trouvé, je ne maîtrise pas assez le js pour ça...
merci par avance et félicitations pour ce plugin qui m’a fait gagné beaucoup de temps
Nicolas
Répondre à ce message
Bonjour,
super plugin et encore bravo aux auteurs.
Je l’ai mis en oeuvre sur mon intranet en test. Fonctionne impécable avec Firefox et safari, par contre avec IE6 j’ai une erreur qui dit : « jQuery indéfini ».
N’étant pas un spécialiste, et après recherche sur le net, je reste sans comprendre cette erreur.
Si vous avez une piste je suis fort interréssé.
Merci d’avance.
Je me réponds, je cherchais compliqué ... En installant le plugin jQuery je n’ai plus le problème avec IE6.
Désolé pour le bruit.
Répondre à ce message
Retour après installation
J’ai installé ce menu déroulant horizontal. Il faut bien plus de 5 minutes (et je ne compte pas les téléchargements). Voici toutes les actions que j’ai faites pour qu’il fonctionne.
1- installer le plugin -jQuery (inutile avec Spip1.9.2)
2- ajouter la balise #INSERT_HEAD dans les en-têtes de pages (heureusement qu’avec les noisettes, je ne l’ai à faire qu’une seule fois !)
3- installer le plugin menu-deroulant
4- tester en appelant par http://[www.domaine.suf]/spip.php ?page=menuder_sommaire_demo
5- appeler la noisette du menu déroulant dans les squelettes où elle est souhaitée (même remarque que ci-dessus : une seule noisette à modifier pou moi).
6- tester cette insertion en visitant le site.
Et je n’ai pas modifié la présentation (couleurs) pour l’instant.
La balise #INSERT_HEAD fonctionne parfaitement en même temps qu’un appel d’une applet js (ouf !).
Il est indispensable de se réserver, à droite un espace pour l’affichage des sous-rubriques. J’ai résolu ce problème en affichant la partie centrale de ma page après la colonne de droite.
Pour ne pas avoir le b... bazar dans le menu, il vaut mieux des titres plutôt courts (j’ai dû en modifier quelques-uns).
Conclusion : avec un peu d’attention (et surtout de calme), ça fonctionne au premier coup ! Donc, bravo au(x) concepteur(s)/trice(s) et au(x) vulgarisateur(s)/trice(s).
Bonjour,
Quelque peu débutant sur spip, j’ai installé les deux plugins nécessaires au fonctionnement du menu déroulant horizontal. Le site tourne sur spip 1.9.1, avec le squelette BLIP. La balise #INSERT_HEAD est présente mais je n’arrive pas à comprendre où je dois installé la ligne de commande , doit-on placer cette ligne de commande dans un fichier particulier et lequel ? La page démo s’affiche mais je n’ai plus de feuille de style valide, au secours !!!
merci d’avance pour votre aide...
Répondre à ce message
bon ok ca fait un moment que je n’ai pas spipé ...
J’avais bien testé 2 ou 3 plugins sur la 1.9
Mais la je suis perdu y a une 1.9.2 introuvable, du coup j’ai fait avec ma 1.9 et j’ai installé ce plugin fort sympathique ... J’ai fait avec le plugin supplémentaire a installé
bon ok je suis pas pro des css, mais pourquoi le css qui est dans le dossier plugin y veut pas trouver le header.inc.html ou y a le super menu déroulant ...
La je calle
pouvez vous m’aider ?
j’ai trouvé tout seul :-)
le temps de se remettre dedans
merci pour ce beau plugin
Répondre à ce message
Super le menu
Seul bemol, il ne marche pas sous IE6, probleme de css trop compliqué
Je crois que ca « li.sfhover » il ne comprend pas
Si quelqu’un pouvait éclairer ma lanterne ce serrai vraiment génial :p
Répondre à ce message
Chouette ; j’ai plus qu’a fire la modif affichage en fonction d’un mot clef.
Répondre à ce message
Simple et efficace !!
Effectivement installé en mois de 5 minutes, sur une 1.9.1.
J’ai du tout de meme effacer le cache.
J’aurai 2 suggestions à rajouter dans la wishlist :
- Ajouter la balise #EXPOSER qui permet de marquer la rubrique dans laquelle on se trouve.
- Ajouter un parametre permettant de limiter le menu a une rubrique (et donc automatiquement limité aux sous-rubriques et articles contenus dans cette rubrique) C’est surement beaucoup plus compliqué a faire, mais cela serait terriblement efficace.
C’est une question qui est importante pour moi aussi ; je suis en train de construire un site ou seulement une partie des articles ont des traductions. C’est pourquoi je ne veux afficher que la section principale (rubrique 1 dans mon cas) avec les articles originaux.
Ce que j’ai fait pour réaliser cela : dans inc-menu-deroulant.html (boucle rubriques) j’ai simplement changé racine par id_parent=1 et cela semble marcher.
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 :
|
