Comment changer un élément de menu dynamiquement [Résolu]

[iviewclear]

Bonjour à tous et Joyeux Noel à Tous,


Bon j'ai un petit souci en HTML avec du CSS sur un menu dont j'ai récupéré le code sur Internet.
Vous trouverez en pièce jointe une image pour illustrer mon propos.
Mon menu va être stocké dans mon fichier Index. Les différents items de ce menu chargent les pages correspondantes dans un div 'content'. graçe à de l'Ajax.

Voici ma question de pur débutant : comment faire par conséquent pour que mon menu montre bien au visiteur le dernier menu ainsi que le sous menu cliqué.
Dans l'image on voit bien que par défaut je suis dans le 3ème menu et que le sous menu actif est le sous menu cliqué.
J'ai repéré le <ul class="current">, <div class="select_sub show"> ainsi que le <li class="sub_show"> mais après je suis perdu.

J'ai mis mon code HTML pour vous aider à m'expliquer comment faire.

Je ne vois pas comment modifier mon code dynamiquement puisque cette partie n'est pas censé "bouger".

Merci à vous et encore de joyeuses fêtes !!!

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
 
<ul class="select">
         <li><a href="#nogo"><b>MENU 2</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#nogo">Sous Menu 11</a></li>
<li><a href="#nogo">Sous Menu 22</a></li>
<li><a href="#nogo">Sous Menu 33</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<div class="nav-divider">&nbsp;</div>
 
<ul class="current">
<li><a href="#nogo"><b>MENU 2</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub show">
<ul class="sub">
<li><a href="#nogo">Sous Menu 1</a></li>
<li class="sub_show"><a href="#nogo">Sous Menu 2 cliqué</a></li>
<li><a href="#nogo">Sous Menu 3</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
 <div class="nav-divider">&nbsp;</div>

[ornitho13]

Bonjour et joyeux noel à toi.

As tu le css associé?

merci

[iviewclear]

Envoyé par ornitho13

Bonjour et joyeux noel à toi.

As tu le css associé?

merci

Oui mais il est assez conséquent comme tout CSS de site récupére !!!
Tu le veux quand même ???
Merci à toi

[ornitho13]

met un lien vers l'endroit ou je pourrais le récupérer

[iviewclear]

Envoyé par ornitho13

met un lien vers l'endroit ou je pourrais le récupérer

Ben voila je t'ai joins le fichier CSS
As tu besoin aussi de mon fichier index.php ? Je te l'ai mis au cas où !
Merci de ton aide en tout cas, c'est vachement sympa, de plus un 26 décembre !!!

[ornitho13]

J'ai utilisé tes fichiers mais je n'ai pas de rendu, à cause surement des fichiers JS que je n'ai pas. Aurais tu moyen de publier ton site sur un serveur auquel j'aurais accès afin de voir le problème.

merci

[iviewclear]

Envoyé par ornitho13

J'ai utilisé tes fichiers mais je n'ai pas de rendu, à cause surement des fichiers JS que je n'ai pas. Aurais tu moyen de publier ton site sur un serveur auquel j'aurais accès afin de voir le problème.

merci

Non mais je peux te les zipper si tu veux
Voila
Par contre je suis en serveur local notamment pour faire fonctionner l'ajax et aussi pour plus tard pour faire fonctionner le PHP
Merci à toi pour le temps accordé

[ornitho13]

okay j'ai tout, je regarde ça

[iviewclear]

Envoyé par ornitho13

okay j'ai tout, je regarde ça

Les sources originales du template sont ici : http://www.netdreams.co.uk/index.php...-for-download/ si besoin est

Merci MILLE FOIS !!!!

[ornitho13]

voila,

rajoutes après ton '.nav-outer-repeat' ce code:

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<script type="text/javascript">
	$(function(){
		$('.sub li').click(function(){
			$('.sub li').each(function(){
				$(this).removeClass();
			});
			$(this).addClass('sub_show');
			$(this).closest('.nav').find('.table > ul').attr('class', 'select');
			$(this).closest('.nav').find('.table > ul').find('.select_sub').attr('class', 'select_sub');
			$(this).parent().parent().parent().parent().attr('class', 'current');
			$(this).parent().parent().addClass('show');
		});
	});
</script>

cela gérera ton menu, par contre je ne l'ai pas fait pour IE. Il faudra donc que tu rajoutes du javascript

[iviewclear]

Envoyé par ornitho13

voila,

rajoutes après ton '.nav-outer-repeat' ce code:

Code html :

cela gérera ton menu, par contre je ne l'ai pas fait pour IE. Il faudra donc que tu rajoutes du javascript

Mais c'est carrément génial cela fonctionne !!!!!!!!!
Ben je crois bien que je vais considérer ce ptit bout de code comme mon cadeau de Noel
Je te remercie pour cette aide précieuse et le temps accordé !!!

PS : à la prochaine pour de futures aventures car ce n'est que le début !!!

encore merci ornitho13