Discussion :

[CinePhil]

Bonjour,

Soit un menu qui contient parfois des sous-sous-sous... menus avant d'arriver à l'option finale, au point qu'à partir d'un certain niveau, certains libellés - en plus exagérément long mais je n'y peux rien pour le moment - sortent de l'écran par la droite, le dernier niveau n'étant même plus visible et donc inaccessible !

Dans ma feuille de style, j'ai pour le moment ce genre de chose qui met le libellé long sur plusieurs lignes à partir du 4ème niveau de menu :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#custommenu .yui3-menu .yui3-menu-content li li li li a
{
	white-space: normal;
	width: auto;
}

Mais avec ce code, l'un des sous-menus déplié sort de l'écran par en bas !

Pour pallier à ça, j'essaie de faire un programme, de préférence en JQuery, qui tronquerait les libellés trop long à 50 caractères et afficherait le libellé complet au passage de la souris.
Mais je n'ai besoin de le faire qu'à partir du niveau de sous-menu donné dans la feuille de style, les précédents ne posant pas de problème.

Pour le moment, j'en suis à ce code Javascript/JQuery :

Code Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function()
{
 
	$(".yui3-menu-label").each(function(index)
	{
		var label = ""; // Libellé actuel de l'option de menu
		var short_label = ""; // Libellé raccourci aux 50 premiers caractères
 
		if($(this).// cascade de style = #custommenu .yui3-menu .yui3-menu-content li li li li a)
		{
			label = $(this).text();
			short_label = label.substring(0, 49) + "...";
 
			// reste à faire : modification du label de l'option de menu 
			// + affichage du libellé complet au passage de la souris
		}		
	});
});

Je ne sais même pas quoi mettre dans la recherche sur le forum ou !
Pour le moment, je n'ai trouvé que position() ou offset() mais qui ne conviennent pas car ils donnent des coordonnées X et Y.

[SpaceFrog]

regarde du coté de css ellispsis ?

[CinePhil]

Merci pour la piste, j'y suis presque !

m'a orienté sur un tutoriel d'un autre site et j'ai modifié mon style de cette façon :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
#custommenu .yui3-menu .yui3-menu-content li li li li li a
{
	/*white-space: normal;
	width: auto;*/
	max-width: 200px;
	overflow: hidden;
	-o-text-overflow: ellipsis; /* pour Opera 9 */
	text-overflow: ellipsis; /* pour le reste du monde */
}

J'ai ajouté un "li" car j'ai constaté qu'un libellé court était quand même tronqué mais, malgré le max-width à 200 px, j'ai quand même des libellés qui sont coupés bien avant et je ne comprends pas pourquoi !

Sur la capture d'écran ci-jointe, on voit que le dernier libellé à droite est coupé alors que sa colonne est plus petite que la précédente, donc qu'elle n'atteint pas les 200px maxi.
Le libellé complet apparaît car c'est une option finale et non pas un sous-menu. C'est standard dans Moodle. Je vais quand même chercher s'il y a un paramètre qui fait ça aussi automatiquement pour les libellés de sous-menus.



De plus, ma question reste posée car je dois toujours afficher le libellé complet au passage de la souris, de préférence seulement à partir du 4ème niveau de menu.

[SpaceFrog]

Si ça ne passe pas en css essaye un plugin ellispsis ...
http://pvdspek.github.com/jquery.autoellipsis/

[CinePhil]

Intéressant en effet...

J'ai essayé en supprimant les parties overflow du CSS, avec ce code Javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
$(document).ready(function()
{
	$("#custommenu .yui3-menu .yui3-menu-content li li li li li a").ellipsis();
});

Mais ça ne fonctionne pas. Pas d'ellipsis sur mes libellés de menu !

[SpaceFrog]

tu as linké le plugin ?
pas d'erreur en console ?