Discussion :

[nath131207]

Bonjour,

je ne suis pas du tout informaticienne, je suis plutôt graphiste. Un peu de pédagogie me sera indispensable
en ce moment je dois reprendre un site intra développé en php.
Dans celui-ci j'ai un menu horizontal déroulant qui se construit à partir des items de la BDD MySql. Tous les items et sous-items sont de couleurs et de comportements identiques.
je dois le retoucher afin que chaque item (Item 1, Item 2,..... Item 6, même niveau) soit d'une couleur différente de son voisin.
Par contre les sous-items (Item 11, Item 21,..... Item 61) seront de la même couleur que leur père respectif.

J'ai trouvé le code qui correspond à la fonction d'affichage et de construction du menu.
Dedans j'ai bien vu qu'on faisait appel qu'à un seul style "menu".

Comment puis-je procéder pour que chaque item de premier niveau soit d'une couleur différente du voisin ?

Ci dessous, le code de mon fichier en php ;

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
//entete de page
// écriture du menu en fonction du code déjà calculé
                if (!isset($_SESSION['code_menu']))
                {
 
                $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']);
                ?>
 
 
 
 
function afficher_menu($parent, $niveau, $array) {
 
                               $html = "";
                               //On sauvegarde le nombre de fois que la fonction est appelée par elle-même dans la variable $niveau 
                               $niveau_precedent = 0;
                               if (!$niveau && !$niveau_precedent) {
                                               if ($niveau>1){
                                                               $html .= "\n<ul class=\"left\">\n";
                                               }
                                               else{
                                                               $html .= "\n<ul>\n";
                                               }
                               }
                               foreach ($array AS $noeud) {
                                               if ($parent == $noeud['parent_id']) {
                                                               if ($niveau_precedent < $niveau) {
                                                                              if ($niveau>1){
                                                                                              $html .= "\n<ul class=\"left niveau$niveau\">\n";
                                                                              }
                                                                              else{
                                                                                              $html .= "\n<ul class=\"niveau1\">\n";
                                                                              }
                                                               }
 
                                                               //$html .= "<li><a href=\"Affichage.php?IDrubr=" . $noeud['rubr_id'] . "\">" . $noeud['nom_rubrique']."</a>";
 
                                                               if ($noeud['rubr_imag'] <> '')
                                                               {
                                                               $html .= "<li><a href=\"/../ref_doc/image/" . $noeud['rubr_imag'] . "\">" . $noeud['nom_rubrique']."</a>";
                                                               }
                                                               else
                                                               {
                                                               $html .= "<li><a href=\"Affichage.php?IDrubr=" . $noeud['rubr_id'] . "\">" . $noeud['nom_rubrique']."</a>";
                                                               }
 
                                               $niveau_precedent = $niveau;
                                               $html .= afficher_menu($noeud['rubr_id'], ($niveau + 1), $array);
                                               }
                               }
                               if ($niveau_precedent == $niveau)  $html .= "</ul>\n</li>\n";
                               else $html .= "</li>\n";
                               return $html;
                               }

Je vous remercie d'avance pour votre aide. Bonne journée.

[mimine91330]

Salut

Si j'ai bien tout compris, tu veux avoir une couleur différente pour chaque item parent et leurs enfants.

Je pense qu'il faut que tu intègres une couleur différente à chaque tour de la boucle foreach ($array AS $noeud) dans cette partie du code :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10

if ($noeud['rubr_imag'] <> '')
{
        $html .= "<li ICI STYLE="" AVEC BONNE COULEUR><a href=\"/../ref_doc/image/" . $noeud['rubr_imag'] . "\">" . $noeud['nom_rubrique']."</a>";
}
else
{
        $html .= "<li ICI STYLE="" AVEC BONNE COULEUR IDENTIQUE A AU DESSUS><a href=\"Affichage.php?IDrubr=" . $noeud['rubr_id'] . "\">" . $noeud['nom_rubrique']."</a>";
}

Pour les couleurs, soit tu les génères aléatoirement mais ça risque d'être très moche, soit tu mets une sélection de couleur dans un tableau que tu appelles pour le mettre dans le style=""

[valaendra]

Bonjour,

Si il n'y a que les couleurs à modifier, pas besoin de PHP, CSS est suffisant avec les pseudos classes nth-child, first-child et last-child

Un peu de documentation :
http://www.w3schools.com/cssref/sel_nth-child.asp
https://developer.mozilla.org/fr/doc...S/%3Anth-child
Et le dernier en Français :
http://www.marevueweb.com/css-html/l...ild-propriete/

Salut
soit tu mets une sélection de couleur dans un tableau que tu appelles pour le mettre dans le style=""

Utiliser les styles inline n'est pas une bonne idée

[nath131207]

merci pour ces deux solutions.
je vais m'empresser de les essayer.

[nath131207]

mimine91330 à priori tu as parfaitement compris ma problématique.

Les couleurs ne sont pas aléatoires. elles sont définies. Chaque item donnera sa couleur respective à ses enfants et petits-enfants.
j'ai joint une image pour faciliter la compréhension (enfin j'espère ).
comme le menu est généré automatiquement à partir des éléments entrés dans la BDD, je ne peux pas intervenir spécifiquement sur des balises div, ul, li, p ou autre.

valaendra j'ai parcouru les pages conseillées sur le thème des childs, mais je crois qu'elle ne s'adapte pas à mon cas ou alors je n'ai rien compris.

croyez vous qu'il existe une solution ?

[Bisûnûrs]

Mettre les couleurs en BDD également, en rajoutant une colonne "couleur" (par exemple) pour chacune de tes lignes de menu.

[Invité]

Bonjour,

1/ Solution 1 :
je reprends l'idée de bisunurs, mais je crée une colonne "menu_class" dans la table du menu.
Avantages :

• permet des stylisations (éventuelles) autres que la simple couleur
• les styles restent, même si on change l'ordre d'affichage des menus

Inconvénients:

• interventions nécessaires en BdD (ajout d'une colonne) et dans le code PHP (ajout de la class)

2/ Solution 2 : full CSS
il suffit d'utiliser le selecteur CSS :nth-child

...j'ai parcouru les pages conseillées sur le thème des childs, mais je crois qu'elle ne s'adapte pas à mon cas ou alors je n'ai rien compris.

Ceci devrait répondre à la question

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<nav>
  <ul>
    <li>menu 1
      <ul>
        <li>menu1.1</li>
        <li>menu1.2</li>
        <li>menu1.3</li>
        <li>menu1.4</li>
       </ul>
    </li>
    <li>menu 2
      <ul>
        <li>menu2.1</li>
        <li>menu2.2</li>
       </ul>
    </li>
    <li>menu 3
      <ul>
        <li>menu3.1</li>
        <li>menu3.2</li>
        <li>menu3.3</li>
       </ul>
    </li>
  </ul>
</nav>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
nav ul li  /* ici, les spécifications communes des menus/sous/menus */
{
   ....... ;
}
/* particularités */
nav > ul > li:nth-child(1) /* 1er menu */ /* N.B. li:nth-child(1) est équivalent à li:first-child */
{
   background-color:#xxxxxx;
}
nav > ul > li:nth-child(2)  /* 2eme menu */
{
   background-color:#yyyyyy;
}
nav > ul > li:nth-child(3)  /* 3eme menu */
{
   background-color:#zzzzzz;
}
/* ......... */

• nav > ul > li:nth-child(x) cible l'élément x du 1er niveau de menu
• les sous-niveaux enfants auront le même background (puisqu'il sont à l'intérieur du li parent)

Avantages :

• pas d'intervention nécessaire en BdD ni dans le code PHP
• modifications faciles dans le fichier CSS

Inconvénients:

• aucun ! (exception faite de I.E., qui ne connait :nth-child qu'à partir de la version 9.0)

N.B. IMPORTANT : en HTML5, un menu de navigation se met dans une balise <nav> !