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

08/09/2011, 17h10	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 040 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 040 Points : 45 141 Points : 45 141	il existe des plugin accordion en jquery avec une classe selected pour le menu actif ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

14/09/2011, 11h37	#3
sebjador Invité de passage Sébastien Développeur Web Inscription : septembre 2011 Messages : 2 Détails du profil Informations personnelles : Nom : Sébastien Localisation : Belgique Informations professionnelles : Activité : Développeur Web Secteur : Distribution Informations forums : Inscription : septembre 2011 Messages : 2 Points : 0 Points : 0	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,
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email