Menu imbriqué CSS / JS - Page 1

yop,

j'aurais besoin de faire un menu qui supporte des choix imbriqués, et je comptais utiliser un maximum de CSS et un minimum de JS (juste pour masquer/montrer les sous-menus), donc partir d'un menu à base de ul/li, pour obtenir ce genre de résultat :


mais ça me semble difficilement réalisable, en gros j'ai deux problèmes :
- je n'ai pas trouvé le moyen de coller un sous-menu par rapport au bord droit de son parent; je pensais y arriver en jouant avec position:relative/absolute, mais visiblement l'attribut "right" ne fait pas du tout ce que je veux (il positionne le bord droit de l'élément par rapport au droit de son parent si j'ai bien compris, or moi je voudrais positionner le bord gauche de l'élément par rapport au droit de son parent)
- il y a plein de problèmes de z-index, et je voudrais éviter d'avoir à toucher cet attribut dans la css, vu que d'un navigateur à l'autre ça fait toujours n'importe quoi

Ces deux problèmes se masquent assez facilement si on force la largeur des menus, mais je ne veux pas faire ça, il faudrait que la largeur des menus soient en fonction de la longueur des libellés des choix. Au pire, si c'est pas possible en CSS, je ne suis pas contre utiliser davantage de Javascript, mais pour l'instant je ne vois pas en quoi ça m'aiderait (vu que je ne sais pas récupérer la largeur d'un élément en JS, donc j'ai tjrs mon problème de positionnement d'un sous-menu par rapport à son parent)

à titre d'exemple, c'est un menu exactement comme celui de ce site (en haut) que je voudrais, mais il est payant et la source n'est pas lisible :/

voilà, si qqun a la solution d'un ou l'autre de ces problèmes, je prends; mci

http://openweb.eu.org/articles/menu_universel/

http://forum.alsacreations.com/topic-6-12851-1-Menu-dynamique.html

http://www.xs4all.nl/~peterned/examples/cssmenu.html

voili voilou

http://www.xs4all.nl/~peterned/examples/cssmenu.html

ressemble a ce que je pensait hier soir en full CSS..

kim > à part le dernier ils ne sont pas multi-niveau, si ?

il est pas mal d'ailleurs, mais j'ai l'impression (pas encore regardé la source) qu'il force la largeur des éléments, ce que je voulais éviter

d'ailleurs le dernier propose un "patch" poru IE sur ce dont je t'avais parlé hier soir (support des :hover sur tout et n'importe quoi sur IE6 )

vertyos : le premier a 2 niveau, c'est déjà pas mal
Pour le second, il fixe effectivement une taille de 150px de largeur pour chaque menu, et un décallage left:120px avec un z-index qui permet d'avoir l'effet que tu voulais. Sans fixer la taille, je pense que ça va être difficile, il faudrait la calculer en js si tu veux t'en sortir sans

en css3 ya des moyen de faire dse calculs.. mais j'arrive pas a mettre la main sur la doc qui va bien...

heu je ne vois qu'un seul niveau pour le 1er menu ?

bon, en js y'a effectivement moyen d'avoir la taille (.offsetWidth il me semble), donc ça devrait être faisable

juste pour dire que les menus comme ça je trouve ça tout pourri.

c'est pratique quand le menu contient trop d'items pour être affiché en entier sur une page; je dois faire ça pour un site sur lequel la page se reload à chaque fois que tu cliques sur un item, pour passer au menu suivant, et *ça* c'est vraiment tout pourri.

ouai sauf que moi je suis limite épileptique dans mon utilisation de la souris: je bouge tt le temps dans tous les sens et du coup je dois m'y reprendre pour aller ou je veux dans un menu comme ça.

meme dans le menu démarrer je me rate une fois sur 3 ...

oui enfin si on n'est pas habile...

à la limite je trouve ça pratique quand c'est une arborescence que tu dois dérouler en cliquant (et qui bien sur ne fait pas reloader la page), au moins t'as pas à faire gaffe à garder le focus sur le menu

Peio
sauf si t'as vraiment un truc genre applicatif important a la google documents etc.

bon, je ne sais pas si tu as déjà trouvé ce que tu cherchais, mais j'ai fait un menu utilisant le JS, qui ce génère automatiquement à partir de php (en gros, je donne mes items, sous item, sous sous item, et automatiquement mon php me génère mon menu)

sinon, pour connaitre avec précision la position d'un objet en JS, voila :

function  getLeft(obj)
{
	var val = obj.offsetLeft;
	
	if (obj.offsetParent)
	{
		val+= getLeft(obj.offsetParent);
	}

	return val;
}

function  getTop(obj)
{
	var val = obj.offsetTop;

	if (obj.offsetParent)
	{
		val+= getTop(obj.offsetParent);
	}
	return val;
}

après, il faut utiliser ceci si tu veux aligner ton élément en haut à droite du parent :

		var x = getLeft(obj_src) + obj_src.clientWidth;
		var y = getTop(obj_src)  ;
		
		obj.style.left = x+'px';
		obj.style.top = y+'px';

j'ai oublié, les divs du menu doivent être ecritent juste avant la fermeture du body, sans div parent de préférence. C'est dans ce cas que tu aura le meilleur résultat et la meilleur compatibilité entre IE et FF.

Bon, avec l'astuce de "offsetLeft", ça marche presque; j'ai juste un problème de z-index que je n'arrive pas à résoudre sous IE, sous FF ça semble passer correctement :

http://databob.free.fr/priv/script/menu/test.html

Zephyr (./17) :
Bon, avec l'astuce de "offsetLeft", ça marche presque;

généralement, c'est du aux margin et padding... assez chiant !

Zephyr (./17) :
j'ai juste un problème de z-index que je n'arrive pas à résoudre sous IE, sous FF ça semble passer correctement :

normal, le z-index est très mal gérer sous IE. La preuve, met un select, et tu véra qu'il s'affiche par dessus tout type d'element... très chiant..

perso, pour mes menus, ce que je fais, c'est que je trace d'abord tous les elements de niveau 1, puis ceux de niveau 2, ..., ....

comme ca, ils sont forcemenent affichés dans le bon ordre, pas besoin de z-index.


enfin, pour corriger le pb des selects : afficher un truc du style :

				$all_sub.= '<div class="menu_subitems" id="menu_sub_item_'.$this->sub_i.'" >';
				$all_sub.= '<iframe class="menu_subitems_p1" style="height: '.(count($item['sub'])*14).'px"></iframe>';
				$all_sub.= '<div class="menu_subitems_p2">'.$html_sub.'</div>'."\n";
				$all_sub.= '</div>'."\n";

avec les classes suivantes :

div.menu_subitems
{
	position:		absolute;
	top:			0;
	left:			0;
	margin:			0;
	padding:		1px;
	border:			none;
	font-weight:	normal;
	font-size:		12px;
	color:			#000000;
	text-align:		left;
	display:		none;
}

.menu_subitems_p1
{
	position:		absolute;
	left:			0;
	top:			0;
	width:			250px;
	overflow:		hidden;

	background:		#F8F8F8;
	border:			none;
}

.menu_subitems_p2
{
	position:		absolute;
	left:			0;
	top:			0;
	width:			250px;
	overflow:		hidden;

	background:		#F8F8F8;
	border:			solid 1px black;
}

en espérant que ca peut t'aider

le pb c'est que je ne choisis pas quand tout est dessiné : ce n'est qu'une simple liste de ul/li, je ne pense pas qu'il y ait d'autre solution que d'utiliser le z-index :/

Zephyr (./19) :
le pb c'est que je ne choisis pas quand tout est dessiné : ce n'est qu'une simple liste de ul/li, je ne pense pas qu'il y ait d'autre solution que d'utiliser le z-index :/

le pb, c'est que ca ne réglera pas le pb des select. essaye d'en mettre un , tu va voir, ce n'est pas très pratique.

par contre, tu peux toujours (avec du js) rajouter une iframe derriere ton ul, afin de contrer ce pb.

pour les Z-index, c'est pareil : réordonner en JS les éléments pour ne pas avoir de pb

ui mais les selects je compte pas en mettre donc c'est pas un pb ^^

par contre qu'est-ce que tu entends par "réordonner en JS les éléments" ?

ben tu lis tout ton menu, noeud par noeud, tu en extrai les différents UL (apparement, ton menu est fait comme ca), tu en copie les objets HTML, comme ca, ils ne sont plus reliés les un aux autres, puis tu les réinjecte dans le bon ordre pour ne plus avoir de pb de z-index.

apres, le pb, c'est pour le lien entre les différents éléments. Donc tu dois attribuer un id unique à chaque des blocs UL, et l'utiliser dans tes fonctions à la place de item_ul = this.getElementsByTagName ('ul')[0];

bien sur tout ca fait automatiquement par le JS, tu gardes le meme code HTML de départ

faut que tu regardes du côté de ces fonctions :

fragment = document.createElement("div");
fragment.style.position	= "relative";
fragment.appendChild(alt_element(obj));
fragment.appendChild(obj.cloneNode(true));
obj.parentNode.replaceChild(fragment, obj);

erk, c'est immonde, je préfere éviter ça :/

bon, bah je vois pas de solution...

car pour info, ton pb de z-index est normal.

sous FF, le z-index est par rapport toute la page, c'est en absolute.

sous IE, le z-index ne permet pas de sortir du parent...

donc la solution, c'est de mettre le parent dumenu que tu veux ouvrir dans les autres (je pense que ca devrait marcher)

c'est pas l'inverse (z-index relatif sous FF et absolu sous IE) ? parceque théoriquement ça devrait marcher avec un z-index relatif je pense ?

ce que je veux dire, c'est que sous IE, le z-index ne permet de trier l'affichage que des autres balises contenu dans le parent, pas avec les balises extérieurs (houla, c'est compréhensible ce que je raconte ?!)

ué je vois ce que tu veux dire, mais y'a vraiment pas une solution propre (= ne pas recréer totalement la page en js) pour contourner ce pb ?

ben vi, je viens de la donner : jouer avec les z-index des menus parents :

su tu accede au menu 1.1.2, tu dois mettre le 1, le 1.1, et le 1.1.2 avec un z-index supperieur aux autres

bon sinon, au ca ou ca pourrait t'interesser, t'aider :

http://www.spipu.net/test/menu/

le menu est juste fait grace à :

<?php
	$page->menu->addItem("Accueil"						, './',				'accueil');


	$page->menu->addItem("Consultation");
		$page->menu->addSubItem("Des choses"				, './choses1.php'		, 'choses1');
		$page->menu->addSubItem("d'autres choses"			, './choses2.php'		, 'choses2');
		$page->menu->addSubItem("et puis d'autres"			, './choses3.php'		, 'choses3');

	$page->menu->addItem("Administration");
		$page->menu->addSubItem("Catégorie 1");
			$page->menu->addSubSubItem("Des choses"			, './admin11.php'		, 'admin11');
			$page->menu->addSubSubItem("d'autres choses"		, './admin12.php'		, 'admin12');
			$page->menu->addSubSubItem();
			$page->menu->addSubSubItem("a propos de ces choses"	, './admin13.php'		, 'admin13');
		$page->menu->addSubItem();
		$page->menu->addSubItem("Catégorie 2");
			$page->menu->addSubSubItem("Des choses"			, './admin21.php'		, 'admin21');
			$page->menu->addSubSubItem("d'autres choses"		, './admin22.php'		, 'admin22');
			$page->menu->addSubSubItem();
			$page->menu->addSubSubItem("a propos de ces choses"	, './admin23.php'		, 'admin23');
		$page->menu->addSubItem();
		$page->menu->addSubItem("et puis sinon il faut ca"		, './etpuis.php'		, 'etpuis');
		$page->menu->addSubItem("et puis ca egalement"			, './etaussi.php'		, 'etaussi');

	$page->menu->addItem("Autres");
		$page->menu->addSubItem("Manuel d'Utilisation"			, './manuel.php'		, 'manuel');
		$page->menu->addSubItem("A propos..."				, './a_propos.php'		, 'a_propos');

	$page->menu->setHTML();
?>

si tu veux, je te passe le script php associé