Discussion :

[laurentSc]

Bonjour,

je m'occupe d'un menu.
Normalement, si on survole un item de niveau 1 et qu'un sous-menu existe, celui-ci est affiché. De même si on survole un item du sous-menu (menu de niveau 2) et qu'un sous-menu existe, celui-ci est affiché (menu de niveau 3).
Mon souci est qu'il n'est pas affiché seulement si on survole l'item de niveau 2 mais dès qu'on survole l'item de niveau 1. Le problème est clair sur ce codepen : http://codepen.io/laurentsc/pen/KaweLR

Code html :

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
19
20
21
 
<nav class="page">
 
<ul class="menu">
 
<li class="position  plus"><a  href="#">aide </a>
	<ul class="displaynone">
	   <li ><a href="#">aide1 </a></li>
	   <li ><a href="#">aide2 </a></li>
	   <li class=" plus"><a href="#" >aide3</a>
            <ul id="IPaddress displaynone">
              <li ><a href="#">aide31 </a></li>
              <li ><a href="#">aide32 </a></li>
            </ul>
          </li>
        </ul>
  </li>
 
</ul>
 
</nav>

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
 
.page{
  font-size : 1.44em;
 width:20%;
}
 
.menu {
	background:lightgreen;
	 border: 1px solid #48B;
	   line-height:2em;
  height:6.5em;
  font-size:0.8em;
}
/* Barre de menu principale */
.menu a {
  display:block;
  margin:0;
  padding:0.5em;
  font-weight:bold;
  text-decoration:none;
  color:#00F;
  position : relative;
}
.menu  ul.displaynone{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  top:3.0em; /* hauteur du bandeau principal = hauteur + padding */
  line-height:1.0em;
}
 
 
.menu li {
  float:left;
  position:relative;
  list-style: none;
}
/* modification lien sous menus */
.menu ul li a {
  color:#666;
  font-weight:normal;
}
.menu li:hover > a {
  text-decoration:underline;
}
.menu li:hover > ul{
  display: block;
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background: #FEFEFF;
  border:solid 1px #48B;
}
 
 
 
/* position et dimension des sous menus */
 
.menu ul li {	
  margin:0;
  width:10.5em;
}
 
 
.menu ul ul {
  left:100%; /* décalage de la largeur des LI 100% permet de ne pas gérer la largeur des LI */
  top: -1px; /* tient compte de la largeur de la bordure */
  position:absolute;/* position needed for use of float */
  float:right; /
}
 
 
/* indicateur de présence d'un sous menu */
li.plus:before{
  content: "\25BA";
  float:right;
  color:#ABC;
  position:relative;
  top:7px;
}

pourquoi ?

[Invité]

Bonjour Laurent,
et Bonne Année

Enlève la classe "displaynone".

[laurentSc]

Bonne année Jérôme

ça a l'air plus compliqué que ça : http://codepen.io/laurentsc/pen/KaweLR

[ABCIWEB]

Salut,

Avant d'aller plus loin dans cette voie, as-tu bien pris en considération que les hover posent de gros problèmes sur les smartphones et plus généralement sur les écrans tactiles ?

Note d'utilisation : sur les écrans tactiles, :hover est problématique voire impossible. La pseudo-classe :hover n'est jamais valide, ou seulement pendant un très court instant après avoir touché l'élément. Puisque les appareils à écrans tactiles sont très courants, il est important que les développeurs web ne placent pas de contenu accessible seulement lors du survol, puisque ce contenu sera caché pour les utilisateurs de tels appareils.

[laurentSc]

Bonsoir,

je te remercie pour ta réponse. Il se trouve que la cible est un site intranet et le site n'est (déjà actuellement car c'est une évolution) utilisé que sur des PCs (écrans non tactiles).

Au fait, les "vieilles" archives dont tu parles dans http://www.developpez.net/forums/d16...exte-saccades/ sont dans ta signature...

[ABCIWEB]

Quest-ce que tu entends par ma signature ? Moi je ne vois que deux liens, le premier vers un module d'upload et le second vers mon site perso. Effectivement il y avait un lien vers ce module de défilant mais il y a longtemps que je l'ai supprimé, ou alors j'ai oublié quelque chose quelque part ?