Jeu de squelettes Multiflex 3 et le plugin « menus »

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