Menu Accordeon: long à charger

Bonjour,

voilà, j'utilise le menu accordéon comme décrit dans le tuto Alsacreations. très bon tuto très didactique

Je l'utilise avec un affichage dynamique en php : la liste est chargée à partir des différentes catégories et sous-catégories de produits dans une base de donnée. Open_at_load est activée et fonctionne correctement en récupérant la page en cours.

en fait, mon pb se situe au niveau du temps d'affichage. je ne sais pas si qqun a connu ce problème mais à chaque chargement de page, le menu se déplie entièrement (et fait apparaître l'ensemble des sous-menus) avant de se replier 1 sec. plus tard et de masquer les sous-rubriques ..

Est-ce un problème d'optimisation de la programmation (boucles php mal optimisées) ? De javascript ? de fonctionnement en local (j'utilise easy-php) ? ou de divers paramètres difficiles à appréhender ?

si qqun avait une piste, cela m'aiderait grandement

Merci et à bientôt.

Salut,

c'est curieux, en utilisant jQuery et $(document).ready on évite justement de voir les sous-menus apparaître et disparaître au chargement de la page ...

C'est vraiment 1 seconde d'attente, ou bien juste un flash ? Sous quel navigateur, et avec quelle config ? On peut avoir le code de la page, aussi ? (au moins le JS)

bonjour,

merci de ta réponse.
J'utilise donc easyphp en local (sur un 1,8ghz, 1Mo RAM) et j'ai utilisé le script pour afficher les catégories de produits sur une version Oscommerce ms2.2
J'exagère quand je parle d' 1 sec. (marseillais ?) mais c'est plus qu'un flash (genre 1/2 sec.)

Voici le JS (celui de (ton?) tuto) avec appel à jquery :

<script type="text/javascript" src="script/jquery-1.2.2.js"></script>
<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>

et le php (je passe les détails ....) qui fait appel à une fonction pour la déclaration des <ul> :

function PrintSubMenus( $parentID, $languageID, $start_path ){

      global $cssMenuConfig, $categories_subs, $categories_start;
	  $returnval = '';
	  $chemin = $_GET['cPath']; // récupération du path
	  $tab = explode("_",$chemin); // récupération dans un tableau des cat et sous-cat
	  
	  if (($start_path == '') && ($parentID > 0)) {
        $start_path = $parentID;
      } else {
      	  if ($parentID > 0) $start_path .= "_" . $parentID;
      }
	  	  if ($parentID != 0)
		  { 
			  if ($parentID ==  $tab[0] )
			  	$returnval .= "<ul class='subMenu open_at_load'>";
			  else 
		  	  	$returnval .= "<ul class='subMenu'>";
		  		  
	  } else  	{
		//$returnval .= "<div>";
        $returnval .= "<ul class = 'navigation' >";
		}

... et une boucle pour les <li> (je passe les détails le code est difficilement digérable) pour gérer l'affichage des catégories selon qu'elles ont ou non des sous-catégories :

[...]

 if ((cssMenu_ShowCategory($cssMenuConfig['ShowEmptyCategories'], $totalitemsincategory)) && ($parentID == 0) && ($totalitemsincategory > 1)  ) {
              $returnval .= "<li class='toggleSubMenu'><span>".$categories['categories_name'].$count_string."</span>\n";
          }
		  if ((cssMenu_ShowCategory($cssMenuConfig['ShowEmptyCategories'], $totalitemsincategory)) && ($parentID == 0) && ($totalitemsincategory == 1)  ) {
              $returnval .= "<li><a href='".$categories_string."'>".$categories['categories_name'].$count_string."</a>\n";
          }
		 
		  if ((cssMenu_ShowCategory($cssMenuConfig['ShowEmptyCategories'], $totalitemsincategory)) && ($parentID != 0)) {
              $returnval .= "<li><a href='".$categories_string."'>".$categories['categories_name'].$count_string."</a>\n";
          }

[...]

Plus j'avance et plus je me dis que c'est peut-être un problème d'optimisation (mise en cache ?). Ceci dit, j'ai essayé avec un menu déroulant en css + js avec affichage des sous-catégories en rollover et il n'y a pas du tout ce problème (mais ce ne sont pas les mêmes fonctions non plus )

voili voilou. J'espère que cela te parlera ...
à bientôt

Salut,

Que contient la page qui pose problème ? Je me suis (re-)renseigné, et l'évènement $(document).ready correspond bien au chargement du DOM par le navigateur, et donc en général il se déclenche avant que le navigateur ne commence à afficher le rendu de la page.

Il existe cependant des cas où le navigateur commence à afficher la page avant d'avoir reçu l'intégralité de l'arbre du document, par exemple lorsqu'il doit afficher un tableau de grande taille.

Dans ce genre de situations, le menu pourrait être affiché déroulé pendant un moment ...
Modifié par Thomas D. (23 Jan 2008 - 16:10)

Pleins de tableaux effectivement avec des include de fichiers ... mais rien de bien long à charger. Je vais faire un essai sur un vrai serveur cette semaine. je te tiendrai au courant.

merci de ton aide, a+

Bonjour,
Je me permets de rebondir sur ce sujet, j'ai le même problème.
Pour faire court, c le même principe que ciscokid, site php avec menu accordéon, basé sur une librairie jquery et variable php récupérée pour changer le css du menu correspondant à la page en cours (action sur l'id du bouton)
Pour moi, le flash apparait uniquement sur IE7 (peut etre le 6 aussi sait pas), par contre sur FF ca marche nickel.
apercu de ce que ca donne : http://rootdje.free.fr
Si vous avez des éclaircissements, suis preneur !!
Merci !!
++

bon, peut être posté un peu trop vite, j'ai remis a jour la librairie jquery en 1.2.1, et plus de problèmes sous IE7 !
++

Bonjour,

Complément sur ce que j'ai dit : placé sur un serveur distant il n'y a plus aucun problème ! Tout est donc ok.

Petite question sup' à Thomas : le menu en accordéon est-il censé se refermer sur la catégorie en cours à chaque fois que l'on "déplie" une nouvelle catégorie ? Car pour le moment je peux déplier tout le menu sans jamais qu'aucune catégorie ne se referme. Le seul moyen est de cliquer à nouveau sur la catégorie (lorsqu'elle l'image d'arrière plan est un 'moins'). Les seniors (ma cible) ne comprennent pas

PS : comme je te le disais, j'ai adapté ce menu pour une génération dynamique des catégories dans une boutique oscommerce. Le code html est aux normes (liste de puces emboitées : c'est le tien). Le créateur m'autorise-t-il à poster mon script sur le forum oscommerce (en citant ma source bien entendu) ?
a++

Salut,

a écrit :
le menu en accordéon est-il censé se refermer sur la catégorie en cours à chaque fois que l'on "déplie" une nouvelle catégorie ?

Oui, normalement il n'y a jamais qu'un seul sous-menu ouvert à la fois.

a écrit :
Le créateur m'autorise-t-il à poster mon script sur le forum oscommerce (en citant ma source bien entendu) ?

Ça me semble tout a fait en accord avec les termes de la licence du tutoriel