Souci avec Fx.Slide de MooTools
Bonjour à tous,
Depuis plusieurs jours , je tente désespérément de me créer un petit menu avec l'effet de style FxSlide de mootools .
D'après ce que j'ai pu voir , ça n'est pas si simple que ça car il faut forcément passer par le javascript et pour tout dire , c'est un peu du chinois pour moi et ce n'est pas faute d'essayer de comprendre (m'enfin ça s'apprend c'est comme tout) :p
J'ai donc dans un premier temps tenté de faire mon petit menu en utilisant l'exemple directement fournit sur le site de demos mootools : http://demos.mootools.net/Fx.Slide
Pour mon 1er menu pas de souci ça a fonctionné mais dès que j'ai tenté d'en ajouter un second , là ça a été le drame , ça ne passait pas (d'après ce que j'ai compris via mes recherches sur le net , c'est principalement parce qu'ils utilisent des ID dans le code et une ID étant unique , on ne peut donc pas en utiliser plusieurs sur une même page)
Bref passons , j'ai donc continuer mes recherches et je suis tombé sur un forum ou un gars propose une solution pour justement contourner ce souci : http://www.webdeveloper.com/forum/sh...d.php?t=159079
Il a même directement mis un site de démonstration de son code ici : http://www.congoblue.com.au/examples...leSliders.html
J'ai donc utilisé ce dernier pour créer mon petit menu mais , bien que celui-ci fonctionne partiellement , je rencontre néanmoins un petit souci lorsque je tente d'imbriquer le code (à vrai dire c'est ce que je cherche à faire depuis le début , une sorte de menu en accordéon)
Lorsque je disais que le code fonctionne partiellement c'est simplement parce que lorsque j'ouvre ma première catégorie , ça fonctionne bien , mais si je colle dedans une sous catégorie , quand je l'ouvre , la taille de la fenêtre de la première catégorie ne s'adapte pas ...
Je suis donc obligé de laisser ouvert la sous catégorie , de refermer et réouvrir la première pour que cette fois ci elle s'adapte à la bonne taille .
Bref le mieux à faire ce des fournir le code que j'utilise
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
50
51
52
53
54
55
56
57
58
59
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="mootools-v.1.2.0.js"></script>
<script type="text/javascript">
window.addEvent( 'domready', function(){
$$( '.moreInfoWrapper' ).each(function(item){
var thisSlider = new Fx.Slide( item.getElement( '.moreInfo' ), { duration: 500 } );
thisSlider.hide();
item.getElement( '.divToggle' ).addEvent( 'click', function(){ thisSlider.toggle(); } );
} );
} );
</script>
<style type="text/css">
.divToggle
{
color: #ffffff;
background-color:#0033cc;
padding: 4px;
}
.moreInfoWrapper
{
width: 128px;
border: 2px solid #dddddd;
background-color: #ffffff;
padding: 0px;
}
.moreInfo
{
padding: 2px;
}
</style>
</head>
<body>
<div class='moreInfoWrapper'>
<div class='divToggle'>Catégorie 1</div>
<div class='moreInfo'>Contenu 1
<div class='moreInfoWrapper'>
<div class='divToggle'>Sous catégorie</div>
<div class='moreInfo'>Sous contenu</div>
</div>
</div>
</div>
<div class='moreInfoWrapper'>
<div class='divToggle'>Catégorie 2</div>
<div class='moreInfo'>Contenu 2</div>
</div>
</body>
</html> |
Je fournis ici le lien de mon essai avec la librairie mootools incluse dans l'archive si besoin :[ame="http://www.zshare.net/download/7944926664039202/"]zSHARE - Fx.Slide - TEST Menu accordeon.zip[/ame]
Je suis assez embêté car à priori , il ne manque pas grand chose au niveau du javascript (bien que je puisse me tromper) pour que le menu que j'aimerais mettre en place puisse fonctionner mais je suis un quiche dans ce langage et je ne sais vraiment pas comment réussir à faire en sorte que la fenêtre de la catégorie parent s'adapte en fonction de l'ouverture/fermeture de la sous catégorie (qui ne semble pas être reconnue en direct mais seulement une fois que celle ci est déjà ouverte)
J'en fais donc appel aux connaisseurs du langage javascript dans l'éventualité d'obtenir une aide plus qu'appréciée :D
Merci de m'avoir lu , c'est déjà pas mal ;)
