Discussion :

[laurentSc]

Bonjour,

le titre résume mal mon souci, mais j'ai pas trouvé mieux.
Donc j'ai un menu (une liste ul avec des items (li)). Sur certains items, il y a un sous-menu (de nouveau une liste ul). Quand on survole l'item, le sous-menu apparaît (ça, pas de problème), mais quand on survole les items de ce sous-menu, je voudrais que ça affiche une page et la difficulté, c'est pas par-dessus le sous-menu mais à sa droite.

Voici mon code :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
<ul class="menu">
    <li><a href="#"><span>Accueil</span></a></li> 
 
    <li><a href="#"><span>Consultation</span></a>
	<ul id="uldbmach">
		<li>a<div id="div1">a</div></li>
		<li>b<div id="div2">b</div></li>
		<li>c<div id="div3">c</div></li>
	</ul>
   </li>
</ul>

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
body {
	/*font: normal 2em Arial, Helvetica, sans-serif;
	font-size : 1.2em;
	background:#ebebeb;
	margin: 100px auto;
	color: #666;*/
	margin: 0px;
}
 
a {
	color: #333;
}
 
 
.page{
  font: normal 2em Arial, Helvetica, sans-serif;
  font-size : 1.2em;
  margin: 0;/* auto;*/
  width:58.5em;
}
 
.page h1{
  color:#006699;
  text-shadow:1px 1px 0 #fff;
  vertical-align:middle;
}
.page h1 img{
  vertical-align:middle;
  margin:0 1em 0 0;
}
.menu {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  margin:0;
  padding:0;
  background:#e1e4f2;
  border: 1px solid #48B;
  height:6.5em;
  font-size:0.8em;
  z-index : 9999;
  position : relative;
}
/* 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{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  top:3.0em; /* hauteur du bandeau principal = hauteur + padding */
  line-height:1.8em;
}
.menu li {
  width:6.4em;
  height:6em;
  margin:0 2em;
  padding:0em;
  float:left;
  position:relative;
  list-style: none;
  text-align:left;
}
/* modification lien sous menus */
.menu ul li a {
  color:#666;
  font-weight:normal;
}
.menu li:hover > a {
	text-decoration:underline;
}
.menu li:hover>ul li div {
	display:none;
}
.menu li:hover > ul
,.menu li:hover > ul li:hover div
{
  display: block;
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF; /* ça y était pas lundi 25 */
  border:solid 1px #48B;/* ça y était pas lundi 25 */
}
  .menu li:hover > ul li:hover div {
  left:50px;
}
 
/* position et dimension des sous menus */
 
.menu ul li {	
  margin:0;
  width:8em;
  height:6em;
}
.menu #uldbmach >li {
	height:1em;
	line-height:1em;
}
 
 
.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 */
}
 
li a {
  text-decoration:none;
}
.menu li:hover > a {
	text-decoration:underline;
}
 
/* indicateur de présence d'un sous menu */
li.plus:before{
  content: "\25BA";
  float:right;
  color:#ABC;
  position:relative;
  top:7px;
}

http://codepen.io/laurentsc/pen/rWywgo

Malgré les lignes 94 à 96 du CSS, les div ne sont pas décalés (bien sûr les contenus actuels (a, b, c) sont provisoires. (Au cas où, pour éviter tout conflit, j'ai mis le CSS complet de ce menu)

[Thoto24]

Bonjour,

Voici ce que tu dois rajouter afin d'afficher tes div à droite des liens du sous-menu :

Code :

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

1
2
3
4
5
#div1, #div2, #div3 {
    left: 100%;
    position: absolute;
    top: 0;
}

On rend tes éléments absolute puis on les place manuellement à droite de son contenant grâce à left: 100%; puis on le remonte grâce à top:0px; qui vient placer tes div tout en haut de leurs blocks respectifs

Dis moi si c'est ce que tu voulais

[laurentSc]

pour ta réponse immédiate et qui correspond exactement à ce que je voulais.

Juste une question : je m'attendais à pouvoir remplacer #div1, #div2, #div3 par .menu li ul li div, mais non ; pourquoi ?

[laurentSc]

Je reviens sur le sujet car j'ai remplacé la ligne 6 du html par le contenu prévu (maintenant ligne 6 à 16) et je n'obtiens pas ce que je souhaite : besoin non évoqué jusque là : la page va contenir des boutons et des listes déroulantes (c'est un formulaire) donc il doit être possible de naviguer dessus (par exemple sélection d'une valeur dans la liste déroulante puis appui sur le bouton "submit").
Voici le code modifié (j'ai réduit le nombre de serveurs) :

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
22
23
24
<ul class="menu">
<li><a href="#"><span>Accueil</span></a></li>
 
	<li><a href="#"><span>Consultation</span></a>
	<ul id="uldbmach">
		<li>Sélectionner un serveur
                   <div id="div1">
                   <span>
                   <FORM action="#" method="POST">
                   <select name="machSel" size=1>
                   <option value="Sélectionner un serveur">Sélectionner un serveur</option>
                   <option>DBMAP</option>
		   <option>DBTIP</option>                    
                   </select>		
                   <input type="submit" value="Ok">
                   </FORM>
                   </span>
		   </div>
                </li>
		<li>b<div id="div2">b</div></li>
		<li>c<div id="div3">c</div></li>
	</ul>
	</li>
</ul>

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
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
body {
	/*font: normal 2em Arial, Helvetica, sans-serif;
	font-size : 1.2em;
	background:#ebebeb;
	margin: 100px auto;
	color: #666;*/
	margin: 0px;
}
 
a {
	color: #333;
}
 
 
.page{
  font: normal 2em Arial, Helvetica, sans-serif;
  font-size : 1.2em;
  margin: 0;/* auto;*/
  width:58.5em;
}
 
.page h1{
  color:#006699;
  text-shadow:1px 1px 0 #fff;
  vertical-align:middle;
}
.page h1 img{
  vertical-align:middle;
  margin:0 1em 0 0;
}
.menu {
  border-radius: 2em;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
  margin:0;
  padding:0;
  background:#e1e4f2;
  border: 1px solid #48B;
  height:6.5em;
  font-size:0.8em;
  z-index : 9999;
  position : relative;
}
/* 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{
  display:none;
  position:absolute;
  margin:0;
  padding:0;
  left:0;
  top:3.0em; /* hauteur du bandeau principal = hauteur + padding */
  line-height:1.8em;
}
.menu li {
  width:6.4em;
  height:6em;
  margin:0 2em;
  padding:0em;
  float:left;
  position:relative;
  list-style: none;
  text-align:left;
}
/* modification lien sous menus */
.menu ul li a {
  color:#666;
  font-weight:normal;
}
.menu li:hover > a {
	text-decoration:underline;
}
.menu li:hover>ul li div {
	display:none;
}
.menu li:hover > ul
,.menu li:hover > ul li:hover div
{
  display: block;
  /* propriétés suivantes mises sur le HOVER, bug sur IE7 */
  background:#FEFEFF; /* ça y était pas lundi 25 */
  border:solid 1px #48B;/* ça y était pas lundi 25 */
}
  .menu li:hover > ul li:hover div {
  left:50px;
}
 
/* position et dimension des sous menus */
 
.menu ul li {	
  margin:0;
  width:11em;
  height:6em;
}
.menu #uldbmach >li {
	height:1em;
	line-height:1em;
}
 
 
.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 */
}
 
li a {
  text-decoration:none;
}
.menu li:hover > a {
	text-decoration:underline;
}
 
/* indicateur de présence d'un sous menu */
li.plus:before{
  con
/*  .menu li ul li div*/
#div1, #div2, #div3 {
    left: 90%;
    position: absolute;
    top: 0;
}

J'ai mis le left de la ligne 128 à 90% pour qu'on puisse passer sur la page sans qu'elle disparaisse.

http://codepen.io/laurentsc/pen/rWywgo

[Cyberdome]

pour ta réponse immédiate et qui correspond exactement à ce que je voulais.

Juste une question : je m'attendais à pouvoir remplacer #div1, #div2, #div3 par .menu li ul li div, mais non ; pourquoi ?

Bonne question, en reproduisant la structure seule sans aucun contenu ça fonctionne, mais je n'ai pas trouvé ce qui coupe l'arborescence dans votre code.


Sinon pour le reste si j'ai bien compris ce qui vous pose problème, en réalité on peux naviguer sur le menu, le problème est que la liste select dépasse du menu si bien que lorsque l'on fait notre choix la liste se referme et la souris n'est plus en float sur le menu d'ou le fait qu'il se referme. Je ne vois que trois solutions, soit il faut agrandir la zone pour préserver le hover lorsque le select se referme, soit il faut tenir le div ouvert avec autre chose que la propriété hover, soit si vous n'avez pas trop de serveurs faire un sous menu déroulant avec la liste des serveur et des button de type radio pour sélectionner le serveur voulu.

[laurentSc]

Merci pour la réponse. D'abord, concernant le premier point, ce matin .menu li ul li div; fonctionne. J'ai probablement changé sans le savoir ce qui gênait !

Pour la suite, remplacer la liste déroulante par des cases à cocher, vu qu'il y a 119 serveurs, c'est pas jouable !
Si j'ai voulu utiliser le :hover, c'est pour retirer un clic, car avant, on ouvrait une page dans laquelle il y avait ces listes déroulantes...
Agrandir la zone, ça va être difficile, vu que dans l'un des cas, ce n'est pas une liste déroulante qu'on affiche mais une image (une carte du monde qui oblige même à scroller pour voir certaines parties !) et suivant la zone de l'image survolée, on a un lien (zone map).
Remplacer le :hover par autre chose, oui, mais quoi ?

[Invité]

Bonjour,

"Sans le savoir..."

1/ Il fallait enlever le bout de code parasite :

Code css :

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

1
2
3
.menu li:hover > ul li:hover div {
  left:50px;
}

2/ Si ton code était plus propre (indentation, commentaires, NE PAS regrouper plusieurs instructions sur la même ligne*,...), il serait plus clair à lire et à déboguer.

* Je pense surtout à cette ligne :

Code css :

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

1
2
3
4
.menu li:hover > ul
,.menu li:hover > ul li:hover div
{
...

Tu as déjà du mal avec un code SIMPLE, alors ARRETE de te compliquer la vie !!!

Rédige ton code de menu NIVEAU PAR NIVEAU.

Code css :

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

1
2
3
4
5
6
7
8
.menu > li:hover > ul
{
...
}
 
.menu > li > ul > li:hover > div
{
...