Menu en accordéon: tous les sous-menus s'affichent

J'utilise un menu en accordéon réalisé d'après le tutoriel:
http://css.alsacreations.com/Tutoriels-JavaScript/Creer-un-menu-accordeon-avec-jQuery

Lorsque je clique sur un lien du menu et qu'une nouvelle page web se charge, le menu s'affiche entièrement pendant une fraction de seconde avant de se refermer (les menus sont tous développés et on voit tous les sous-menus pendant une fraction de seconde).

Je suppose que cela est dû au Javascript?
Y a-t-il une astuce pour éviter cela?

Pour l'instant, le comportement actuel de la page est perturbant pour l'utilisateur. On dirait que le site "saute" à chaque fois qu'on clique sur un lien.

Merci de votre aide

Cela n'est pas nécessairement dû au javascript, cela peut venir également d'un padding sur les éléments de listes intérieurs. Si c'est le cas, mets plutôt tes paddings sur des éléments à l'intérieur de la liste plutôt que sur celle-ci.

digitalsteph a écrit :
Je suppose que cela est dû au Javascript?

C'est dû au fait que la fonction JavaScript qui cache les sous-menus ne se lance qu'après la construction du DOM (et donc après l'analyse du code HTML par le navigateur, et peut-être du code CSS également).

digitalsteph a écrit :
Y a-t-il une astuce pour éviter cela?

Tu peux éventuellement utiliser une classe «hasJS» (faire une recherche sur ce terme) placée sur l'élément racine (HTML) avant même le chargement du DOM. Et, dans ton CSS, cacher les sous-menus si cette classe est présente.

Problème: placer cette classe via JavaScript permet juste de vérifier que JS est activé. Si JavaScript est activé mais que ta fonction jQuery ne se lance pas ou bugue, alors les sous-menus seront cachés et on ne pourra pas les déplier. Attention donc à bien tester tes pages avec divers navigateurs!