Probleme menu jquery

bonjour
j'ai un petit probleme avec le menu lavalamp de mon portfolio!! www.bellidesign.fr

le border-bottom se deplace bien au survol de la souris ! mais une fois que je clique sur une des rubrique du menu la page se charge bien ! mais le border-bottom revient a son point inital l'accueil !! et pourtant il ajoute bien la class active !!!
quelqu'un aurai la solution
merci !!!!

JS

//menu lavalamp	
$('ul#menu').lavaLamp();

$('ul#menu li a').click(function(){
   $('ul#menu li').removeClass('selectedLava');
   $(this).parent().addClass('selectedLava');
});

HTML

<div id="lavamenu">
  <ul id="menu">	
    <li class="selectedLava"><a href="accueil" class="accueil"><span>Accueil</span></a>  </li>
    <li><a href="a_propos" class="a_propos"><span>À propos</span></a></li>
    <li><a href="portfolio" class="portfolio"><span>Portfolio</span></a></li>
    <li><a href="blog" class="blog"><span>Blog</span></a></li>
    <li><a href="contact" class="contact"><span>Contact</span></a></li>
  </ul>
</div>

CSS

ul#menu { list-style:none; overflow:auto}
ul#menu li{list-style-type:none;	margin:23px 20px 0 0; padding:45px 10px 18px 10px;	 float:left; font-family:avant-garde; font-size:1.7em; color:#333}
@media screen and (-webkit-min-device-pixel-ratio:0) { ul#menu li { padding:45px 10px 19px 10px;}}	
ul#menu li a{list-style-type:none; color:#363636; text-decoration:none;}
ul#menu li a:hover{ color:#000}
ul#menu li span { position: relative; z-index: 5}
ul#menu li.backLava { position:absolute; z-index:3; border-bottom:#000 1px solid}

www.bellidesign.fr
Modifié par bellisylvain (31 Mar 2011 - 23:31)

RE-EDIT
Modifié par bellisylvain (31 Mar 2011 - 23:27)

RE-EDIT
Modifié par bellisylvain (31 Mar 2011 - 23:26)

Salut,

Apparemment la classe doit être appliquée sur le lien, pas sur le <li>, ça donnerait donc :

$('ul#menu li a').click(function(){
      $('ul#menu li a').removeClass('selectedLava');
      $(this).addClass('selectedLava');
});

(ah oui et stp, utilise les balises code, ça aide à la lecture . Et ne poste pas plusieurs fois, édite plutôt ton message initial.)
Modifié par ZeB_panam (31 Mar 2011 - 23:18)

oui desolé ! je n'avais pas vu qu'il y avai des balises special!!!
sinon j'ai fais le changement dans le .js et le resultat est le meme ...
mais c'est peut etre cycle qui derange ...

ok donc j'ai remplacé ce code

<div id="lavamenu">
	<ul id="menu">					
		<li><a href="accueil" class="accueil">Accueil</a></li>
		<li><a href="a_propos" class="a_propos">À propos</a></li>
		<li><a href="portfolio" class="portfolio"><span>Portfolio</span></a></li>
		<li><a href="blog" class="blog"><span>Blog</span></a></li>
		<li><a href="contact" class="contact"><span>Contact</span></a></li>
	</ul>
</div>	

par

<div id="lavamenu">
	<ul id="menu">					
		<li><a href="#"><span>Accueil</span></a></li>
		<li><a href="#"><span>A propos</span></a></li>
		<li><a href="#"><span>Portfolio</span></a></li>
		<li><a href="#"><span>Blog</span></a></li>
		<li><a href="#"><span>Contact</span></a></li>
	</ul>
</div>	

je n'ai donc plus les liens de mes pages qui utilise cycle! mais quand je clique sur une rubrique du menu la bordure reste bien active et ne reviens plus sur accueil !!
le probleme vient donc de cycle !!!

quelqun a une idee pour contourner le pb ???
Modifié par bellisylvain (31 Mar 2011 - 23:50)

Non à priori le plug-in cycle ne devrait pas poser de problèmes…
Étrange manière d'afficher les contenus d'ailleurs. J'ai plus l'habitude d'utiliser de l'ajax pour ça… Néanmoins, ça a l'avantage d'avoir tout le contenu indexable par les moteurs de recherche. Mais ça a la le désavantage de charger du contenu inutile (car l'utilisateur n'ira pas forcément visiter toutes les parties de ton site).

Sinon, es-tu sûr que lavaLamp est compatible avec la dernière version de jQuery ? Elle est notée compatible 1.4.4, mais pas au dessus. Essayes avec cette version au cas où…
Si ça ne marche toujours pas, commente tout ton fichier global.js, sauf la partie qui concerne lavaLamp. Et commente aussi l'appel à jquery.cycle.all.min.js dans ton index.

En isolant les scripts, il est plus facile de voir si le bug est dû à une incompatibilité.

MAJ : Ah bah tu viens de répondre à ma question
Je te conseille donc d'éviter l'affichage des pages via le plug-in cycle, mais plutôt via des chargement grâce à ajax(). Il y aura par contre un peu de boulot à faire pour que l'indexation via les moteurs de recherche des pages à charger soit effective, mais ça en vaut la peine.
Modifié par ZeB_panam (31 Mar 2011 - 23:59)

ah ouai ajax ! ahah je connais pas du tout je sais meme pas a quoi ca ressemble!! comment ca fonctionne!! mais tu es sur quil n'y a pas une autre solution autre que ajax ???
merci pour ton aide

sinon jai testé differente version jquery inferieur a 1.4.4 et toujour pareil!!

OK, essaye ça :

function lavaClass(classItem){
	$('ul#menu li a').removeClass('selectedLava');
	$('ul#menu li a.'+classItem).addClass('selectedLava');
}
jQuery(function ($) {

//menu lavalamp
	$('ul#menu').lavaLamp();


//menu
	$('#content').cycle({timeout:0, speed:500, startingSlide:0});

	$('a.accueil').click(function() {$('#content').cycle(0); lavaClass('accueil');return false;});
	$('a.a_propos').click(function() {$('#content').cycle(1); lavaClass('a_propos');return false;});
	$('a.portfolio').click(function() {$('#content').cycle(2); lavaClass('portfolio');return false;});
	$('a.blog').click(function() {$('#content').cycle(3); lavaClass('blog');return false;}); 	 
	$('a.contact').click(function() {$('#content').cycle(4); lavaClass('contact');return false;});
});

Sinon la fonction ajax() de jQuery est assez simple à utiliser, tu devrais te pencher là-dessus. Car avec ton système de cycle, ça va vite devenir une usine à gaz.
Modifié par ZeB_panam (01 Apr 2011 - 01:07)

ok en faite cetait plus simple que ca!! il fallai juste mettre la class de chaque page dans le <li> au lieu du <a> ce qui donne juste ca pour le js:

//menu
				$('#content').cycle({timeout:0, speed:500, startingSlide:0});
					
				$('li.accueil').click(function() {$('#content').cycle(0); return false;});
				$('li.a_propos').click(function() {$('#content').cycle(1); return false;});
				$('li.portfolio').click(function() {$('#content').cycle(2); return false;});
				$('li.blog').click(function() {$('#content').cycle(3); return false;}); 	 
				$('li.contact').click(function() {$('#content').cycle(4); return false;});
						
				//menu lavalamp			
				$('ul#menu').lavaLamp();

et pour la partie html :

<div id="lavamenu">
				<ul id="menu">					
					<li class="accueil"><a href="accueil" ><span>Accueil</span></a></li>
					<li class="a_propos"><a href="a_propos"><span>A propos</span></a></li>
					<li class="portfolio"><a href="portfolio" ><span>Portfolio</span></a></li>
					<li class="blog"><a href="blog"><span>Blog</span></a></li>
					<li class="contact"><a href="contact"><span>Contact</span></a></li>
				</ul>
			</div>

rien de plus !!

merci beaucoup pour aide !!!!
Modifié par bellisylvain (01 Apr 2011 - 14:24)

bas en fin de compte nan ! cetait vraiment plus simple que ca !

en faite le plugin lavalamp génère tout seul la class selectedlava!
Modifié par bellisylvain (01 Apr 2011 - 14:42)