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
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 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);
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 <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>
Bonne journée,
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"> 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 -->
Partager