Discussion :

[StripMat]

Bonjour, j'ai construit des menus verticaux à plusieurs niveaux, pour indiquer la présence d'un sous menu sous un des item, je place une petite flêche à côté.

Seulement, j'ai quelque problèmes de positionnement

Code html :

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

1
2
3
4
5
6
 
...
<li class="dropdown-submenu">
	<a class="itemnode-1" unselectable="on" href="">Légumes secs<span class="caret"></span></a><span class="caret-ie"></span>
	<ul class="dropdown-menu">
...

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
.normal .caret {
display: inline; 
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
position:relative;
right:3px;
top:5px;
float:right;
}

Sa ne bug que pour Mozilla Firefox. Lors du survol d'un item du menu, s'il y a sous-menu, celui-ci est display. Parfois après un display/hide, le ".caret" se positionne là ou il devrait etre, mais c'est aléatoire, je survol il se repositionne, je quitte la zone il repars en vrille, et c'est pas toujours le cas...

Qu'est-ce qui peut foirer autant ?

Résultat attendu

[CosmoKnacki]

Tu devrais montrer le code de tout ton menu (html et css) car juste avec ce que tu as donné c'est difficile de t'aider. En clair le code de toute l'image que tu as posté.

[NoSmoking]

Bonjour,
peut être que l’exemple complet que je t'ai mis dans cette discussion te permettra de résoudre ton problème, via une utilisation du pseudo-élément :after.

[StripMat]

@NoSmoking

Pour mon mode "au clic" je pense m'inspirer de ton menu, néanmoins j'aimerai vraiment garder mes menus déroulant au survol.

Voila un de mes menus, l'item BDPI fonctionne parfaitement, le "caret" est bien positionné à droite. Par contre sur Contrat, sa foire aussi.
JSFiddle

Sa semble foirer sur tous les navigateurs, pour ce menu sa passe pas ni sur Mozilla ni sur IE, par contre Chrome aucun probleme. Alors que celui que j'ai présenté en photo, sa passait bien sur IE mais pas sur Chrome ni Mozilla.

EDIT
Voila le premier exemple
JSFiddle

[NoSmoking]

Place plutôt tes "caret" en position:absolute et non en float:right.

Pour information il faut respecter l'ordre

Code :

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

1
2
3
-webtkit-transition: 2s ease-in-out;
    -moz-transition: 1s opacity 0.3s;
         transition: 0.5s ease-in-out;

la version sans préfixe propriétaire en fin (tu n’appliques pas les mêmes transition suivant les navigateurs ?).

[StripMat]

Le coup du position:absolute fonctionne, mais uniquement pour les items de premiers niveaux, mais comment "reverse" le left:25px que j'applique au <ul> lorsque un sous-menu est display, pour créer une certaine indentation. Il faudrait inverser ce décalage uniquement pour le "caret".

Et si rassure toi, je vais harmoniser les transitions, c'est une erreur de ma part que tu fais bien de souligner !

[StripMat]

J'ai trouvé la solution

Code css :

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

1
2
3
4
5
 
.dropdown-menu .caret
{
    right:25px;
}

Par contre j'ai remarqué que si on survol jusqu'a environs 200px SOUS mon menu, sa déclenche un évent hover et sa display un des sous menus.
Je pense que c'est parceque j'utilise max-height:0 et opacity:0 plutôt que display:none, une idée pour rendre "inactif" les évenements "non apparents" (opacity:0, max-height:0) ?
JSFiddle

[StripMat]

C'était finalement pas sorcier

j'ai rajouté visibility:hidden

Code css :

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
 
.normal .dropdown-submenu:hover>.dropdown-menu {
	max-height:1000px;
  	opacity:1;
  	visibility:visible;
  	position:relative;
	top:0px;
	left:25px;
    transition: 0.8s ease-in-out;
    transition-delay:1s;
}
 
.normal .dropdown-menu {
  max-height:0em; 
  opacity:0;
  visibility: hidden;
}

[NoSmoking]

Visiblement un overflow: hidden; sur l'UL principale devrait également faire l'affaire et me semble plus cohérent.

[StripMat]

Effectivement, sa fonctionne exactement pareil et c'est d'autant plus cohérent.

Merci pour ces informations,

Sujet résolu !