bonjour,

quelques améliorations mais uniquement sur FF qui a bien pris la "-nth-child". cela fonctionne à merveille. Merci.
par contre avec ma version d'IE9 rien à faire il ne se passe rien.
j'ai pourtant reconstruit un mini menu de base sans mise en forme, mais aucun résultat.
POur la version "#menu-item-" j'ai trouvé ce code sur une autre page et qui au même titre que le fichier "beat_conf.php" est inclus sur l'ensemble du site.
Est-ce que ce n'est pas cette partie de code qui empêche l'exécution du style sur l'ID ?

[code]
// écriture du menu en fonction du code déjà calculé

if (!isset($_SESSION['code_menu']))
{
//connection à la base
//include("./librairie-inc/beat_conf.php");
//connectMaBase();
$sql = "SELECT RUBR_NOM, RUBR_ID, RUBR_ID_PERE, RUBR_IMAG FROM rubrique order by RUBR_ORDRE ASC";
$retour = mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error());
$rubrique = array();
while($row = mysql_fetch_array($retour)) {
$rubrique[] = array(
'parent_id' => $row['RUBR_ID_PERE'],
'rubr_id' => $row['RUBR_ID'],
'nom_rubrique' => $row['RUBR_NOM'],
'rubr_imag' => $row['RUBR_IMAG']
);
}
$code_menu="<div class=\"menu\">".afficher_menu(0,0,$rubrique)."</div>";
$_SESSION['code_menu'] = $code_menu;
}
echo ($_SESSION['code_menu']);
?>
[/code]

Merci.

effectivement je trouve ça bizarre aussi.
j'avais pourtant supprimé tous les "background" qui se trouvait dans mon css pour être certaine qu'il n'y ait pas d'"interférences".
bon j'y retourne, y a pas de raison que sur le site de jsfiddle.net ça ressorte comme c'est prévu et que chez moi ce ne soit pas le cas.

/* Règle sans effet : on applique la couleur sur l'élément ul, aucun changement */
#menu-item-2 {
    color: red;  
}

/* Règle avec effet : on applique la couleur sur les élément a */
#menu-item-2 a {
    color: red;  
}

Étrange que la sélecteur nth-child() ne fonctionne pas sous IE9, il est sensé être partiellement supporté depuis IE8 et complétement supporté depuis IE9 : [url]http://caniuse.com/#feat=css-sel3[/url]

Étrange également que les enfants n'héritent pas de la couleur. Un changement dans la structure html et/ou une autre règle css appliqué sur ces enfants ? Démo : [url]http://jsfiddle.net/by3xe330/[/url]

Concernant le style appliqué sur les id "#menu-item-n", il faut bien penser à appliquer la couleur sur les liens contenus dans ce ul :
[css]/* Règle sans effet : on applique la couleur sur l'élément ul, aucun changement */
#menu-item-2 {
color: red;
}

/* Règle avec effet : on applique la couleur sur les élément a */
#menu-item-2 a {
color: red;
}[/css]

Bonjour et merci.
j'ai essayé la version avec "nth-child" et malheureusement nous avons IE9. Le style ne fonctionne pas du tout. Je n'ai aucun "background".
Par contre sous FF ça fonctionne mais uniquement pour le 1er niveau : "Opérations" et "Prep". Les enfants n'hérite pas de la couleur.
j'ai donc essayé avec la version de l'ID "menu-item-" qui n'a donné aucun résultat. C'est-à-dire qu'aucune couleur ne s'est affichée. Mon menu n'a pas changé d'un iota.
pourtant j'ai bien saisi "#menu-item-2" (2 étant l'ID dans la BDD pour "Opérations") dans le CSS, j'ai bien reporté dans le fichier php qui construit mon menu le code ci-dessus mais rien.
c'est décourageant de ne pas y arriver et de ne pas comprendre pourquoi les choses ne se déroulent pas comme cela devrait.

if ($niveau>1){
   $html .= "\n<ul class=\"left niveau" . $niveau . " id=\"menu-item-" . $noeud['rubr_id'] . "\">\n";
}
else {
   $html .= "\n<ul class=\"niveau1\" id=\"menu-item-" . $noeud['rubr_id'] . "\">\n";
}

Bonjour,

A priori il te suffit juste d'ajouter une classe ou un id html aux balises <ul>. Tu pourras ainsi définir les attributs css de chacun des parents (à condition de connaitre leurs id en base de données) et ainsi accéder à tous les éléments qu'ils contiennent.
Par exemple avec un attribut id "menu-item-XXX" :
[php]if ($niveau>1){
$html .= "\n<ul class=\"left niveau" . $niveau . " id=\"menu-item-" . $noeud['rubr_id'] . "\">\n";
}
else {
$html .= "\n<ul class=\"niveau1\" id=\"menu-item-" . $noeud['rubr_id'] . "\">\n";
}[/php]
Tu peux ainsi définir le style de #menu-item-543 (pour le menu opérations) et #menu-item-547 (pour le menu Prép). Les listes qu'ils contiennent hériteront de ces propriétés et tu peux même accéder à certains éléments en combinant l'id et les classes ou les éléments (#menu-item-547 .niveau2, #menu-item-547 UL LI A, ...)

L'inconvénient de cela, c'est que si des menus parents sont ajoutés ou supprimés, il faudra à nouveau ajouter les styles correspondant à partir des nouveaux id.
A voir si la structure du site évolue ou non. Le cas échéant, au lieu de l'id du menu parent, tu peux utiliser un simple compteur dans la boucle. Ainsi le premier menu parent aurait l'id ou la classe menu-item-1, le second menu-item-2, etc. et associer des styles à chacun. Avantage, tu ne dépends plus des modifications en base de données, inconvénient, le premier menu sera toujours vert, le second toujours bleu, ...

/* "Opérations" et ses enfants */
.menu > ul > li:nth-child(1) a {
    color: red;
}

/* "Prép" et ses enfants */
.menu > ul > li:nth-child(2) a {
    color: green;
}

/* "3.1" et ses enfants */
.menu > ul > li:nth-child(1) > ul > li:nth-child(1) a {
    color: purple;
}

/* "3.2" et ses enfants */
.menu > ul > li:nth-child(1) > ul > li:nth-child(2) a {
    color: orange;
}

/* "3.3" et ses enfants */
.menu > ul > li:nth-child(1) > ul > li:nth-child(3) a {
    color: yellow;
}

/* "7.1" et ses enfants */
.menu > ul > li:nth-child(2) > ul > li:nth-child(1) a {
    color: pink;
}

/* "7.2" et ses enfants */
.menu > ul > li:nth-child(2) > ul > li:nth-child(2) a {
    color: gray;
}

Voici un exemple en utilisant nth-child :
[css]/* "Opérations" et ses enfants */
.menu > ul > li:nth-child(1) a {
color: red;
}

/* "Prép" et ses enfants */
.menu > ul > li:nth-child(2) a {
color: green;
}

/* "3.1" et ses enfants */
.menu > ul > li:nth-child(1) > ul > li:nth-child(1) a {
color: purple;
}

/* "3.2" et ses enfants */
.menu > ul > li:nth-child(1) > ul > li:nth-child(2) a {
color: orange;
}

/* "3.3" et ses enfants */
.menu > ul > li:nth-child(1) > ul > li:nth-child(3) a {
color: yellow;
}

/* "7.1" et ses enfants */
.menu > ul > li:nth-child(2) > ul > li:nth-child(1) a {
color: pink;
}

/* "7.2" et ses enfants */
.menu > ul > li:nth-child(2) > ul > li:nth-child(2) a {
color: gray;
}[/css]

Si l'ordre et le nombre de père ne varie pas régulièrement, cette solution devrait pouvoir convenir.

Je ne sais pas si les items de premier niveau sont "Opérations" et "Prép" ou "3.1", "3.2, etc. Dans le doute j'ai commenté chaque règle pour que tu puisses facilement t'y retrouver.

Bon coloriage ;)

Le nombre de père ne variera pas pour le moment. Par contre le nombre de leurs enfants et surtout petits enfants varie et n'est pas toujours le même pour chacun des pères.
Père 1 peut avoir 2 enfants qui auront chacun respectivement 1 et 3 enfants. (c'est clair j'espère)
Père 2 peut avoir 10 enfants qui auront chacun respectivement entre 0 et 7 enfants.
Père 3 peut ne pas avoir d'enfant.

voici le code html généré
[code]div class="menu">
<ul>

<li><a href="Affichage.php?IDrubr=543">Opérations</a>
<ul class="niveau1">
<li><a href="Affichage.php?IDrubr=606">3.1</a>
<ul class="left niveau2 ">
<li><a href="Affichage.php?IDrubr=653">OT</a></li>
<li><a href="Affichage.php?IDrubr=654">ON</a></li>
<li><a href="Affichage.php?IDrubr=655">EU</a></li>
<li><a href="Affichage.php?IDrubr=656">EM</a></li>
</ul>
</li>
<li><a href="Affichage.php?IDrubr=559">3.2</a>
<ul class="left niveau2 ">
<li><a href="Affichage.php?IDrubr=760">OT</a></li>
<li><a href="Affichage.php?IDrubr=761">EM</a></li>
<li><a href="Affichage.php?IDrubr=762">IA</a></li>
<li><a href="Affichage.php?IDrubr=763">AR</a>
<ul class="left niveau3 ">
<li><a href="Affichage.php?IDrubr=764">INF</a></li>
<li><a href="Affichage.php?IDrubr=765">CAV</a></li>
<li><a href="Affichage.php?IDrubr=766">ART</a></li>
<li><a href="Affichage.php?IDrubr=767">ALT</a></li>
<li><a href="Affichage.php?IDrubr=768">DSA</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Affichage.php?IDrubr=571">3.3</a>
<ul class="left niveau2 ">
<li><a href="Affichage.php?IDrubr=706">EM</a></li>
<li><a href="Affichage.php?IDrubr=705">IA</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="Affichage.php?IDrubr=547">Prép</a>
<ul class="niveau1">
<li><a href="Affichage.php?IDrubr=548">7.1</a>
<ul class="left niveau2 ">
<li><a href="Affichage.php?IDrubr=755">EM</a></li>
<li><a href="Affichage.php?IDrubr=756">IA</a></li>
</ul>
</li>
<li><a href="Affichage.php?IDrubr=549">7.2</a>
<ul class="left niveau2 ">
<li><a href="Affichage.php?IDrubr=758">EM</a></li>
<li><a href="Affichage.php?IDrubr=757">IA</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>[/code]

Merci de votre aide.

Salut,

Une autre solution possible serait d'utiliser le selecteur :nth-child pour cibler les éléments de menu souhaités. C'est loin d'être la solution idéale dans le cas où l'organisation des éléments de menu est amené à changer régulièrement, mais l'avantage est qu'il n'y a pas besoin de modifier le code php.

Pourrais tu nous montrer le code html généré de ton menu (en affichant le code source de la page par exemple) ?

Pas tant que ça.
Il faut que tu modifies la fonction récursive pour insérer l'ID du premier père (mais pas le 0).
Et cet ID servira de class.
Si le père est 0 alors c'est qu'on est nous même père et donc on prend l'id de catégorie comme class.

Note : ne pas oublier de transmettre l'id du père (s'il est différent de 0, sinon son propre id) lors des appels récursifs.

je crois avoir compris cette explication. cependant je pense que je ne peux opérer de cette manière. Le contenu de mon menu (niveau 1, niveau 2, niveau 3 et leurs ss-items respectifs) est généré automatiquement après intégration dans la base de données. Je n'ai donc aucune possibilité d'intervenir sur les balises id, ul, li "spécifiquement". Et puis si le père est de couleur jaune, tous ses enfants et petits-enfants devront être jaune.
ça se complique non ?

merci pour ta réponse rapide.

Si tu obtiens une page blanche c'est que ton environnement n'est pas configuré pour le développement.
Actives l'affichage des erreurs dans le php.ini

La solution 1 ne travaille qu'avec des couleurs en dur.
La class couleur_de_base va définir la couleur des sous-menus.
Puis tu auras une class couleur par ID (couleur0, couleur1, couleur2, ect) pour chaque menu.
Par exemple :
menu 1 (class couleur1)
- sous-menu 1 (class couleur_de_base)
- sous-menu 2 (class couleur_de_base)
menu 2 (class couleur2)
menu 3 (class couleur3)
- sous-menu 1 (class couleur_de_base)
- sous-menu 2 (class couleur_de_base)

Bonjour XTG,
je n'y suis pas arrivée avec la solution 1.
j'ai créé les feuilles de style adéquate - si le terme de "class" utilisé signifiait un style css. Le résultat est que je devais mal rapporté le code car la page *.php devenait blanche.
Qu'entendais-tu par "couleur de base", je devais écrire en "dur" une couleur type "#c00" ?

Bonjour XTG,

je vais déjà essayer la première solution.
je n'avais pas pensé à la seconde.
comme je l'expliquais, je ne suis pas informaticienne. très probablement je n'y arriverai pas du premier coup.
à bientôt

if ($parent == $noeud['parent_id']) {
            if ($niveau_precedent < $niveau) {
              if ($niveau>1){
                          $html .= "\n<ul class=\"left niveau$niveau  couleur_de_base\">\n"; // couleur de base de sous-menu
              }
              else {
                          $html .= "\n<ul class=\"niveau1 couleur" . $couleur[$array['rubr_id']] . "\">\n"; // ici on concatene l'id a la class couleur
              }
            }

[b]Solution 1[/b]
Le plus simple, mais pas forcement le plus propre, est de donner une class à chaque identifiant de parent.

[php]if ($parent == $noeud['parent_id']) {
if ($niveau_precedent < $niveau) {
if ($niveau>1){
$html .= "\n<ul class=\"left niveau$niveau couleur_de_base\">\n"; // couleur de base de sous-menu
}
else {
$html .= "\n<ul class=\"niveau1 couleur" . $couleur[$array['rubr_id']] . "\">\n"; // ici on concatene l'id a la class couleur
}
}[/php]
Et donc il te faut des class couleur pour chacun de tes IDs.

[b]solution 2[/b]
C'est plus propre mais cela nécessite une modification de la base de données et de l'interface d'administration du menu.
=> Ajouter un champ couleur dans la table pour les menus de premier niveau.