Problème avec menu déroulant Jquery

Salut à toi gens des développeurs et metteur en écran de la toile en tous genre,


Jeune graphiste fraichement diplôme et fortement intéressé par le web, je me suis récemment lancé dans la conception de thèmes wordpress avec une maîtrise des css parfois aléatoire et une connaissance basique du html. Toutefois après quelques turpitudes et tribulations, je suis parvenu cahin-caha à mes fins. Les tutoriels d'alsacréation et autres sites de web développement m'ont permis de "bricoler" des sites de plus en plus aboutis (à mon niveau en tous cas).
Mais là, c'est le drame. Depuis plusieurs semaines je butte sur un problème qui peut être vous semblera évident (je l'espère d'une certaine manière), en voici donc l'énoncé.

Tout d'abord mon site qui servira d'illustration au problème :

Comme vous pouvez le constater je l'ai crée via wordpress.
Mon menu déroulant est réalisé grâce au tutoriel d'alsacréation.
Le problème qui se pose c'est que lorsqu'on clique sur un lien du "submenu", toute la page se recharge et le menu se "ré-enroule". Normal en somme.
Bref, je désirerai pouvoir parvenir à faire en sorte que le menu reste déroulé lorsqu'on affiche les articles "submenu" afin que l'utilisateur puisse naviguer plus facilement entre les différents travaux.
Si quelqu'un a une idée, je suis preneur.

Merci à ceux qui auront eu le courage de me lire jusqu'au bout
Modifié par iouca (28 May 2010 - 21:57)

C'est normal... un lien, ça recharge la page !

Peux tu changer le type de tes sous menus ? Je veux dire par là, à la place d'avoir :

<a href="http://www.iouca.fr/?p=30">f.u.c.k.</a>

il faudrait que tu aies

<div class="submenuitem" rel="http://www.iouca.fr/?p=30">f.u.c.k.</a>

puis il faudrait que tu rajoutes un truc du genre :

$(document).ready(function()
{
$(".submenuitem").click(function()
{
var url=$(this).attr('rel');
if(!url) return;
$('#content').text('Chargement....');
$.ajax({'url':url,'error':function(){$('#content').text('Erreur de chargement de '+url);},'success':function(txt){ $('#content').html($(txt).children('#content'));}});
});
}

dis moi si ça marche

EDIT : ah oui... un détail :
Cette solution, qui est du tout-en-ajax, est déconseillée (si pas accompagnée d'une version du site en html pur) si tu veux que le contenu de ton site soit répertorié dans son intégralité par les moteurs de recherche.
Mais c'est la seule solution propre si tu veux que ta page ne se recharge pas

reEDIT : Même si en l'occurrence, elle n'est pas très propre, étant donné que tu recharche en toute la page en arrière plan (donc le menu y compris) pour n'extraire qu'une partie de celle ci : son contenu.
Modifié par icareo (29 May 2010 - 14:48)

Bon, apparement tu as mis mon code sur ton site.
Déjà, il y a un coquille (si tu utilises firebug, il doit te donner une erreur au chargement de ta page):

$('#content').text('Erreur de chargement de '+url;

il manque la parenthèse fermante :

$('#content').text('Erreur de chargement de '+url);

Ensuite, avec firebug, toujours...explore un peu la structure de tes menus :
Apparemment, tu as oublié de fermer les divs de chaque lien :

Ok merci. Là normalement c'est bon, toutefois, ça ne reste pas ouvert après avoir cliqué ...

iouca a écrit :
Ok merci. Là normalement c'est bon, toutefois, ça ne reste pas ouvert après avoir cliqué ...

Si ça ne reste pas ouvert, c'est que tu cliques sur un lien.
Tes divs contiennent un lien :

<div class="submenuitem" rel="......">
  <a href="....">titre</a>
</div>

doit devenir un truc du genre

<div class="submenuitem" rel="......">
  titre
</div>

ou encore

<a href="....">
<div class="submenuitem" rel="......">
  titre
</div>
</a>

... cette dernière solution devrait marcher même dans le cas ou l'utilisateur veut ouvrir le lien dans un autre onglet.
Ceci dit, pour éviter la propagation de l'évènement onclick, tu dois modifier ta fonction onclick et lui faire retourner 'false' .
(i.e la fonction $('.submenuitem').click(function(){ blabla }); doit devenir $('.submenuitem').click(function(){ blabla ; return false; }); )