Animation CSS et jQuery menu
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... :furax::furax::furax:)
Dans mon code html j'ai un menu accordéon animé :
Code:
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:
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:
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 ?
