SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

279 Plugins, 195 contribs sur SPIP-Zone, 70 visiteurs en ce moment

Accueil > Navigation > Menus réactifs > Menu déroulant hiérarchique > Menu déroulant horizontal

Menu déroulant horizontal

16 décembre 2006 – par Alexandra, Cedric Morin, L’instit – 102 commentaires

18 votes

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?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 :

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.

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 27 septembre 2013 à 13:45, par lyc nicoli En réponse à : Menu déroulant horizontal

    J’utilise le SPIP 2.1.0

    Quels sont les fichiers qu’il faudra modifier pour passer d’un sommaire à la verticale droite à un menu de navigation placé en haut du site à l’ horizontal

    Merci

    Répondre à ce message

  • Le 3 octobre 2011 à 21:43, par johnroche En réponse à : Menu déroulant horizontal

    La dernière version 0.1.0 n’est plus compatible avec spip SPIP 2.1.11 [18566]

    Répondre à ce message

  • Le 11 juin 2011 à 22:41, par BERNARDS En réponse à : Menu déroulant horizontal

    Bonjour,

    La version compatible avec Spip 2 tant attendue est-elle sur le point d’être publiée ?

    Répondre à ce message

  • Le 21 mai 2009 à 16:35, par NiKo En réponse à : Un menu déroulant horizontal en plugin

    Même question qu’Arnaud, je serais très preneur du version pour Spip2, et je n’y connais rien en plug-in pour l’adapter moi-même !

    Répondre à ce message

  • Le 28 août 2010 à 18:16, par yvon En réponse à : Un menu déroulant horizontal en plugin

    Pour changer les couleurs, ça se fait dans menu_deroulant.css (il vaut mieux en mettre une copie dans le dossier /squelettes).

    Pour la couleur de fond fixe, modifier ’background’ dans #nav, #nav ul

    Pour la couleur de survol, modifier ’background’ dans #nav li:hover, #nav li.sfhover

    Il peut aussi être nécessaire de rajouter un z-index (à 2 par ex) dans #nav-container si les blocs dépliants sont recouverts par certains blocs de la page (ça m’est arrivé).

    Enfin le plugin fonctionne nickel dans spip 2.1 car il ne contient que du spip.
    D’ailleurs si tu veux exclure des rubriques, il suffit de modifier la boucle du squelette inc-menu_deroulant.html (en en faisant là encore une copie dans /squelettes).
    Je l’ai fait en utilisant un mot-clé ’exclure_menu’ pour plus de souplesse.

    Répondre à ce message

  • Le 30 juillet 2010 à 20:03, par gaga En réponse à : Un menu déroulant horizontal en plugin

    Bonjour,

    J’ai trouvé interressant ce plugin. J’essai de modifié la couleur du lien au survol mais ça ne passe pas.
    J’aimerais savoir comment exclus certaines rubriques dans le menu ?

    Merci

    Répondre à ce message

  • Le 6 avril 2010 à 15:36, par François Daniel Giezendanner En réponse à : Un menu déroulant horizontal en plugin

    Bonjour,

    Beau travail.

    Cet excellent menu pourrait-il être adapté en version « Menu vertical » ?

    Cordialement

    FDG

    • Le 6 avril 2010 à 15:39, par François Daniel Giezendanner En réponse à : Un menu déroulant horizontal en plugin

      Bonjour,

      En ce sens, la contribution d’ Asteroiide pourrait-elle être publiée et mise à disposition sur cette page.

      Et, cerise sur le gâteau, puisqu’aujourd’hui l’ergonomie moderne en raffole, en versions :

      • Menu vertical à gauche et
      • Menu vertical à droite

      Cordialement

      FDG

    Répondre à ce message

  • Le 18 février 2010 à 20:57, par BB En réponse à : Un menu déroulant horizontal en plugin

    je débute avec spip : pouvez-vous me renseigner pour savoir dans quel fichier coller pour que ce la fonctionne ?
    merci

    Répondre à ce message

  • Le 9 février 2010 à 11:56, par Aude En réponse à : Un menu déroulant horizontal en plugin

    Bonjour

    Je viens juste de migrer un site spip de 1.9.2 vers 2.0.10 [14698] : je pensais que le plugin allait me lacher mais non.

    Il fonctionne correctement ;-)

    Merci !

    Répondre à ce message

  • Le 20 janvier 2010 à 14:16, par Philippe G. En réponse à : Un menu déroulant horizontal en plugin

    Ce plugin est-il compatible SPIP 2.0.x ? (Je préfère poser la question AVANT.... ;-) )

    Répondre à ce message

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • MediaBox

    10 mai 2010 – 413 commentaires

    Aperçu La MediaBox est une Boîte multimédia polyvalente et personnalisable. Le plugin est basé sur la librairie moderne ColorBox, qui a été enrichie et adaptée pour SPIP. Par défaut, mediabox propose 5 habillages. Il est assez facile d’en créer de (...)

  • CookieChoices

    26 septembre – commentaires

    Affiche un avertissement à l’usage des cookies en utilisant le script cookiechoices fourni par google Introduction Par défaut, SPIP est respectueux de la vie privée de ses visiteurs et ne pose pas de cookies de traçages ou publicitaires. Ce plugin (...)

  • Pages pour mobiles

    16 septembre 2012 – 47 commentaires

    Le plugin « Pages pour mobiles » est très proche de « cimobile » : comme lui, il détecte les téléphones mobiles. Par contre, il les aiguille vers des pages de squelettes correspondantes quand elles existent (et non pas vers un jeu de squelettes correspondant (...)

  • CKeditor 3.0

    4 octobre 2009 – 1166 commentaires

    CKeditor est l’évolution de l’éditeur WYSIWYG : FCKeditor, avec ce plugin vous pourrez utiliser cet éditeur à la place de l’éditeur de spip tout en laissant le choix à vos auteurs de l’éditeur qu’ils préfèrent utiliser. Attention : cet éditeur WYSIWYG (...)

  • Formidable, le générateur de formulaires

    23 janvier 2012 – 1414 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins avaient (...)