Discussion :

[thuglife]

Bonjour à tous,

Voila mon soucis sur lequel je me prend la tête depuis des heures (en même temps je suis débutant dans le domaine et jongler avec html, css et script... )

Dans mon code html j'ai un menu accordéon animé :

Code html :

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
<div id="content">
	<ul class="menu">
		<li class="item1"><a href="#">Menu 1 <span>3</span></a>
			<ul>
				<li class="subitem1"><a href="#">Sous Menu 1<span>1</span></a></li>
				<li class="subitem2"><a href="#">Sous Menu 2<span>2</span></a></li>
			</ul>
		</li>
		<li class="item2"><a href="#">Sous Menu 1<span>3</span></a>
			<ul>
				<li class="subitem1"><a href="#">Circuit 1<span>1</span></a></li>			
			</ul>
		</li>				
	</ul>
<div id="bouton-menu"><img src="images/Superieure.png"></div>
</div>

Je voudrais positionner l'image "Superieure.png" à droite de mon menu accordéon (à l'heure actuelle en dessous avec ce code). Voici pour le moment la partie css (mais image toujours en dessous avec cela) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
#bouton-menu {
	float:right;
	width:70px;
	margin:0px;	
}
#content {	
	width: 200px;
	font-size: 0.8125em;
	position:fixed;
	left:20px;
	overflow:hidden;
}

Une fois le positionnement effectué, j'aimerais faire apparaitre le menu par survol de la souris sur l'image "superieure.png", pour cela je comptais modifier la ligne dans le code css ci-dessus "left:20px;" par "left:-200px;"

Puis ajouter une animation du style :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(document).ready(function() {
  $("#content").hover(function() {
    $("#content").animate({ marginLeft: "200px"  }, 400 );
  },function(){
    $("#content").animate({ marginLeft: "0"  }, 300 );
  });
});

je sens que je ne suis pas loin mais je coince.

Une âme charitable pour m'aider ?

[NoSmoking]

Bonjour,

Je voudrais positionner l'image "Superieure.png" à droite de mon menu accordéon (à l'heure actuelle en dessous avec ce code).

change la position de la DIV contenant ton image dans la DIV conteneur, et non l'inverse.

Code html :

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
<div id="content">
	<!-- mettre la DIV en début -->
	<div id="bouton-menu"><img src="images/Superieure.png"></div>
	<!-- suivi par le menu -->
	<ul class="menu">
		<li class="item1"><a href="#">Menu 1 <span>3</span></a>
			<ul>
				<li class="subitem1"><a href="#">Sous Menu 1<span>1</span></a></li>
				<li class="subitem2"><a href="#">Sous Menu 2<span>2</span></a></li>
			</ul>
		</li>
		<li class="item2"><a href="#">Sous Menu 1<span>3</span></a>
			<ul>
				<li class="subitem1"><a href="#">Circuit 1<span>1</span></a></li>
			</ul>
		</li>
	</ul>
</div>