Menu accord�on en javascript. Full option
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:
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:
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:
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"> 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ésentation DJ mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Présentation DJ mariage</a></li>
<li><a href="http://www.mariage-anniversaire.be/dj/animation-mariage.html" title="Animation soirée mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Animation soirée mariage</a></li>
<li><a href="http://www.mariage-anniversaire.be/dj/conseil-animation-soiree.html" title="Conseil animation soiré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ée</a></li>
<li><a href="http://www.mariage-anniversaire.be/dj/musique-mariage.html" title="Thèùe musique mariage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Thè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ésentation sonorisation"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Présentation sonorisation</a></li>
<li><a href="http://www.mariage-anniversaire.be/animaton/sonorisation/light.html" title="Présentation éclairage"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Présentation é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 "> 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é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"> 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"> 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éception originale"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Ré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ç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çailles</a></li>
<li><a href="http://www.mariage-anniversaire.be/conseils/compte-a-rebours.html" title="Le compte à rebours"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Le compte à rebours</a></li>
<li><a href="http://www.mariage-anniversaire.be/conseils/invites-et-temoins.html" title="Les invités et témoins"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Les invités et les témoins</a></li>
<li><a href="http://www.mariage-anniversaire.be/conseils/fiancailles.html" title="Les fiançailles"><img style="margin-right:6px;margin-bottom:-3px;" width="15" src="http://www.mariage-anniversaire.be/image/bouton/fleche.png">Les fianç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,
