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 :
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 :
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
|
#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;
} |
Et enfin le javascript (utilisant jQuery v1.5, me semble-t-il) :
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
|
$("#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 !
18/03/2011, 18h07
jQuery, mise en page, et menu à onglet.
00
