Jeu de squelettes Multiflex 3 et le plugin « menus »

Ceci est une « contribution pédagogique », qui montre par l’exemple comment développer une nouvelle fonctionnalité pour SPIP.

Il s’agit d’un tutorial (pas à pas) expliquant comment mettre en route le plugin « menus » dans le squelette « Jeu de squelettes Multiflex 3 » et uniquement celui-là !
Prenez conscience que le plugin « menus » est encore à l’état de test, donc, ce qui est valable actuellement, ne le sera peut-être plus dans une prochaine version.

Un fois fait, vos menus ne se feront uniquement que via le plugin.

Pour avoir les menus fait par le plugin, dans la colonne et les horizontaux identiques, suivez les étapes de 1 à 9, mais prenez garde, à prendre le même identifiant pour les deux, sauf si, vous ne souhaitez pas les avoir identiques.

Pour avoir les menus fait par le plugin dans la colonne uniquement, suivez les étapes de 1 à 6

Pour avoir les menus horizontaux uniquement fait par le plugin, suivez les étape de 1, 7, 8 et 9

Pour toute question sur le fonctionnement du plugin, veuillez vous diriger vers le forum de celui-çi.

Lien vers le plugin « menus »

Lien vers le squelettes « Jeu de squelettes Multiflex 3 ».

1- Créez un dossier « squelettes » à la racine de votre site SPIP.

2- Dans votre dossier squelettes, vous faîtes également un dossier du nom de :
« css ».

3- Dans le dossier « squelette_multiflex3 » Vous avez un fichier qui se nomme « inc-colonne », dans ce fichier, vous avez une ligne de code :

<INCLURE{fond=noisettes/_navigation/vertical/rubriques_soeurs_et_enfants_exposes}{env}>

Vous devez la remplacer par :

#INCLURE{fond=inclure/menu, env, identifiant=XXXXX}

Attention, à la place de XXXXX, vous devez mettre le même nom, que l’identifiant du menu.
Exemple

#INCLURE{fond=inclure/menu, env, identifiant=vertical}

4- Vous enregistrez ce fichier avec le même nom (inc-colonne.html), dans le dossiers squelettes que vous avez fait plus tôt.

5- Vous avez un fichier layout_text.css.html qui est dans : .../squelette_multiflex3/css

Dedans, vous ajoutez :

.main-navigation ul.menu-liste {list-style:none; margin:auto; width:199px; border-bottom:solid 1px [(#ENV{mfx_c200})]}
.main-navigation li.menu-entree {background: none; margin: auto; padding: 0;}
.main-navigation li.menu-entree a, .main-navigation li.menu-entree a:visited {display:block; min-height:2.0em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.0em; padding:0px 10px 0px 20px;  border-top: solid 1px [(#ENV{mfx_c200})]; text-decoration:none; color:[(#ENV{mfx_cgbn})]; font-weight:bold; font-size:120%;}
.main-navigation li.menu-entree a:hover {background-color:[(#ENV{mfx_c225})]; color:[(#ENV{mfx_cgbnn})]; text-decoration:none;}
.main-navigation li.menu-entree ul.menu-liste li.menu-entree a, .main-navigation li.menu-entree ul.menu-liste li.menu-entree a:visited {display:block; min-height:1.7em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.7em; padding:0px 10px 0px 40px; border:none; font-weight:normal; text-decoration:none; color:[(#ENV{mfx_cgbn})]; font-size:120%;}

6- Vous enregistrez ce fichier en gardant le même nom (layout_text.css.html), dans votre dossier « css », qui est dans votre dossier « squelettes ».

7- Dans votre dossier squelettes, vous créez un dossier « noisettes » puis à l’intérieur de ce dernier un dossier « _navigation » et enfin, à l’intérieur de celui-ci un dossier « horizontal »
Ce qui vous donne donc : squelettes/noisettes/_navigation/horizontal

8- Dans le dossier ...squelette_multiflex3/noisettes/_navigation/horizontal vous avez un fichier qui se nomme :
sous_rubriques_articles_par_mots

Vous effacez ce qu’il contient et dedans, vous mettez :

#INCLURE{fond=inclure/menu, env, identifiant=YYYYY}

Attention, à la place de YYYYY, vous devez mettre le même nom, que l’identifiant du menu.
Exemple

#INCLURE{fond=inclure/menu, env, identifiant=horizontal}

9- Vous enregistrez ce fichier avec le même nom (sous_rubriques_articles_par_mots.html), dans votre dossier horizontal, qui est donc dans :
squelettes/noisettes/_navigation

Le 10-09-2009 correction d’affichage

Les sous-menus s’affichaient comme les menus dans la colonne, j’ai donc fait une modification dans le fichier layout_text.css.html en ajoutant une ligne

Dernière modification de cette page le 10 septembre 2009

Discussion

5 discussions

  • Bonjour, je viens d’installer le plugins menus. mais j’arrive pas à ajouter d’entrée !
    rien ne se passe quand je clic sur le bouton « ajouter une entrée »

    squelette = multiflex 3

    merci

    Répondre à ce message

  • Henri POUILLOT

    Je viens de publier mon site henri-pouillot.fr, après une aide très sérieuse de développeurs spip. J’ai choisi le squelette Multiflex qui semble très bien correspondre à mes besoins. J’ai adapté la présentation...
    J’ai 2 problèmes :
    -  dans le menu horizontal (qui vient sur 2 lignes) donnant les rubriques liées à la racine seules les premières (4 sur la première ligne, 3 sur la seconde) permettent de partir sur la lecture de ces rubriques. Y aurait-il un lien entre le fait que j’ai agrandi l’image grise pour englober ces 2 lignes ?
    -  un formulaire « contact » apparait bien (soit à partir du bandeau, soit de la navigation verticale) mais le message ne me parvient pas.
    Les autres améliorations viendront ensuite.
    Merci de l’aide que vous pourrez me donner

    Répondre à ce message

  • Gilles

    Bonjour,
    Multiflex 3 et le plugin menu sont ils compatibles Mozilla Firefox, Safari ?
    Jj’ai commencé à installer un SPIP avec ce squelette. Tout parait super mais par moments, quand je navigue avec ces navigateurs, les feuilles de styles ne sont plus montées : on peut avoir au lieu d’un menu horizontal ou du menu vertical, une liste verticale de liens ...
    Avez vous rencontré ce problème que je n’est pas retrouvé sous i.e.? une solution ?
    Je vous en remercie par avance

    Répondre à ce message

  • Hello.

    J’ai un soucis d’affichage du menu : quand il y a des rubriques et articles c’est ok, par contre si j’ai une rubrique, avec des sous rubriques et des choses en dessous, l’affichage ne fonctionne plus du tout.

    C’est à dire qu’au lieu de déplier la sous rubrique seulement quand on passe dessus avec la souris, le menu est déplié intégralement quand on passe sur la rubrique globale, ce qui fait que ça ne resemble à rien.

    Peut-etre y-a-t’il déjà un patch pour cela ?

    En PJ le menu côté admin, et le rendu coté public.

    Répondre à ce message

  • 3

    Il y a une coquille, deux fois la même.

    Attention, à la place de XXXXX, vous devez mettre le même nom que l’identifiant du plugin

    C’est : « l’identifiant du menu », pas du plugin.

    Et tant qu’à faire : ne pas donner en exemple deux fois le même identifiant pour horizontal et vertical, car ça n’a pas de sens, ça voudrait dire que c’est le même menu aux deux endroits.

    D’ailleurs autant donner en exemple des identifiants qui correspondent au squelette. Par exemple « identifiant=horizontal » et « identifiant=vertical ».

    • Je viens de faire des modifs dans l’article en prenant en compte tes remarques. :-)
      Je pense avoir fait un article plus explicite maintenant.

      Ainsi, toi, tu n’auras plus de question à propos de ce squelette :-D et Marcimat, n’auras plus de question non plus, sur comment avoir un bouton « contact » ou autre dans les menus.

    • Tiens, sympa ta contrib…

      Un mot : plutôt que d’inviter les gens à modifier le code du plugin Multiflex, invite les plutôt à surcharger les fichiers… mais bon, c’est déjà bien.

    • Ah, j’avais mal lu, c’est bien ce que tu écris en fait. Autant pour moi !

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

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