Bonjour,

j'ai trouvé un chouette menu déroulant accordéon sur le net, j'ai adapté le css et je le trouve parfait (simple et efficace).

Voici le lien du script ou vous pourrez retrouver toute la source : http://www.spawnrider.net/blogs/demos/mh/#

Et voici le lien de mon site ou j'ai adapté le menu accordéon : http://www.mariage-anniversaire.be

Malheureusement, il est un peu trop simple, j'aurai souhaité y ajouter une option ou 2.

Tout d'abord, j'aimerais que quand le script charge pour la première fois, le 1er menu s'ouvre automatiquement afin d'occuper l'espace visuel alloué au menu déroulant.

supprimer le .hide pour le smenu1 ! Si quelq'un saurait m'aiguiller comment mettre le code javascript à jour afin d'y arriver ?

Et deuxièmement, lorsque l'on clique sur un lien d'un sous menu, et qu'on charge une nouvelle page, le menu déroulant se referme et revient à son statut initial (c'est à dire fermé)

Il serait parfait que en fonction de la page ou l'on se trouve sur le site, le sous menu approprié du menu déroulant reste ouvert.

Ce menu accordéon deviendrait alors parfait !! Le full option que tout le monde recherche ^^

J'espère que quelqu'un pourra m'aider,
merci d'avance,
voici le code du menu.js

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function addEvent(obj, type, fn) {
	if( obj.attachEvent ) {
			obj["e"+type+fn] = fn;
			obj[type+fn] = function(){obj["e"+type+fn]( window.event );};
			obj.attachEvent( "on"+type, obj[type+fn] );
	} else {
			obj.addEventListener( type, fn, true );
	};
}
 
function initMenus() {
	/*Activate/desactivate menus*/
	$$('.smenu').each(function(s,index){
		addEvent(s,'click',function(){
			if($('smenu'+s.id.replace('a','')).visible()){
				//do nothing
			} else {
				$$('.smenu').each(function(s,index){
					if($('smenu'+s.id.replace('a','')).visible()) {
						//$('smenu'+s.id).hide(); //Prototype Method
						Effect.BlindUp($('smenu'+s.id.replace('a','')), {duration:0.5}); //ScriptAculoUs Method
					}
				});
				//$('smenu'+s.id).show(); //Prototype Method
				Effect.BlindDown($('smenu'+s.id.replace('a','')), {duration:0.5}); //ScriptAculoUs Method
			}
		});
	});
 
	/*All menu hiden by default*/
	$$('.smenu').each(function(s,index){
		if($('smenu'+s.id.replace('a','')).visible()) {
			$('smenu'+s.id.replace('a','')).hide();			
		}
	});
 
}
 
addEvent(window, 'load', initMenus);
Et voici le code html :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
 
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Spawnrider :: Menu Horizontal</title>
	<link rel="stylesheet" type="text/css" href="menu.css" />
	<script type="text/javascript" src="prototype.js"></script>
	<script type="text/javascript" src="effects/scriptaculous.js" ></script>
	<script type="text/javascript" src="menu.js"></script>
</head>
 
<body>
	<li>Author: <a href="http://www.spawnrider.net/blogs/" target="_blank">Yohann CIURLIK - Spawnrider.Net</a></li><hr>
	<div id="menus">
		<dl id="menu">
			<dt><a href="#"><span style="background-image: url(bug.png);">Menu 1</span></a></dt>
			<dt class="smenu" id="a2"><span style="background-image: url(bug.png);">Menu 2</span></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">sub-menu 2.1</a></li>
					<li><a href="#">sub-menu 2.2</a></li>
					<li><a href="#">sub-menu 2.3</a></li>
				</ul>
			</dd>	
			<dt class="smenu" id="a3"><span style="background-image: url(bug.png);">Menu 3</span></dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">sub-menu 3.1</a></li>
					<li><a href="#">sub-menu 3.1</a></li>
					<li><a href="#">sub-menu 3.1</a></li>
					<li><a href="#">sub-menu 3.1</a></li>
					<li><a href="#">sub-menu 3.1</a></li>
					<li><a href="#">sub-menu 3.1</a></li>
				</ul>
			</dd>
			<dt class="smenu" id="a4"><span style="background-image: url(bug.png);">Menu 4</span></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">sub-menu 4.1</a></li>
					<li><a href="#">sub-menu 4.1</a></li>
				</ul>
			</dd>
		</dl>
	</div>
</body>
 
</html>
Pour information voici le code html adapté pour mon site http://www.mariage-anniversaire.be :


Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!-- DEBUT MENU SLIDER -->																
 <div id="left-column">																
 	<div id="menus">
 		<dl id="menu">
 			<!-- <dt><a href="#"><span style="background-image: url(bug.png);">Menu 1</span></a></dt> -->
 			<dt class="smenu" id="a2"><span class="button-dj-title-left-column">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;DJ professionnels mariage</span></dt>
 			<dd id="smenu2">
 				<ul>
 					<li><div style="display:block;height:20px;"></div><a href="http://www.mariage-anniversaire.be/dj/dj-mariage.html" title="Pr&eacute;sentation DJ mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Pr&eacute;sentation DJ mariage</a></li>
 					<li><a href="http://www.mariage-anniversaire.be/dj/animation-mariage.html" title="Animation soir&eacute;e mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Animation soir&eacute;e mariage</a></li>
 					<li><a href="http://www.mariage-anniversaire.be/dj/conseil-animation-soiree.html" title="Conseil animation soir&eacute;e mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Conseil animation soir&eacute;e</a></li>
 					<li><a href="http://www.mariage-anniversaire.be/dj/musique-mariage.html" title="Th&egrave;ùe musique mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Th&egrave;me musique mariage</a></li>
 					<li><a href="http://www.mariage-anniversaire.be/dj/tarif-dj-mariage.html" title="Tarif et prix Dj mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Tarif et prix DJ mariage</a></li>
  					<li><a href="http://www.mariage-anniversaire.be/animaton/sonorisation/son.html" title="Pr&eacute;sentation sonorisation"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Pr&eacute;sentation sonorisation</a></li>
 					<li><a href="http://www.mariage-anniversaire.be/animaton/sonorisation/light.html" title="Pr&eacute;sentation &eacute;clairage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Pr&eacute;sentation &eacute;clairage</a></li>
  					<li><a href="http://www.mariage-anniversaire.be/contact-dj" title="Contact DJ mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Contact DJ mariage</a></li>
  				</ul>
  			</dd>	
   			<dt class="smenu" id="a3"><span class="button-mag-title-left-column ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Magicien pour anniversaire</span></dt>
 			<dd id="smenu3">
  				<ul>
  					<li><div style="display:block;height:20px;"></div><a href="http://www.mariage-anniversaire.be/magicien/magicien-anniversaire.html" title="Magicien pour anniversaire"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Pr&eacute;sentation magicien</a></li>
  					<li><a href="http://www.mariage-anniversaire.be/contact-magicien" title="Contact magicien"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Contact magicien</a></li>
  				</ul>
  			</dd>
  			<dt class="smenu" id="a4"><span class="button-org-title-left-column">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Organisation mariage</span></dt>
 			<dd id="smenu4">
  				<ul>
  					<li><div style="display:block;height:20px;"></div><a href="http://www.mariage-anniversaire.be/service/faire-part.html" title="Faire-part mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Faire-part mariage</a></li>
  					<li><a href="http://www.mariage-anniversaire.be/organisation/achat/livres" title="Livre mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Livres sur le mariage</a></li>
  				</ul>
			</dd>
  			<dt class="smenu" id="a5"><span class="button-con-title-left-column">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Conseil organisation mariage</span></dt>
 			<dd id="smenu5">
  				<ul>
  					<li><div style="display:block;height:20px;"></div><a href="http://www.mariage-anniversaire.be/conseils/reception-originale.html" title="R&eacute;ception originale"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">R&eacute;ception originale</a></li>
  					<li><a href="http://www.mariage-anniversaire.be/conseils/condition-loi-belge.html" title="Conditions de la loi belge"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Conditions de la loi belge</a></li>
  					<li><a href="http://www.mariage-anniversaire.be/conseils/loi-belge.html" title="La loi belge et le mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">La loi belge et le mariage</a></li>
  					<li><a href="http://www.mariage-anniversaire.be/conseils/bague-fiancailles.html" title="La bague de fian&ccedil;ailles"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">La bague de fian&ccedil;ailles</a></li>
  					<li><a href="http://www.mariage-anniversaire.be/conseils/compte-a-rebours.html" title="Le compte &agrave; rebours"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Le compte &agrave; rebours</a></li>
  					<li><a href="http://www.mariage-anniversaire.be/conseils/invites-et-temoins.html" title="Les invit&eacute;s et t&eacute;moins"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Les invit&eacute;s et les t&eacute;moins</a></li>
 					<li><a href="http://www.mariage-anniversaire.be/conseils/fiancailles.html" title="Les fian&ccedil;ailles"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Les fian&ccedil;ailles</a></li>
  					<li><a href="http://www.mariage-anniversaire.be/conseils/la-liste.html" title="La liste de mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">La liste de mariage</a></li>
   				</ul>
			</dd>
 		</dl>
  	</div>
</div>
<!-- FIN MENU SLIDER -->
Bonne journée,