jQuery, mise en page, et menu à onglet.

**paketcado** · 18/03/2011, 18h07

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 :

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;
}

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
 
$("#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 !

jQuery, mise en page, et menu à onglet.

jQuery

Vue hybride

Discussions similaires

Partager

Partager