Je voudrais faire quelque chose pour mon site, mais en fait justement je ne connais pas le nom du quelque chose et je ne parviens pas à le trouver sur Google. Peut être pourriez vous m'aiguillez ?
Dans un premier temps mon menu déroulant fonctionne parfaitement. Il est horizontal, et quand je passe la souris sur un lien un sous menu vertical apparait.
Sauf qu'en fait je voudrais que ce sous menu n'apparaisse pas d'un coup, mais qu'il défile du haut vers le bas. J'espère que je me fais à peu près comprendre.
Regardez sur ce site : http://www.monclocher.com/
Je voudrais en fait que ça produise le même effet que les images en dessous du slideshow.

d'avance pour votre aide

Google: http://dmouronval.developpez.com/tutoriels/javascript/jquery/menu-anime/ Pour ce tuto, change le onclick en onblur, çà devrais marcher. Si ça ne marche pas, je ne peut pas t'aider, j'y connais rien en JS.

En fait, en replaçant le click par mouseover ca marche mais il faut repasser la souris de dessus pour l'enlever.

animation c'est le mot qu'il me fallait.
En revanche je n'arrive pas bien à adapter mon menu à moi à ces animations.
Ce qui est bizarre aussi c'est que Firebug dit qu'il y a une erreur : "ReferenceError: $ is not defined
[Stopper sur une erreur]

$(document).ready(function () {"

Sinon mon code html est celui là :
<ul id="menu">
<li><a href="">Accueil</a></li>
<li><a href="">Créations</a>
<ul>
<li><a href="#">Lien 1</a></li>
<li><a href="#">Lien 2</a></li>
</ul>
</li>
<li><a href="">Autres</a></li>
</ul>

Le CSS celui là :

1. menu {

background-image: url(images/menu.png);
background-repeat: repeat-x;
background-color: #568dd2;
border-radius: 10px 10px 0 0;
width: 100%;
height: 30px;
}

1. menu ul{

list-style-type: none;
margin: 0;
padding: 0;
float: left;
}

1. menu li {

float: left;
}

1. menu a {

display: block;
padding: 5px;
text-decoration: none;
color: black;
}

1. menu a:hover {

background-image: url(images/menuhover.png);
background-repeat: no-repeat;
background-position: top center;
color: white;
}

1. menu li ul {

position: absolute; /* Position absolue */
width: 120px; /* Largeur des sous-listes */
left: -999em; /* On envoie loin du champ de vision */
list-style-type: none;
padding: 0;
}

1. menu li:hover ul, #menu li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste */

{
left: auto; /* Repositionnement normal */
min-height: 0; /* Corrige un bug sous IE */
}

1. menu li li {

float: none;
}

1. menu li li a {

height: 20px;
}

1. menu li ul li a{

background-image: none;
background: url(images/fond_noir2.png);
color: white;
}

1. menu li ul li a:hover{

background: url(images/fond_noir2.png);
text-decoration: underline;
}

Et en guise de JS j'avais mis :
<script type="text/javascript">
$(document).ready(function () {
$('#menu a').click(function () {
$('#menu li ul').slideToggle('medium');
});
});
</script>

Pourriez vous me donner un coup de main ?

Il faut mettre jQuery pour pouvoir utiliser $ comme tu le fais.

Ok pour ça qu'en mettant le code du mec j'y arrivais pas non plus.
Ou trouve-t-on Jquery en question ? Je suis aps du tout connaisseur là-dedans. C'est drôle parce que j'ai installé un slideshow en Jquery et j'ai pas eu besoin de sa librarie

Non en fait j'ai pris ça sur leur site officiel : http://code.jquery.com/jquery-1.8.3.min.js
Plus d'erreur, en revanche mon menu déroule pas.

Enfin si il déroule mais l'animation n'est pas présente
du triple post...

Allez quatrième post d'affilé, je vais me faire bannir

J'ai appliqué mouseover comme l'a dit axelradio et l'animation est présente. Sauf qu'elle fait un peu ce qu'elle veut. Elle déroule tantôt de bas en haut (pas bon), tantôt de haut en bas. Et surtout, quand je vais sur le menu qui a déroulé elle se referme. En même temps c'est normal il n'y a rien qui lui dit de rester ouverte.
Faudrait mettre quoi alors ?

J'ai eu le meme probleme. Je pense pas que ce soit le bon code, tu veux que je recherche plus ?

Ouais ça serait infiniment sympa de ta part
Je cherche aussi de mon côté.

J'ai trouvé ca: http://jq.creativejuiz.fr/plugins-jquery/dropdown-menu.php

Ceci est pas mal, mais sans JS.

Hummm chez moi il me dit qu'il y a une erreur et que ce script :

<script type="text/javascript">
$(document).ready(function() {
$("#dropdown").juizDropDownMenu();
});
</script>

[...] n'est pas une fonction.

Normal, il faut que tu ajoutes jQuery et le plugin juizDropDownMenu à ta page.

Jquery c'est bon, et l'autre aussi.
Par contre il y a un problème dans leur truc. Le fichier qu'il nous donne à télécharger c'est juizDropDownMenu-2.0.0.min.js et puis dans le script qu'il nous donne à copier c'est marqué juizDropDownMenu-1.5.min.js. Du coup j'ai remplacé mais bon il y a une erreur quand même.

Alors maintenant ça fonctionne par contre ça me dit qu'il y a une erreur quand même...

Désolé pour tous ces postes d'affilé mais bon je découvre au fur et à mesure.
En fait notre fonction n'a pas d'erreur, mais elle ne peut pas cohabiter avec l'autre fonction de mon slideshow. Si je la met, mon slideshow disparait alors qu'il fonctionnait bien, et il me mette une erreur sur la fonction du slideshow. Voilà mon code :

<script type="text/javascript" src="scripts/jquery.js"></script> <!-- Library Jquery -->
<!-- Pour le slideshow -->
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
<!-- Fin slideshow -->
<!-- Pour les animations sur le menu -->
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="scripts/juizDropDownMenu-2.0.0.min.js"></scri
pt>

<script type="text/javascript">
$(function(){
$("#menu").juizDropDownMenu({
'showEffect' : 'fade',
'hideEffect' : 'slide'
});
});
</script>
<!-- Fin -->

J'ai finalement réussi à obtenir exactement ce que je voulais avec un tout petit bout de code.

<!-- Pour les animations sur le menu -->
<script type="text/javascript">
$(document).ready(function(){
$('#menu li').hover(function(){
$(this).find('.sub_menu').slideDown("slow");
},function(){
$(this).find('.sub_menu').slideUp("slow");
});
});
</script>
<!-- Fin animations menu -->

La petite subtilité, c'est qu'il fallait donné un nom au sous menu (.sub_menu), parce que si on met #menu li ul ça ne fonctionnait pas. Allez savoir pourquoi.
Pour le hover c'est un peu la même chose. Si je mettais #menu a ça ne fonctionnait pas, mais #menu li ça fonctionne.

Maintenant que ça marche pour les menus déroulants, je pense que je devrais y arriver sans trop de soucis avec les images.

Merci pour votre aide