Bonsoir
Je souhaitai utiliser (adapter?) le menu déroulant jquery tel que le montre le tuto de Thomas D. avec 2 listes (Familles=>marques) récupérées en bdd (mysql).
La 1ere se fait bien (les familles), mais quand j'appelle les 2emes (marques), celles ci ne s'affichent pas....sauf pour le dernier item, et de manière très fugace (à peine une seconde). Et le même phénomène d'apparition rapide des sous menu s'appliquent pour le coup sur un 2eme menu accordéon, sur lequel par contre je n'ai pas (encore) appliqué de code php....
Mais, sans doute n'est ce pas très clair, et les codes le seront ils plus que moi...
Si vous avez une idée, une direction de recherche je suis preneur...
P.S: et cette fois j'ai bien sélectionné l'option "notification par e-mail" pour suivre mon post...
Modifié par boro64 (27 Jan 2011 - 20:07)
Je souhaitai utiliser (adapter?) le menu déroulant jquery tel que le montre le tuto de Thomas D. avec 2 listes (Familles=>marques) récupérées en bdd (mysql).
La 1ere se fait bien (les familles), mais quand j'appelle les 2emes (marques), celles ci ne s'affichent pas....sauf pour le dernier item, et de manière très fugace (à peine une seconde). Et le même phénomène d'apparition rapide des sous menu s'appliquent pour le coup sur un 2eme menu accordéon, sur lequel par contre je n'ai pas (encore) appliqué de code php....
Mais, sans doute n'est ce pas très clair, et les codes le seront ils plus que moi...
<html>
<head>
<?php include ('includes/connect.inc.php'); ?>
<script type="text/javascript" src="../codes/js/jquery-1.4.3.min.js"></script>
//ci dessous le code de Thomas D.
<script type="text/javascript">
<!--
$(document).ready( function () {
// On cache les sous-menus
// sauf celui qui porte la classe "open_at_load" :
$(".navigation ul.subMenu:not('.open_at_load')").hide();
// On sélectionne tous les items de liste portant la classe "toggleSubMenu"
// et on remplace l'élément span qu'ils contiennent par un lien :
$(".navigation li.toggleSubMenu span").each( function () {
// On stocke le contenu du span :
var TexteSpan = $(this).text();
$(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
} ) ;
// On modifie l'évènement "click" sur les liens dans les items de liste
// qui portent la classe "toggleSubMenu" :
$(".navigation li.toggleSubMenu > a").click( function () {
// Si le sous-menu était déjà ouvert, on le referme :
if ($(this).next("ul.subMenu:visible").length != 0) {
$(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } );
}
// Si le sous-menu est caché, on ferme les autres et on l'affiche :
else {
$(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") });
$(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
}
// On empêche le navigateur de suivre le lien :
return false;
});
} ) ;
// -->
</script>
</head>
<body>
//le 1er menu avec l'insert php/mysql
<nav id="goch">
<ul class="navigation">
<li class="toggleSubMenu"><?php
$sql = mysql_query ("SELECT * FROM familles ORDER BY idfamille");
while ($row = mysql_fetch_array($sql))
{
echo "<span value=\"\"></span>";
echo "<span value=\"".$row['nomfamille']."\">" .$row['nomfamille']. "</span>";
}
?>
<ul class="subMenu">
<li><?php
$sql = mysql_query ("SELECT * FROM mark ORDER BY id_mark");
while ($row = mysql_fetch_array($sql))
{
echo "<a href=\"\" value=\"\"></a>";
echo "<a href=\"\" value=\"".$row['nommark']."\">" .$row['nommark']. "</a>";
}
?></li>
</ul>
</li>
</ul>
</nav>
<section id="articles">
<?php include ('../txt/txt-base-acc.php'); ?>
</section><!--fin de la section article-->
//ci dessous le second menu "nu"
<nav id="droit">
<ul class="navigation">
<li class="toggleSubMenu"><span>< 50cc</span>
<ul class="subMenu">
<li><a href="#" title="je sais pas">Engin 1</a></li>
<li><a href="#" title="je sais pas">Engin 2</a></li>
<li><a href="#" title="je sais pas">Engin 3</a></li>
</ul>
</li>
<li class="toggleSubMenu"><span>de 50 à 125cc</span>
<ul class="subMenu">
<li><a href="#" title="je sais pas">Engin 4</a></li>
<li><a href="#" title="je sais pas">Engin 5</a></li>
</ul>
</li>
<li class="toggleSubMenu"><span> + de 125cc</span>
<ul class="subMenu">
<li><a href="#" title="je sais pas">Engin 6</a></li>
<li><a href="#" title="je sais pas">Engin 7</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Si vous avez une idée, une direction de recherche je suis preneur...
P.S: et cette fois j'ai bien sélectionné l'option "notification par e-mail" pour suivre mon post...
Modifié par boro64 (27 Jan 2011 - 20:07)
...je sius maudit!