Menu qui s'affiche lors du survole du curseur

Bonjour à tous,

J'essaye de réaliser un menu caché qui se déroulerait lors du passage du curseur.
On m'avait donner un code JQuery qui marchait de cette façon :


Du coup, j'ai adapté mon code à mon site, puisque je voulais que mon menu soit une image.
Seulement, le code ne marche que sur un onglet du menu et j'en ai 4...

Code HTML de mon menu :

				<!-- début du contenu du menu -->
<div>
<div id="menu"><a href="Index.html" title="onglet1"><img src="CSS/images/barre-jaune2.png" alt="Onglet 1"></a></div>
<li><a href="Index.html" title="onglet2"><img src="CSS/images/barre-jaune2.png" alt="Onglet 2"></a></li>
<li><a href="Index.html" title="onglet3"><img src="CSS/images/barre-jaune2.png" alt="Onglet 3"></a></li>
<li><a href="Index.html" title="onglet4"><img src="CSS/images/barre-jaune2.png" alt="Onglet 4"></a></li>
</div>
				<!-- fin du centenu du menu-->

J'ai laissé mes balises

li

de base car en mettant la

div "menu"

à leur place cela ne marchait pas.

Code JQuery se trouvant dans ma balise

head

		<script src="CSS/jquery.menu.js"></script>
			<script>
		window.onload = function() {
			$(document).ready().mousemove(function(e){
			$('#coord').html("X: " + e.pageX + " Y: " + e.pageY);
			$('#bloc').css("right", "" + (100 + e.pageX/2) + "px");
			//$('#bloc').css("bottom", "" + (100 + e.pageY/2) + "px");
			});

			$("#menu").mouseenter(function(){
			$("#menu").animate({width : '260px'}, 500, 'linear');
			}).mouseleave(function(){
			$("#menu").animate({width : '30px'}, 500, 'linear');
			});  

		};
		</script>

/!\ La première partie de ce code ne concerne pas le menu

Mon code CSS :

#menu		{z-index: 2;
			top: 610px;
			left: 0px;
			position: absolute;
			width: 30px;
			height: 50px;
			background: pink;
			overflow: hidden;
}

J'ai aussi une feuille JQuery avec un code à rallonge mais je pense que cela va avec la première partie du code.

Si vous avez une solution, ou alors un code plus simple a utiliser par rapport à mon menu je suis preneuse !

Merci

Bonjour kmicase,

a écrit :

Du coup, j'ai adapté mon code à mon site, puisque je voulais que mon menu soit une image.
Seulement, le code ne marche que sur un onglet du menu et j'en ai 4...

C'est normal car tu ne peut avoir plusieurs id identique sur une seul page, si tu veux sélectionner plusieurs élément d'un coup tu dois mettre une classe et utiliser la fonction each, mais ce n'est pas ce que tu veux faire...

Je te conseil de passer par les évènements js (et garde la liste, plus simple pour les menus):

				<!-- début du contenu du menu -->
<ul>
<li id="menu_1"><a href="Index.html" title="onglet1" style="width:10px;overflow:hidden;" onmouseover="animate_menu('menu_1');"><img src="CSS/images/barre-jaune2.png" alt="Onglet 1"></a></div>
<li id="menu_2"><a href="Index.html" title="onglet2" style="width:10px;overflow:hidden;" onmouseover="animate_menu('menu_2');"><img src="CSS/images/barre-jaune2.png" alt="Onglet 2"></a></li>
<li id="menu_3"><a href="Index.html" title="onglet3" style="width:10px;overflow:hidden;" onmouseover="animate_menu('menu_3');"><img src="CSS/images/barre-jaune2.png" alt="Onglet 3"></a></li>
<li id="menu_4"><a href="Index.html" title="onglet4" style="width:10px;overflow:hidden;" onmouseover="animate_menu('menu_4');"><img src="CSS/images/barre-jaune2.png" alt="Onglet 4"></a></li>
</ul>
				<!-- fin du centenu du menu-->

et dans ton javascript, met tout dans une fonction (regarde la methode hover de jquery, je la trouve plus simple..) :

<script src="CSS/jquery.menu.js"></script>
			<script>
function animate_menu(id_menu) {
			$("#"+id_menu).mouseenter(function(){
			$(this).animate({width : '260px'}, 500, 'linear');
			}).mouseleave(function(){
			$(this).animate({width : '30px'}, 500, 'linear');
			});  
		}
		</script>

Explication :

style="width:10px;overflow:hidden;"

tu defini la taille de ta balise li et tu cache le contenue (une image dans ton cas) qui dépasse.

Si d'autre truc sont pas claires, dis moi.

PS : ne fait de copier-coller, la syntaxe n'est pas correct je pense... (Il faut peut-être mettre les images dans une div et pas directement dans la liste) Donc c'est juste un axe de recherche.

En espérant t'avoir aidé..
Modifié par toukilbv (28 May 2013 - 12:19)

Alors j'ai placé le code que tu m'as donner pour le JQUERY et il y a des beug dans l'animation du genre : les images sont toutes affichés et quand je passe mon curseur dessus, elles bougent aléatoirement.

Enfin c'est bizarre.

Mais sinon il est possible de mettre la balise "img" dans une balise "li" !

C'est bon j'ai trouvé !

Dans mon head HTML :

		<!-- Lien vers la bibiliotheque jQuery -->
		<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>
			<script>
			$(document).ready(function() {
				$("#onglet1").hover(function() {
				$("#onglet1").animate({ marginLeft: "220px"  }, 400 );
					},function(){
					$("#onglet1").animate({ marginLeft: "0"  }, 300 );
					});
			});
			$(document).ready(function() {
				$("#onglet2").hover(function() {
				$("#onglet2").animate({ marginLeft: "170px"  }, 400 );
					},function(){
					$("#onglet2").animate({ marginLeft: "0"  }, 300 );
					});
			});
			$(document).ready(function() {
				$("#onglet3").hover(function() {
				$("#onglet3").animate({ marginLeft: "275px"  }, 400 );
					},function(){
					$("#onglet3").animate({ marginLeft: "0"  }, 300 );
					});
			});
			$(document).ready(function() {
				$("#onglet4").hover(function() {
				$("#onglet4").animate({ marginLeft: "230px"  }, 400 );
					},function(){
					$("#onglet4").animate({ marginLeft: "0"  }, 300 );
					});
			});
			</script>

Dans mon body :

				<!-- début du contenu du menu -->
						<div id="menu">
							<div id="onglet1"><li><a href="Index.html" title="onglet1"><img src="CSS/images/barre-jaune.png" alt="Onglet 1"></a></li></div>
							<div id="onglet2"><li><a href="Index.html" title="onglet2"><img src="CSS/images/barre-rouge.png" alt="Onglet 2"></a></li></div>
							<div id="onglet3"><li><a href="Index.html" title="onglet3"><img src="CSS/images/barre-jaune2.png" alt="Onglet 3"></a></li></div>
							<div id="onglet4"><li><a href="Index.html" title="onglet4"><img src="CSS/images/barre-rouge2.png" alt="Onglet 4"></a></li></div>
						</div>
				<!-- fin du centenu du menu-->

Mon code css :

			/* debut du menu */
#onglet1		{top: 55%;
				z-index: 2;
				position: fixed;
				left: -220px;
				overflow: hidden;
				width: 270px;
}

#onglet2		{top: 60%;
				z-index: 3;
				position: fixed;
				left: -170px;
				overflow: hidden;
				width: 230px;
}

#onglet3		{top: 68%;
				z-index: 4;
				position: fixed;
				left: -275px;
				overflow: hidden;
				width: 316px;
}

#onglet4		{top: 77%;
				z-index: 5;
				position: fixed;
				left: -230px;
				overflow: hidden;
				width: 266px;
}
			/* fin du menu */

Regarde ceci. ça fonctionne sans javascript.
Modifié par juliendargelos (30 May 2013 - 09:59)

Hello,

Deux remarques :
- toukilbv t'a fourni un code valide pour ta liste, le tien ne l'est pas ("li" ne peut avoir pour parent direct que "ul", "ol" et "menu", div n'en fait pas partie), puisque tu débutes, autant le bien faire
- Pour jQuery, nous en sommes à la version v1.10.0 or v2.0.1, un peu loin de la 1.4.2