Bonjour, posé la question section PHP et html/css, resté sans réponse, je relance ici malgré n'avoir aucune connaissance en JS.

J'ai réalisé un menu catégorie avec sous-catégorie mais je n'arrive pas à cacher les sous-catégorie (fils), et biensûr les faire réapparaître au passage sur les categories (père). Voici mes tables et scripts.

CSS (menu vertical)

div#menu {width: 120px;}

/* fond blanc pour le menu */ 
div#menu a {color:#000000}
div#menu ul {padding: 0; width: 125px; border:1px solid; margin:0px; background: white}

/* fond different au survol de la souris pour les sous menu et les "basiques" */
div#menu li:hover {background: #EDD}
div#menu li.sousmenu:hover {background: #EBB;}

/* Rajout d'une petite fleche pour les sous menu  */
div#menu li.sousmenu {background: url(fleche.gif) 95% 50% no-repeat;}

div#menu ul li {position:relative; list-style: none; border-bottom:1px solid;}
div#menu ul ul {position: absolute; top: -1px; left: 120px; display:none;}

/* on rajoute une bordure a gauche et des padding, on doit donc réajuster la taille 100-(8 de bordure + 8 de padding) =84  */
div#menu li a {text-decoration: none; padding: 2px 0 2px 4px; display:block; border-left: 8px solid #BBB; width:84px}
div#menu ul.niveau1 li.sousmenu:hover ul.niveau2, 
div#menu ul.niveau2 li.sousmenu:hover ul.niveau3 {display:block;}

/* la bordure de chaque hauteur a une couleure de survol*/ 
div#menu li a:hover {border-left-color: red;display:block;}
div#menu ul ul li a:hover {border-left-color: #00FF00;}
div#menu ul ul ul li a:hover {border-left-color: #0000FF;}

PHP 7.4

<div id='menus'>
<?php
$menu = $mysqli->query('
SELECT DISTINCT produit.soucat, categories.name 
FROM categories, produit
WHERE produit.id_cat = categories.id order by categories.name asc') ;

$cat ='';
while ($resultat = $menu->fetch_array()) {
if ($cat != $resultat['name']){

   echo "<ul class='niveau1'>
         <li class='sousmenu'><a>".$resultat['name']."</a>
		 </li></ul>";
   $cat = $resultat['name'];
}
  echo "<ul class='niveau2'>
<li><a href='vitrine.php?categorie=".$resultat['name']."#soucat=".$resultat['soucat']."'>".$resultat['soucat']."</a></li>
</ul>";  
 } 
?>
</div>

J'ai déplacé les <ul> <li> à plusieurs endroits mais soit je n'obtiens que les catégorie père soit seulement les sous-catégories fils.
Ou parfois seulement le 1er sous-catégorie fils

Merci pour votre aide.
Cordialement

Bonjour,

C'est un problem de CSS plus que de Javascript (ou de Php) Ce serait intéressant de voir le code HTML généré pour donner une réponse plus détaillée, mais je ne vois pas ou la classe "niveau2" est rendue invisible dans le CSS.

Bonjour,

Merci pour votre réponse. Le CSS fonctionne bien en dehors de PHP

C'est un CSS récupéré et il me semble que Le "Display : none;" ce trouve ligne 15

<div id="menu">
          <ul class="niveau1">
            <li class="sousmenu"><a href="">BOUCLES</a>
              <ul class="niveau2">
                <li><a>Or blanc</a></li>
                <li><a>Or rose</a></li>
                <li><a>Papillon</a></li>
                <li><a>Or</a></li>
              </ul>
            </li>
          </ul>
</div>

Un autre CSS pour un menu horizontal donne le même résultat (sous PHP) d'un seul élément caché.
Merci pour votre aide.

Effectivement, je cherchais une reference a la classe. J'ai teste le code et ca fonctionne: https://jsfiddle.net/xoa8g2d0/1/

Bonjour

Oui mais le souci c'est qu'avec le PHP ça ne fonctionne pas, je n'ai que la 1ère sous-catégorie qui apparaît/disparaît, les suivants restent figés.

1er </li> </ul>placé différemment (en dessous)

<div id='menu'>
<?php
$menu = $mysqli->query('
SELECT DISTINCT produit.soucat, categories.name
FROM categories, produit
WHERE produit.id_cat = categories.id order by categories.name asc') ;
 
$cat ='';
while ($resultat = $menu->fetch_array()) {
if ($cat != $resultat['name']){
 
   echo "<ul class='niveau1'>
         <li class='sousmenu'><a>".$resultat['name']."</a>
         ";
   $cat = $resultat['name'];
}
  echo "<ul class='niveau2'>
<li><a href='vitrine.php?categorie=".$resultat['name']."#soucat=".$resultat['soucat']."'>".$resultat['soucat']."</a></li>
</ul></li></ul>"; 
 }
?>
</div>

Sans CSS, PHP me donne un menu correct donc l'erreur ne vient pas de la.

Soit il faut un CSS qui gère autrement, soit mon problème ne semble pas avoir de solution.

Cordialement

Papi70Papimouzo a écrit: > Soit il faut un CSS qui gère autrement, soit mon problème ne semble pas avoir de solution.

Il y a une solution PHP n'est pas visible depuis le navigateur. C'est pour ca que je demande le code html généré.

Le if dans ton while ouvre une balise "ul" pour le premier niveau de menu quand la catégorie change.. Tu n'as pas de if pour fermer la balise.

Bonjour,

Juste une remarque, si c'est un problème de PHP je me demande pourquoi dans ma 1ère demande d'aide section PHP on m'envoi vers html/css ou JS ?
Comme on dit "la 3ème fois c'est la bonne" (à tout faire)

Le if dans ton while ouvre une balise "ul" pour le premier niveau de menu quand la catégorie change..
Tu n'as pas de if pour fermer la balise.

Pour éviter les embrouilles du fait des changements je remets mon PHP avec fermetures

<div id='menu'>
<?php
$menu = $mysqli->query('
SELECT DISTINCT produit.soucat, categories.name
FROM categories, produit
WHERE produit.id_cat = categories.id order by produit.id_cat desc') ; 
 
$cat ="";
while($resultat = $menu->fetch_array()){
if ($cat != $resultat['name']){
        echo "<ul class='niveau1'>\n";
           echo "<li class='sousmenu'><a>".$resultat['name']."</a>\n";

   $cat = $resultat['name'];
} //fermeture if

echo "<ul class='niveau2'>\n";
echo "<li><a>".$resultat['soucat']."</a></li>\n";
echo "</ul>";

echo "</li>";
echo "</ul>";
} // fin du while
?>
</div>

Code html

<div id='menus'>
<ul class='niveau1'>
<li class='sousmenu'><a>BOUCLES</a>
<ul class='niveau2'>
<li><a>or jaune</a></li>
</ul></li></ul><ul class='niveau2'>
<li><a>or blanc</a></li>
</ul></li></ul><ul class='niveau2'>
<li><a>or rose</a></li>
</ul></li></ul><ul class='niveau2'>
<li><a>papillon</a></li>
</ul></li></ul><ul class='niveau2'>
<li><a>or</a></li>
</ul></li></ul><ul class='niveau1'>
<li class='sousmenu'><a>BAGUES</a>
<ul class='niveau2'>
<li><a>argent</a></li>
</ul></li></ul><ul class='niveau2'>
<li><a>or</a></li>
</ul></li></ul></div>

Vue comme ça c'est sûr que ça marche po

Merci de votre aide
Cordialement

Ca ne plait pas a mon editeur 

Je pense que ce serait plus simple d'avoir deux boucles imbriquees (une par niveau) avec une requete SQL par niveau.

Merci XIA tes conseils mon aidé.
J'avais relancé vers la section PHP du fait que ça venait de mon script, et mon problème a été résolu.
Cordialement.

Bonjour,

Déplacement vers un forum plus approprié

Le sujet est déplacé de la section Javascript vers la section PHP

Doublon

Les doublons nuisent au bon fonctionnement du forum et sont donc interdits. Si vous vous êtes trompé de section, il suffit de signaler votre sujet au staff pour qu'il le déplace au bon endroit.

Je vous invite à continuer la discussion sur l'autre sujet : https://openclassrooms.com/forum/sujet/menu-categorie-sous-categorie

Je ferme ce sujet. En cas de désaccord, me contacter par MP.