Menu Horizontal

[Portekoi]

Bonjour,

Je cherche un menu horizontal gérant les sous-menus mais aussi le bord droit de la fenêtre.

Travaillant sur un Intranet privé, je ne peux mettre de lien, mais j'avais utilisé un script trouvé sur le net mais le site ne fonctionne plus :

http://www.ibilab.net/webdev/articles/CSS/...de-simple-4.htm

Donc voilà, comment faire pour que le "sous-menu" s'affiche à gauche s'il touche le bord de droite....?

Merci

Portekoi

[captain_torche]

Si j'ai bien compris (tu me corriges si je me trompe), ça correspond exactement à un dev que j'avais fait dans mon ancienne boîte.

Regarde le menu principal sur http://www.studyrama.com, le sous-menu "salons" doit correspondre à ce que tu cherches.

Si c'est bien ça, voilà le JS (brut de décoffrage) que j'avais créé :

function show(divname) {
		var div = document.getElementById('ss_menu_'+divname);
		if(div) {
			var display = div.style.display;
			if(display == 'block')
				div.style.display = 'none';
			else {
				div.style.display = 'block';
				depasse('ss_menu_'+divname);
			}			
		}
	}

	function depasse(div) {
		//	Si l'élément dépasse le menu, on le fait reculer de l'espace nécessaire.
		var div = document.getElementById(div);
		if(div) {
			var menu = document.getElementById('header_menu');
			var menu_debut = calculateOffsetLeft(menu);
			var div_debut = calculateOffsetLeft(div);
			var menu_width = menu_debut+menu.offsetWidth;
			var div_width = div_debut+div.offsetWidth;
			if(div_width > menu_width)
				div.style.left = menu_width-div.offsetWidth;
		}
	}

	function calculateOffsetLeft®{
		return calculateOffset(r,"offsetLeft");
	}

	function calculateOffset(r,attr){
		var kb=0;
		while®{
			kb+=r[attr];
			r=r.offsetParent
		}
		return kb;
	}

Le menu principal a comme ID : header_menu, et les sous-menus sont de la forme ss_menu_xxx. Il suffit ensuite d'appeler la fonction show(xxx) sur le onmouseout et onmouseover de chaque lien de ton menu principal, pour afficher/masquer le sous-menu correspondant.

Dans le principe, c'est pas compliqué : on calcule la largeur du sous-menu à afficher, et si sa position par rapport au début du menu principal + sa largeur dépassent la largeur du menu principal, on décale à gauche de la valeur du dépassement.

[Portekoi]

J'ai bien compris le principe mais mon menu n'utilise pas de javascript

De plus, il est dynamique...

N'y a t il pas un moyen en CSS de lui dire "soit au minimum à tant du bord"?

[captain_torche]

Sans JS, je vois pas trop comment tu pourrais t'en sortir, surtout avec un menu dynamique ...

Tu ne peux pas inclure de JS dans ta page ? (Restriction du côté client ?)

[Portekoi]

Oui, j'évite le javascript tant possible et j'aimerais surtout trouver une solution sans avoir à refaire tout le menu

[captain_torche]

Bon courage, alors, parce qu'il me semble que tu ne pourras pas éviter le JS pour ça.

On pourrait éventuellement tout faire en CSS, mais il faudrait avoir des largeurs définies pour tes menus, et placer tes sous-menus "à la main"

Pour quelque chose de dynamique, le JS me semble indispensable, et il permet de plus de gommer les différences de placement entre navigateurs.