Bonjour,

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 apparaître au passage sur les categories (père). Voici mes tables et scripts.

Menu qui fonctionne bien

CSS

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;}

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,   */
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;}

PHP

<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 asc') ;  

$cat ="";
while($resultat = $menu->fetch_array()){
if ($cat != $resultat['name']){
   echo "<ul class='niveau1'>";
   echo "<li class='sousmenu'><a>".$resultat['name']."</a></li>";
   echo "</ul>"; 
   $cat = $resultat['name'];
}
echo "<ul class='niveau2'>";
echo "<li><a href='#'>".$resultat['soucat']."</a></li>"; 
echo "</ul>"; 
} 
?>
</div>

J'ai déplacé les <ul> et <li> à différents endroits mais ça ne marche pas...
Pouvez-vous me venir en aide ?

Cordialement

PAPI70

Merci j'ai relancé vers hmlt/css.

Je voulais supprimer ma demande section PHP mais pas de lien. Pas grave, merci pour votre réponse.

alixmut a écrit:

faut que tu ailles poser ta question dans la section html/css

-
Edité par Ptit Rat 1 juillet 2020 à 19:38:02

Bonjour,

Je reviens poster ma demande d'aide. Pas de réponse en section html/css et Js me dit être un problème de PHP.

Voici le menu généré en hml avec mon PHP et je ne sais pas comment résoudre le problème des </ul></li> qui empêche le fonctionnement.

Menu généré

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

PHP

<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'>";
           echo "<li class='sousmenu'><a>".$resultat['name']."</a>";
 
   $cat = $resultat['name'];
} //fermeture if
 
echo "<ul class='niveau2'>\n";
echo "<li><a>".$resultat['soucat']."</a></li>";
echo "</ul>";
 
echo "</li>";
echo "</ul>";
} // fin du while
?>
</div>

La classe est plus haut.

Merci pour votre aide

Cordialement

Bonjour,

Les deux dernière lignes avant la fin de ta boucle while :

echo "</li>";
echo "</ul>";

Je pense que tu dois les placer dans un if, car elles apparaissent pour le moment à chaque ligne, or tu dois juste les afficher à chaque fin de de niveau1.

Il te faut une condition, si le prochain élément est un élément de niveau 1, alors tu affiche les lignes.

-
Edité par Gwendou H 6 juillet 2020 à 17:42:41

Bonjour,

Améliration généré

<div id='menu'>
<ul class='niveau1'>

<li class='sousmenu'><a>BAGUES</a>
<ul class='niveau2'>
<li><a>argent</a></li>
<li><a>or</a></li>

<li class='sousmenu'><a>BOUCLES</a>
<ul class='niveau2'>
<li><a>or jaune</a></li>
<li><a>or blanc</a></li>
<li><a>or rose</a></li>
<li><a>papillon</a></li>
<li><a>or</a></li>
</ul>
</div>

Script modifier :

1er <ul class='niveau1'> avant php
1ère fermeture if après <ul class="niveau2">
fermeture du 1er </ul> après php

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

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

/* essais de condition
   if($resultat['soucat'] > $resultat['id_cat']) :
   if($resultat['soucat'] < $resultat['id_cat']) :
   if($resultat['soucat'] > $resultat['name']) :
   if($resultat['soucat'] < $resultat['name']) :
   if($resultat['id_cat'] > $resultat['name']) :   */
   
   if($resultat['soucat'] == $resultat['id_cat']) :
              echo "</ul>";
              echo "</il>";
           endif; //dernier if
endwhile; //fin du while
?>
</ul>
</div>

J'ai une amélioration mais je ne parviens pas à insérer les </UL></li> entre chaque nouveau éléments. quelle condition mettre ?
Cordialement

Je pense qu'en procédant ainsi, ça devrait le faire :

<div id='menu'>
<ul class='niveau1'>
<?php
$menu = $mysqli->query('
SELECT DISTINCT produit.soucat, categories.name
FROM categories, produit
WHERE produit.id_cat = categories.id order by produit.id_cat asc') ;
  
$premiere_ligne = true;//Création d'un boolean
$cat ="";
while($resultat = $menu->fetch_array()):

if(!$premiere_ligne && $cat != $resultat['name']){ //Si pas 1ère ligne et nouveau sous_menu
	echo "</ul>";
	echo "</li>";
}//1er if

if ($cat != $resultat['name']){
    echo "\n";
    echo "<li class='sousmenu'><a>".$resultat['name']."</a>\n";
    $cat = $resultat['name'];
	echo "<ul class='niveau2'>\n"; 
} //2eme if

echo "<li><a>".$resultat['soucat']."</a></li>\n";    
$premiere_ligne = false; //Changement du boolean

endwhile; //fin du while
?>
</ul>
</li>
</ul>
</div>

J'ai ajouté un petit boolean pour ne pas fermer le "ul" et "li" avant la fin de la première ligne. Ainsi, avant chaque nouveau sousmenu, les balises seront fermées.

Et une fois sortie de la boucle "while", je ferme les deux dernières balises.

-
Edité par Gwendou H 7 juillet 2020 à 10:44:11

SUPER ça marche , Merci Gwendou H pour ton aide

Problème résolu donc.