Menu PHP et css personnalisé

**nath131207** · 07/08/2015, 10h15

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** · 07/08/2015, 11h17

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** · 07/08/2015, 11h21

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/

Envoyé par mimine91330

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** · 19/08/2015, 15h22

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

**nath131207** · 19/08/2015, 16h51

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 ?

Nom : menu.gif
Affichages : 166
Taille : 15,7 Ko

**Bisûnûrs** · 19/08/2015, 17h17

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

Invité · 19/08/2015, 18h31

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

Envoyé par nath131207

...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> !

**nath131207** · 20/08/2015, 09h11

bonjour,

à priori je n'avais pas compris la class "child".
je ne savais pas qu'en html 5 la tendance était plutôt sur une class "nav".
je n'ose pas toucher au css qui se rapporte à mes pages en php de peur que de faire des bêtises.
je vais tester tout cela.
merci

Invité · 20/08/2015, 10h37

Bonjour,

Envoyé par nath131207

à priori je n'avais pas compris la class "child".

Bingo !

je ne savais pas qu'en html 5 la tendance était plutôt sur une class "nav".

Il ne s'agit pas d'une "tendance", mais de sémantique.
Ca aide en SEO à identifier le rôle des différents éléments de la page.

A LIRE :

Initiation à HTML5

je n'ose pas toucher au css qui se rapporte à mes pages en php de peur que de faire des bêtises.

Seul le fichier contenant le script du menu est à modifier ! (ajout de la balise <nav>)

**nath131207** · 20/08/2015, 13h42

j'ai testé : sous FF chaque item du premier niveau du menu est bien de couleur différente. Mais pas les enfants ! ils sont sans couleur.

Je ne comprends pas pourquoi.
sous IE il ne se passe rien : malheureusement je suis sous IE9. Et "mes" utilisateurs utilisent plutôt ce navigateur.
c'est dommage ! je trouvais ça très encourageant.

Est-ce que la solution du champs "couleur" dans ma BDD et une intervention dans mon code php est ma seule option ?

Invité · 20/08/2015, 13h47

Montre le code HTML du menu (= code généré, sans PHP) -> Ctrl + U

+ code CSS du menu.

N.B. Si tu abandonnes dès le 1er souci, tu n'arriveras jamais à rien !

Quanr à IE, on en est à la version 11 !
C'est si difficile de faire la mise à jour ??

Invité · 20/08/2015, 13h58

Cela dit, j'ai une 3eme solution dans ma musette....

**nath131207** · 20/08/2015, 15h31

Je ne lâcherai pas l'affaire ou alors vraiment quand plus rien ne sera possible ou que cela sera au dessus de mes compétences ou de ma compréhension.
pour IE je n'y peux pas grand-chose, Jreaux62. Je fais avec ce que j'ai, malheureusement. je n'ai aucun pouvoir sur les services informatiques et je ne suis pas même pas admin de ma machine.

Voici le code généré pour la construction du menu

Code :

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
<div class="menu">
      <ul>
/*il s'agit du tout premier niveau*/
         <li><a href="Affichage.php?IDrubr=543">Opérations</a>
            <ul class="niveau1">
/* il s'agit du premier enfant*/
                  <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>
/* il s'agit du 2e enfant*/
                  <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>
/* il s'agit du 3e enfant*/
                  <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>
/* il s'agit du tout premier niveau*/
         <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>

Et voici mon CSS. Attention il est possible qu'il ne soit plus conforme aux règles d'aujourd'hui. Il date un peu. Je n'ai jamais pu avoir le temps de me jeter dedans et de le mettre à jour.

Code :

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
.menu {
                width:977px;
                position:absolute;
                z-index:100;
                visibility: visible;
                margin-left:12px;
                font-weight: normal;
                font-family:Tahoma, Geneva, sans-serif;
                font-size:12px;
                list-style: none;  
}
 
 
 
/* style des liens du top niveau */
.menu a {
                display:block;
                width:94px;
                height:46px; 
                border:1px solid #aca29e; 
                border-width:1px 1px 0 0; 
                padding-left  :2px ; 
                text-decoration:none; 
                color:#660000; 
                float: left;
}
 
/* style the top level hover */
.menu a:hover, .menu :hover > a{
                background:#dfe0e1; 
}
 
 
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
                padding:0;
                margin:0;
                list-style-type:none;
                position: absolute;
                z-index: 99999; 
}
 
 
 
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
                float:left;
                width:auto;
                position:relative;
}
 
 
 
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
                width:120px;
                visibility: hidden;
                top:47px; 
                margin-top: 0; 
                left: 0;
                position: absolute;
 
}
 
 
/* style the second level links */
.menu ul ul a {
                background:#f2f0ef; 
                color:#000; 
                height:auto; 
                line-height:14px;
                border:1px solid #aca29e; 
                border-width:1px 1px 0 0; 
		padding:5px 5px; 
}
 
 
/* style the second level hover */
.menu ul ul a:hover, .menu ul ul :hover > a {
                color :#660000; 
                background:#dfe0e1;
}
 
/* position du troisième niveau */
.menu ul ul ul{
                top:0;
                left:105px;
}
 
/* style du 3e niveau arrière plan */
.menu ul ul ul a {
                background:#f2f0ef;
}
 
 
 
/* style du 3e niveau hover */
.menu ul ul ul a:hover, .menu ul ul ul :hover > a {
                background:#dfe0e1;
}
 
 
 
/* style the table so that it takes no part in the layout - required for IE to work */
.menu table {
                position:absolute; 
                top:-9px; 
                left:0; 
                z-index:80;
 
}
 
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{
                visibility:visible; 
}
 
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
                visibility:hidden;
}
 
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
                visibility:hidden;
}
 
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
                visibility:visible;
}
 
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
                visibility:visible;
}
 
 
 
 
 
/*----Internet explorer balise spécifique---/*
 
 
 /* a hack so that IE5.5 faulty box model is corrected */
 
* html .menu a, * html .menu a:visited {
                width:94px;
}
 
/* yet another hack for IE5.5 */
}
*html .menu ul ul a{
                width:120px;
                width:120px;
}
 
/*Masquer les niveaux 1, 2 et 3*/
.niveau1, .niveau2, .niveau3 {
visibility:hidden;
}
 
/*Survol Niveau 0*/
/*_______________*/
/*Affiche Niveau 1*/
.menu li:hover .niveau1
{
visibility:visible;
}
 
/*Masque Niveau 2 et 3*/
.menu li:hover .niveau2,
.menu li:hover .niveau3
{
visibility:hidden;
}
 
/*Survol Niveau 1*/
/*_______________*/
/*Affiche Niveau 1 et 2*/
.niveau1 li:hover .niveau2,
.niveau1 li:hover .niveau1
{
visibility:visible;
}
 
/*Masque Niveau3*/
.niveau1 li:hover .niveau3
{
visibility:hidden;
}
 
/*Survol Niveau 2*/
/*_______________*/
/*Affiche Niveau 1, 2 et 3*/
.niveau2 li:hover .niveau3,
.niveau2 li:hover .niveau2,
.niveau2 li:hover .niveau1
{
visibility:visible;
}

merci de ta patience.

Invité · 20/08/2015, 18h42

En effet, ton CSS a besoin d'un bon nettoyage !

Bon.
Voilà ma Solution 3 !

1/ Pour commencer, on change la balise div par nav :

Code php :

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

                $code_menu = "<nav class=\"menu\">".afficher_menu(0,0,$rubrique)."</nav>";

2/ On va ajouter une classe aux <li> de niveau 0 ($niveau = 0) :

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
 
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";
                                               }
                               }
                               // --------------------------
                               $numclass = 0;
                               // --------------------------
                               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";
                                                                              }
                                                               }
                                                               // --------------------------
                                                               // ajout de class au niveau 0
                                                               if ( $niveau == 0){ $numclass++; } // on incrémente $numclass
                                                               $nomclass = ($numclass > 0)? " class='menu".$numclass."'" : "";
                                                               // --------------------------
 
                                                               if ($noeud['rubr_imag'] <> '')
                                                               {
                                                               $html .= "<li".$nomclass."><a href=\"/../ref_doc/image/" . $noeud['rubr_imag'] . "\">" . $noeud['nom_rubrique']."</a>";
                                                               }
                                                               else
                                                               {
                                                               $html .= "<li".$nomclass."><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;
                               }

3/ Dans le CSS :

SUPPRIMER toutes les lignes actuelles avec background:#xxxxxxx; !
Et ajouter à la fin :

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
nav { display:block; }
.menu li.menu1, .menu li.menu1 li  { background:green; }
.menu li.menu2, .menu li.menu2 li  { background:yellow; }
.menu li.menu3, .menu li.menu3 li  { background:red; }
/* et ainsi de suite... */
 
/* changement de fond sur le :hover */
.menu li.menu1:hover, .menu li.menu1 li:hover  { background:lightgrey; }
.menu li.menu2:hover, .menu li.menu2 li:hover  { background:lightgrey; }
.menu li.menu3:hover, .menu li.menu3 li:hover  { background:lightgrey; }
/* et ainsi de suite... *//

Invité · 20/08/2015, 19h24

Au final, le CSS du menu, une fois "nettoyé", donne ça :

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
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
.menu {
    width:977px;
    margin-left:12px;
   position:absolute;
    z-index:100;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:1em;
    list-style: none;  
}
.menu ul {
    width:100%;
    padding:0;
    margin:0;
    list-style-type:none;
    position: absolute;
    z-index: 99999; 
}
.menu li {
    padding:0;
    margin:0;
    position:relative;
    height:46px;
    border:1px solid #aca29e; 
}
.menu > ul > li {
    float:left;
    width:110px;
}
/* liens */
.menu a { 
    display:block;
    width:100%;
    border-width:1px 1px 0 0; 
    text-decoration:none; 
    color:#660000; 
  text-align:center;
  height:44px;
  line-height:40px;
}
/* 2eme niveau */
.menu ul ul {
    width:112px;
    top:46px; 
    left: -1px; /* à cause du border 1px */
    position: absolute;
}
/* 3eme niveau */
.menu ul ul ul{
    top:-1px; /* à cause du border 1px */
    left:100%;
}
/* masquage / affichage */
.menu ul li ul { visibility:hidden; }
.menu li:hover > ul { visibility:visible; }
 
/* styles spécifiques */
.menu li.menu1, .menu li.menu1 li  { background:green; }
.menu li.menu2, .menu li.menu2 li  { background:yellow; }
.menu li.menu3, .menu li.menu3 li  { background:blue; }
/* et ainsi de suite... */
 
/* changement de fond sur le :hover */
.menu li.menu1:hover, .menu li.menu1 li:hover  { background:lightgreen; }
.menu li.menu2:hover, .menu li.menu2 li:hover  { background:lightyellow; }
.menu li.menu3:hover, .menu li.menu3 li:hover  { background:lightblue; }
/* et ainsi de suite... */

On constate que les classes "left", "niveau2", "niveau3",... n'ont plus lieu d'être...
et peuvent être supprimées de la fonction de création du menu :

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
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) {
	   $html .= "\n<ul>\n";
   }
   // --------------------------
   $numclass = 0;
   // --------------------------
   foreach ($array AS $noeud) {
	   if ($parent == $noeud['parent_id']) {
		   if ($niveau_precedent < $niveau) {
				$html .= "\n<ul>\n";
		   }
		   // --------------------------
		   // ajout de class au niveau 0
		   if ( $niveau == 0){ $numclass++; } // on incrémente $numclass
		   $nomclass = ($numclass > 0)? " class='menu".$numclass."'" : "";
		   // --------------------------
 
		   if ($noeud['rubr_imag'] <> '')
		   {
		   $html .= "<li".$nomclass."><a href=\"/../ref_doc/image/" . $noeud['rubr_imag'] . "\">" . $noeud['nom_rubrique']."</a>";
		   }
		   else
		   {
		   $html .= "<li".$nomclass."><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;
}

Résultat ici : http://codepen.io/jreaux62/pen/vOqJpo

**nath131207** · 21/08/2015, 10h15

Bonjour jreaux62,

merci de ton aide. je vais essayer.

**nath131207** · 21/08/2015, 10h59

Je suis désolée Jreaux62 d'avoir à t'informer que ton fonctionne très bien avec FF mais absolument pas avec ma version d'IE.
C'est comme s'il n'existait pas de feuille de style.
Mon menu est affiché avec toutes les caractéristiques d'une absence de mise en forme, sous forme de liste, avec les puces, les liens soulignés, etc.
Cela m'ennuie beaucoup de devoir inciter mes utilisateurs à naviguer avec FF plutôt qu'avec IE.
Là c'est désespérant.

Invité · 21/08/2015, 11h41

Si tu ne nous montres pas ton propre code (fonction PHP, code HTML généré, CSS), comment veux-tu qu'on t'aide ?

On ne sait même pas :

comment tu intègres le CSS dans la page (fichier externe ?...)
sur quelle version de I.E. tu es

Sur IE, as-tu pensé à actualiser la page ? (touche F5 du clavier) pour vider le cache ?

Moi, ce qui m'ennuie, c'est que tu te décourages au moindre grain de sable,
et que tu ne fasses pas vraiment d'effort personnel de réflexion/recherche de solution !

Menu PHP et css personnalisé

CSS

Discussions similaires

Partager

Partager