Javascript : menu popup qui perturbe ma page web

Bonjour,

Je vous écris car j'ai besoin d'aide sur mon site :
J'ai une page avec un menu, au survol d'un élément du menu, une popup apparaît avec d'autres liens (pour faire simple : allez voir sur le site MisterGamePrice, le menu orange, c'est ce que j'aimerais faire).

J'y suis presque à un détail près : lorsque ma popup s'ouvre, au lieu de passer par dessus le reste de ma page, elle devient partie intégrante de la page et donc décale tout le reste.

Pour coder j'utilise Jquery.js et un autre fichier Javascript avec une fonction maison.
Un peu de CSS aussi.

Je suis un gros débutant en web, j'y vais vraiment à tâtons.

Dites moi si vous avez besoin de précisions, code ou autre...

Merci d'avance pour l'aide que vous pourrez m'apporter !

Voici une partie de mon code html :

Le code HTML dans lequel est construit le menu :

<div class="bubbleInfo">
	<div id="Microsoft">
		<a href="#" class="trigger"><span class="textShadow">Microsoft</span></a>
	</div>
	<div class="popup" id="dpop" style="display: none;">
		<a href="#X Box 360" class="lienConsole">X Box 360</a></p>
		<a href="#X Box" class="lienConsole">X Box</a>
	</div>
</div>

Ma fonction Javascript hors jsquery :

function popup_open_liens()
{
	$('.bubbleInfo').each(function () {
		var distance = 10;
		var time = 50;
		var hideDelay = 0;

		var hideDelayTimer = null;

		var beingShown = false;
		var shown = false;
		var trigger = $('.trigger', this);
		var info = $('.popup', this).css('opacity', 0);


		$([trigger.get(0), info.get(0)]).mouseover(function () {
			if (hideDelayTimer) clearTimeout(hideDelayTimer);
			if (beingShown || shown) {
				// don't trigger the animation again
				return;
			} else {
				// reset position of info box
				beingShown = true;

				info.css({
					top: -105,
					left: -32,
					display: 'block'
				}).animate({
					top: '-=' + distance + 'px',
					opacity: 1
				}, time, 'swing', function() {
					beingShown = false;
					shown = true;
				});
			}

			return false;
		}).mouseout(function () {
			if (hideDelayTimer) clearTimeout(hideDelayTimer);
			hideDelayTimer = setTimeout(function () {
				hideDelayTimer = null;
				info.animate({
					top: '-=' + distance + 'px',
					opacity: 0
				}, time, 'swing', function () {
					shown = false;
					info.css('display', 'none');
				});

			}, hideDelay);

			return false;
		});
	});
}

Modifié par Florent26000 (29 Dec 2011 - 22:57)

Bonjour,

ce n'est pas une pop-up que tu as mais un élément en display:none, donc la place n'est pas prévue pour cet élément dans ta page. lorsque tu fais apparaître l' élément, ben cela décale le reste évidemment.

le vrai pop-up en Javascript reste : window.open.....fortement déconseillé, toutefois.

change peut-être en display:hidden; et réorganise ton css en conséquence. un peu de jquery, si tu veux, les effets de fadeIn, fadeOut peuvent être sympas. c'est selon les goûts bien sûr.

OK merci pour ta réponse, j'ai bien compris le souci.

Par contre la mise en place de la solution risque d'être moins facile !

Je vais gratter cette piste merci encore.

Je précise une chose toutefois : je ne connais pas à l'avance le nombre de menus et sous-menus.

En fait je génère ce menu depuis une application de manière dynamique, c'est le contenu de la base de données de l'utilisateur qui va déterminer le nombre de menus.

Est-ce que ça pose un problème ?

Met ta popup en position absolute si je me trompe pas et ensuite tu place ton élément avec left et top.

Bien vu pour "position: absolute;", ma bulle passe bien sur le reste, merci !

Par contre, tous mes menus se chevauchent (sans parler des bulles), tous mes div se sont regroupés à gauche les uns sur les autres au lieu d'être gentiment les uns à côté des autres.