Hello tout le monde

Lors de la réalisation de mon site web, je me suis dit que ça serait pas mal d'y mettre un petit menu... (logique, nan )

mon menu se présente comme ceci :

MONMENU

• lien01
• lien02
• lien03
• etc...

Quand je clique sur "MONMENU" la liste à puce disparait !!! Mais j'aimerais y ajouter un petit effet de glissement, pour rendre un peu plus élégant... laissez moi vous présenter mon code.

Voilà ma petite fonction Javascript :

function deroule(id_menu)
{
if(id_menu=='menu01')
{
   if(i01==0)
   {
      if(document.getElementById)
	  {
	  document.getElementById(id_menu).style.visibility = 'hidden'
	  document.getElementById(id_menu).style.position = 'absolute'
	  }
	  i01 = 1;
   }
   else
   {
      if(document.getElementById)
	  {
	  document.getElementById(id_menu).style.visibility = 'visible'
	  document.getElementById(id_menu).style.position = 'static'
	  }
	  i01 = 0;
   }
}

Et ici mon code HTML :

<div class="menu_title" onClick="deroule('menu01');"><p>MONSITE</p></div>
	  <div id="menu01">
	  <div class="menu_link"><p>&#187; <a href="#">lien01</a></p></div>
	  <div class="menu_link"><p>&#187; <a href="#">lien02</a></p></div>
	  <div class="menu_link"><p>&#187; <a href="#">lien03</a></p></div>
	  <div class="menu_link"><p>&#187; <a href="#">etc...</a></p></div>
	  </div>

J'espère que vous pourrez m'aider Merci d'ores et déjà !

Byebye

regarde du coté de jquery et de la fonction fade si je m'en souviens bien de tête.

Merci

J'ai trouvé ici un effet qui m'interresse...
Maintenant, que dois-je faire ?

J'suis un newbie en javascript =P sorry

tu inclus le fichier jquery qui est téléchargeable et tu remplace ton code js par:

$(document).ready(function()
{
$("#menu").hide();

if ($("#menu").is(":hidden")) { 
$("#id_menu").slideDown(600);
}
else
{
$("#id_menu").slideUp(600);
}
});

<div id="menu" class="menu_title"><p>MONSITE</p></div>
	  <div id="id_menu">
	  <div class="menu_link"><p>&#187; <a href="#">lien01</a></p></div>
	  <div class="menu_link"><p>&#187; <a href="#">lien02</a></p></div>
	  <div class="menu_link"><p>&#187; <a href="#">lien03</a></p></div>
	  <div class="menu_link"><p>&#187; <a href="#">etc...</a></p></div>
</div>

Voila, je crois que je ne me suis pas trompé.

Mon titre est devenu invisible oO impossible de cliquer dessus é_è

erreur de ma part
pardon

voila

$(document).ready(function()
{
$("#id_menu").hide();

if ($("#menu").is(":hidden")) { 
$("#id_menu").slideDown(600);
}
else
{
$("#id_menu").slideUp(600);
}
});

Maintenant c'est les liens qui on disparu...

J'ai beau cliquer sur le titre du menu, rien ne se passe...
Est-ce qu'il faut rajouter un onClick quelque part ?

encore une erreur

$(document).ready(function()
{
$("#id_menu").hide();

if ($("#id_menu").is(":hidden")) {
$("#id_menu").slideDown(600);
}
else
{
$("#id_menu").slideUp(600);
}
});

Bon cette fois au chargement de la page, il m'ouvre le menu...
mais impossible de le refermer en cliquant sur le titre du menu...

J'trouve bizarre la structure de ce javascript... j'ai de la peine à la comprendre

remplace slideUp par hide

Regarde ce que j'ai fait

function up()
{
   if($("#id_menu").is(":hidden"))
   {
      $("#id_menu").slideDown(600);
   }
   else
   {
      $("#id_menu").slideUp(600);
   }
}

et dans mon HTML j'ai mis ça :

<div id="menu" onClick="up()"></div>

Et hop ! ça marche !!!

Merci beaucoup pour ton aide

Bonne soirée

Après, pour t'entrainer, tu devrait essayer de reproduire cet effet sans utiliser jquery.
Ton code sera forcement plus adapter, plus facilement modifiables, et puis c'est un bon entrainement.

je suis d'accord avec toi, mais le developpement c'est également apprendre et comprendre a utiliser les scripts ou éléments déjà fait.

Pour l'info, je suis informaticien ! Donc oui, je vais un jour ou l'autre voir pour faire moi même ce script =P

Bonne soirée et merci encore