Comment changer un élément de menu dynamiquement

Version imprimable

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 :oops::oops:: 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></a>  <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>  </li> </ul> <div class="nav-divider"> </div> <ul class="current"> <li><a href="#nogo"><b>MENU 2</b></a>  <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>  </li> </ul> <div class="nav-divider"> </div>

26/12/2010, 15h29
ornitho13

Bonjour et joyeux noel à toi.

As tu le css associé?

merci
26/12/2010, 15h30
iviewclear

Citation:

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
26/12/2010, 15h32
ornitho13

met un lien vers l'endroit ou je pourrais le récupérer :)
26/12/2010, 15h40
iviewclear

Citation:

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 !!! :ccool::ccool::ccool:
26/12/2010, 15h53
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
26/12/2010, 15h57
iviewclear

Citation:

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é
26/12/2010, 16h06
ornitho13

okay j'ai tout, je regarde ça
26/12/2010, 16h09
iviewclear

MERCI ! Thank you ! Danke !!! Gracias !

Citation:

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 !!!!

voila,

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

Code:

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

Citation:

Envoyé par ornitho13

voila,

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

Code:

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

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 :P:P:P:P
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