Bonjour à tous, et merci de vous intéresser à mon problèmes ! =)
Je développe actuellement un menu à onglets, mélant la fonction .animate() de jQuery et CSS.
J'ai plusieurs problèmes :
1- Lorsque je clique sur "Cellule", le menu se place à coté de "Menu", au lieu de se placer en dessous
2- je n'arrive pas à faire apparaitre les borders des menus non sélectionnés
c'est tout pour le moment... ^^'
Voici les codes :
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 <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="menu.css" /> <script src="jQuery.js"></script> </head> <body> <div id="Menu"> <div id="conteneur"> <div id="boutonMenu"><a href="" Title="Afficher le Menu"><img src="./Images/transparant.gif" Title="Afficher menu"></a></div> <ul id="blockMenu"> <li onclick="controleur.nouveauMonde();">Nouveau Monde</li> <li><a href="javascript:window.close()">Quitter</a></li> </ul> <div id="boutonCellule"><a href="" Title="Afficher le Menu"><img src="./Images/transparant.gif" Title="Afficher Cellules"></a></div> <ul id="blockCellule"> <li onclick="controleur.nouveauMonde();">Cellule 1</li> <li><a href="javascript:window.close()">Cellule 2</a></li> </ul> </div> </div> <script src="Menus.js"></script> </body> </html>
Le CSS :
Et enfin le javascript (utilisant jQuery v1.5, me semble-t-il) :
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 #Menu { width : 430px; } #conteneur{ z-index : 1; width : 200px; height : 600px; border : 1px solid black; } #boutonMenu { z-index: 2; float : left; position:relative; width : 30px; height : 130px; left : 200px; background-image : url(./Images/menu.png); } #boutonCellule { z-index : 0; float : left; position:relative; width:30px; height : 130px; left:200px; background-image : url(./Images/menu_cellule.png); } #blockMenu { width:100px; height : 110px; } #blockCellule { width:100px; height : 110px; }
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 $("#boutonMenu>a").click(function(){ $("#blockMenu").animate({ opacity : 'show', width : "170px" }, 'fast' ); $("#blockCellule").animate({ opacity : 'hide', width : "170px" }, 'fast' ); $("#boutonCellule").animate({ borderLeftWidth: '1px' }, 'fast' ); $("#conteneur").animate({ left : "10px", width : "200px" }, 'fast' ); return false; }); $("#boutonCellule>a").click(function(){ $("#blockCellule").animate({ opacity : 'show', width: "170px" }, 'fast' ); $("#blockMenu").animate({ opacity : 'hide', width: "170px" }, 'fast' ); $("#boutonMenu").animate({ left : "200px", border : "1px" }, 'fast' ); $("#conteneur").animate({ left : "10px", width : "200px" }, 'fast' ); return false; });
J'ai essayé plusieurs choses. Pour le problème de bouton, j'ai triché en positionnant de manière définie le bouton, ce en fonction de l'onglet selectionné. Ca marche à peine, et c'est très moche.
Concernant mon problème de bordures, j'ai essayé de bidouiller les z-index, d'utiliser une image transparante, mais bon, je n'y arrive pas...
J'utilise des images de 30x130 : 1 pour l'onglet "Menu", une pour l'onglet "Cellule", et un transparante qui recouvre celle-ci. (Les images Menu et Cellule sont défini en tant que background image).
Merci d'avance à ceux qui auront le courage de m'aider !
Voilà ! Bonne soirée !
Partager