Menu accord�on en javascript. Full option

**sebjador** · 08/09/2011, 16h29

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,

**SpaceFrog** · 08/09/2011, 17h10

il existe des plugin accordion en jquery avec une classe selected pour le menu actif ...

**sebjador** · 14/09/2011, 11h37

Pourrais-tu me donner le nom de ces plugins, que je les teste tout de suite ^^

j'en ai d�j� tester plusieurs, mais il n'y avait jamais tout ce que je cherchais.

Merci d'avance,

**sekaijin** · 14/09/2011, 13h42

un autre tr�s complet qui permet de mettre ce qu'on veux dans l'accord�on
ici juste du 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
Ext.create('Ext.panel.Panel', {
    title: 'Accordion Layout',
    width: 300,
    height: 300,
    layout:'accordion',
    defaults: {
        // applied to each contained panel
        bodyStyle: 'padding:15px'
    },
    layoutConfig: {
        // layout-specific configs go here
        titleCollapse: false,
        animate: true,
        activeOnTop: true
    },
    items: [{
        title: 'Panel 1',
        html: 'Panel content!'
    },{
        title: 'Panel 2',
        html: 'Panel content!'
    },{
        title: 'Panel 3',
        html: 'Panel content!'
    }],
    renderTo: Ext.getBody()
});

mais on peut y mettre un grid par exemple comme ici

A+JYT

Menu accord�on en javascript. Full option

JavaScript

Vue hybride

Discussions similaires

Partager

Partager