Bonjour à tous

Pendant que certains bronzent, nous on travaille. J'en fais partie et je profite de l'occasion pour poser ma question.
Je dois faire un menu dont les éléments glissent vers le bas lorsque la souris passe par-dessus.J'aurais pu le faire en CSS sans souci, mais j'aimerais qu'il y ait un effet de "glissement". j'en déduis que c'est l'effet Slide de JQuery que je dois utiliser...

Le problème est que je ne sais pas où le prendre et comment l'appliquer, je vois des exemples sur le net mais ils ne présentent pas exactement le menu que j'ai créé.

Si vous pouvez m'orienter ce serait sympa
Pour info, la structure du menu :

<ul id="menu">
<li><a href="index.php">Accueil</a></li>
<li><a href="photovoltaique.php">Photovoltaïque</a></li>
<li><a href="chauffage-isolation.php">Chauffage - Isolation</a></li>
...
</ul>

Merci d'avance !

Salut,

La doc du Slide de JQuery : http://docs.jquery.com/UI/Effects/Slide

Salut Shivaan,
ça marche en effet, j'ai réussi à lui donner la direction et la vitesse que je veux, mais en fait je voudrais que l'élément descende de moitié seulement et pas entièrement :

j'ai vu l'attribut Distance mais ne sais pas où l'appliquer, j'ai essayé comme ça et ma'che pa' :

$(this).hide("slide", { direction: "down" }, { distance: 20 }, 500);
ou
$(this).hide("slide", { direction: "down", distance: 20 }, 500);

Et question supplémentaire :
Comment dire au script d'agir lors des états Hover et Active des <li> du menu ?
Merci

Essaie ça :

$().ready(function(){
   $("#menu li").hover(function(){
      $(this).hide("slide", { direction: "down", distance: "20px" }, 500);
   },function(){
      $(this).hide("slide", { direction: "up", distance: "20px" }, 500);
   });
});

Merci Shivaan,
mais ben, ça ne marche pas trop... il y a tout qui disparait puis réapparait , sauf l'élément "rollové"
pour se faire une meilleure idée :http://ecovy.fr/V2/

j'ai essayé en donnant une classe unique au <li> en en l'appelant dans le script mais c'est à peu près le même résultat, c'est le menu entier qui s'en va :/

Bon, on va essayer autre chose

$().ready(function(){
   $("#menu li").hover(function(){
      $(this).animate({height:"19px",padding-top:"5px"}, 500);
   },function(){
      $(this).animate({height:"24px",padding-top:"0"}, 500);
   });
});

Ca donne quoi ?

ça ne donne rien, désolé,
je l'ai quand même mis en ligne pour voir si je ne faisais pas d'erreur.

Je ne connaissais pas l'attribut animate, ça génère un slide c'est ça ?

Pourtant, ça m'a l'air déjà plus proche de ce que tu souhaites. Il suffit juste de modifier la distance et la vitesse, et les menus descendent au survol de la souris

J'ai réessayé, à moins que je ne sois à coté de la plaque, je ne vois aucun changement Shivaan
Tu peux le constater ici : http://ecovy.fr/V2/

Merci de prendre tout ce temps pour m'aider, c'est sympa

Mets 5000 au lieu de 500 et vois s'il y a une différence

Sinon : http://api.jquery.com/animate/

Ben écoute, chez moi, le fait de passer la souris sur un lien du menu fait descendre le bloc de 5px. Si j'enlève la souris, ça remonte à sa position initiale. Alors certes, c'est rapide. Mais comme le dit miclebowski, il suffit de jouer sur la vitesse d'animation

J'suis désolé Shivaan, mais il n'y a aucune différnce. L'effet qui apparait est du au CSS qui descend le background de 5px.
Ce n'est pas le JQuery qui fait cela, sinon, ça ferait glisser tout le bloc, son contenu compris. Là, il y a juste le bck qui glisse descend.

J'ai essayé en ralentissant l'effet comme l'indique miclebowski, ce qui me conforte dans mes impressions.

Oui donc ça marche !!
Je n'ai jamais dit que mon script était la solution finale. On a juste exploré des pistes. Donc tu es bien d'accord que de passer ou non la souris fait bouger le bloc blanc (mais pas le reste) ?

Y a une erreur actuellement :

c'est paddingTop et pas padding-top dans animate (propriétés css en notation js)

@Shivaan
Ben non, ça ne marche pas, l'effet en question c'est le CSS que j'avais déjà écrit auparavant.
Encore une fois, le fait de passer la souris sur le <li> ne fait pas descendre le "bloc" mais son "background". Et ce, grâce au CSS, pas au code que tu m'as sympathiquement fourni.
Essaie avec la version ne ligne, tu verras

@miclebowski
Merci, en effet c'est le paddingTop et non padding-top, mais le résultat est chaotique...
J'essaie avec les premiers conseils de Shivaan.
en attendant si tu as une idée...

Le resultat est chaotique, parce que tu mets un display:inline au lieu d'utiliser la technique normale : le float:left;

Oui, bien vu
C'est beaucoup mieux : !!!

Je vais me débrouiller pour trouver comment faire glisser vers le bas et non pas l'inverse.
Je me demande seulement comment faire pour que ce soit tout le bloc (son contenu compris) qui descende et non seulement le div qui contient le <a>.
Est-ce qu'un attribut de ce genre existe ?

merci

Je pense qu'en jouant sur le margin-top, puisque tu es en float, devrait faire l'affaire

Yep!
ça marche !!!

J'ai remplacé les <ul> et <li> par des <div>, c'est plus pratique comme ça je trouve.
Encore une dernière question : Comment faire pour que le <div> qui correspond à la page sur laquelle je me trouve soit "descendu" par défaut ?

Là, je l'ai fait en CSS, mais lorsque je passe la souris dessus, il remonte...