Bonjour,

Je cherche à faire une fonction avec jQuery pour un affichage dynamique de mon menu.

Voici le code html de mon menu :

<ul id="menu">
	<li>Element1</li>
	<li>Element2</li>
	...
	<li>ElementN</li>
</ul>

Je souhaiterai, lorsque je positionne mon curseur sur l'element numero N que celui-ci change de style (par exemple, pour l'evenement mouseOver sur l'element 2, color = #fff) mais je ne sais pas comment m'y prendre pour une liste avec un nombre indéterminé d'elements ?

Merci à vous pour votre aide

Salut, pour faire ça, tu n'as aps besoin de Javascript. Il te suffie de modifier ton code css en rajoutant une partie avec la balise :
#menu li:hover

Salut,

$('#menu li').hover(function(){
  // quand la souris rentre
  $(this).css('color','#fff');  // police blanche
},function(){
  // quand la souris sort
  $(this).css('color','#000'); // police noir
});

@zebrure : :hover sur autre chose que des liens n'est pas disponible sous IE.

Dans ce cas là je crois que focus peut la remplacée, il faut donc mettre :
#menu li:hover, #menu li:focus
dans le css

J'avais pris ça comme exemple simple... mais en fait c'était un peu trop simple xD
Je voudrais savoir s'il est possible de savoir sur quel élément on se situe ?

En fait je souhaite faire "slider" une image en dessous de l'élément sur lequel ma souris est positionné et j'ai donc besoin de savoir sur quel élément je me situe...

Rien de vaut un bon petit dessin :

<img src="imageSlide" />
<ul id="menu">
  <li>Element1</li>
  <li>Element2</li>
    ...
  <li>ElementN</li>
</ul>

Tu vux que l'image soit différente pour chaque élément ou que ce soit la même ?

Pas de problème .

<ul id="menu">
  <li>Element1 <img src="image1" /></li>
  <li>Element2 <img src="image1" /></li>
    ...
  <li>ElementN <img src="imageN" /></li>
</ul>

$(function(){

$('#menu li img').hide();

$('#menu li')
  .mouseenter(function(){
    $('img',this).slideDown('fast');
  })
  .mouseleave(function(){
    $('img',this).slideUp('fast');
  });

});

Il est préférable que les images aient les mêmes dimensions .

Tu as aussi les menus Fisheye et les menus accordéons si c'est ce que tu cherche..

J'ai édit au dessus

Je maintiens qu'un #menu li:hover, #menu li:focus srait le plus rapide et le plus ismple,je te conseille de relir cette page sur le tuto du CSS

Non justement, je compte rajouter des effets jQuery donc inutilisable

C'est à dire à glisser ? L'image sur laquelle on pointe prendra toute la place ?
Si tu veux savoir c'est quel élément de la liste sur lequel on est, suffit de leur mettre un id et de le récupérer avec .attr('id')

Lorsque je pointe ma souris sur l'element <li>, l'image viendra se glisser en dessous (position absolute)

Donc les images ne sont pas contenues chacune dans un élément de la liste #menu ?

l'image ! il n'y a qu'une image qui est slider, toujours la meme.
Comme on voit sur le dessin que j'ai fais au dessus, lorsque je survole l'element bleu, je souhaiterai que l'element rouge se glisse en dessous de l'element bleu

Edit :
Je viens de faire une tentative pour récupéré l'id mais... ça ne fonctionne pas correctement !

$('#menu li').mouseenter(function() {
	alert($('#menu li').attr("id"));
});

> Ca m'affiche l'id du premier element de la liste quelque soit l'element que je survole :/

$(function(){

$('#menu li')
  .mouseenter(function() {
    var li = $(this);
    alert('id: '+li.attr('id')
       +'\nlargeur: '+li.width()
       +'\nhauteur: '+li.height()
       +'\nposition X: '+li.offset().left
       +'\nposition Y: '+li.offset().top
    );
  })
  .each(function(i){
    $(this).attr('id','menu'+i);
  });

});

J'ai pas testé, mais teste .

@zebrure : hover != focus... Je te conseille aussi de relire le tuto sur le CSS.

Edit @Almaju : je sais bien mais c'est pas à Tillix que je parlais, je disais juste à zebrure que sa remarque était fausse. Mais pour le sujet tu as raison $(this) récupères l'objet où s'est produit l'événement.

Mais arrêtez de lui parler CSS ! Il veut du jQuery u_u !

Sinon Tiltix, c'est du côté de $(this) qu'il faut se tourner ! Si tu fais $('#menu li'), tu auras seulement les attributs du premier, c'est normal !

@cerium50 : oui, pardon