menu en php et css personnalisé

Petit nouveau ! | 9 Messages

07 août 2015, 10:50

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 : Tout sélectionner

//entete de page // é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()); //$result = mysql_query($sql, $cnx); $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.

ViPHP
xTG
ViPHP | 7331 Messages

07 août 2015, 13:28

Solution 1
Le plus simple, mais pas forcement le plus propre, est de donner une class à chaque identifiant de parent.
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
              }
            }
Et donc il te faut des class couleur pour chacun de tes IDs.

solution 2
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.

Petit nouveau ! | 9 Messages

10 août 2015, 09:15

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

Petit nouveau ! | 9 Messages

18 août 2015, 10:01

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

ViPHP
xTG
ViPHP | 7331 Messages

18 août 2015, 10:27

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)

Petit nouveau ! | 9 Messages

19 août 2015, 15:19

merci pour ta réponse rapide.

Petit nouveau ! | 9 Messages

19 août 2015, 16:12

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 ?

ViPHP
xTG
ViPHP | 7331 Messages

19 août 2015, 16:25

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.

ynx
Mammouth du PHP | 586 Messages

19 août 2015, 16:51

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

Petit nouveau ! | 9 Messages

19 août 2015, 17:57

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 : Tout sélectionner

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>
Merci de votre aide.

ynx
Mammouth du PHP | 586 Messages

20 août 2015, 09:17

Voici un exemple en utilisant nth-child :
/* "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;
}
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 ;)

Avatar du membre
Modérateur PHPfrance
Modérateur PHPfrance | 10684 Messages

20 août 2015, 09:21

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" :
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";
}
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, ...
Ce n'est pas en améliorant la bougie que l'on a inventé l'ampoule...

Petit nouveau ! | 9 Messages

20 août 2015, 14:50

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.

ynx
Mammouth du PHP | 586 Messages

20 août 2015, 16:00

É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 : http://caniuse.com/#feat=css-sel3

É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 : http://jsfiddle.net/by3xe330/

Concernant le style appliqué sur les id "#menu-item-n", il faut bien penser à appliquer la couleur sur les liens contenus dans ce ul :
/* 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;  
}

Petit nouveau ! | 9 Messages

20 août 2015, 16:24

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.