Menu scrollable et infobulle

Version imprimable

11/02/2020, 16h07
memento80

1 pièce(s) jointe(s)

Menu scrollable et infobulle

Bonjour,

J'ai fait il y a quelques temps un menu situé sur la gauche d'un écran.
Ce menu est scrollable afin de pouvoir voir l'ensemble des options quelque soit la taille de l'écran et le nombre d'options.

Cela marchait très bien jusqu'à maintenant.

L'amélioration que je cherche à faire, ce serait de positionner des info bulles pour chaque option. Lorsque l'utilisateur place le curseur sur l'option, l'info-bulle s'affiche.
La difficulté que je rencontre, c'est que lorsque l'on déroule le menu vers le bas, les info-bulles ne sont plus alignées avec leurs options.
J'ai bien essayé de jouer avec le positionnement, mais quand j'arrive à conserver l'alignement, les info-bulles sont partiellement masquées par le overflow sur le menu.

Il ne manque peut-être pas grand chose, mais à force d'essayer, je patauge beaucoup.... et je tourne en rond. :triste:

Voici le lien fiddle d'un code que j'ai pu refaire à partir de mon problème.
Note : première fois que j'utilise fiddle - N'hésitez pas à me dire si j'en fais une mauvaise utilisation

Et un petit schéma du problème :
Pièce jointe 537710

Merci par avance pour votre aide.

Memento
12/02/2020, 18h35
NoSmoking

Bonjour,
outre le fait qu'il faille bien identifier le référent lorsque l'on met des éléments en position:absolute, ton soucis majeur est que dès que tu mettras ton <nav> scrollable et tes « info-bulles » avec les bons référents, ici les éléments <a>, ceux-ci ne seront visibles que sur la surface de l'élément <nav>.

Passe par du JavaScript.
12/02/2020, 23h14
memento80

Bonjour,

Merci pour cette réponse NoSmoking.

Citation:

Envoyé par NoSmoking

Passe par du JavaScript.

Je voulais éviter, je me sentais pas loin du but.. mais soit, si je n'ai pas le choix. :?
Par contre, histoire de ne pas repartir de 0, une idée là-dessus ? Dois-je adjoindre un complément JS à ma solution ou faut-il que j'aille trouver une pure solution JS pour mettre des info-bulles à mon menu ?

Bonjour,

je pense avoir trouvé une solution full CSS : https://codepen.io/jreaux62/pen/ZEGQzNG

Code:

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
<div class="cont">
  <header>
    <b>Bloc entête</b>
  </header>
  <main id="corps-mg">
    <nav id="mg-nav">
      <div>
        <a href="#">A<span>Option A</span></a>
        <a href="#">B<span>Option B</span></a>
        <a href="#">C<span>Option C</span></a>
        <a href="#">...<span>Option ...</span></a>
 
        <a href="#">U<span>Option U</span></a>
        <a href="#">V<span>Option V</span></a>
        <a href="#">W<span>Option W</span></a>
        <a href="#">X<span>Option X</span></a>
        <a href="#">Y<span>Option Y</span></a>
        <a href="#">Z<span>Option Z</span></a>
      </div>
    </nav>
    <section>
      <h3>Bloc à coté menu</h3>
      <p>
      Illud tamen clausos vehementer angebat quod captis navigiis, quae frumenta vehebant per flumen, Isauri quidem alimentorum copiis adfluebant, ipsi vero solitarum rerum cibos iam consumendo inediae propinquantis aerumnas exitialis horrebant.
      </p>
      <p>
      Et quia Montius inter dilancinantium manus spiritum efflaturus Epigonum et Eusebium nec professionem nec dignitatem ostendens aliquotiens increpabat, qui sint hi magna quaerebatur industria, et nequid intepesceret, Epigonus e Lycia philosophus ducitur et Eusebius ab Emissa Pittacas cognomento, concitatus orator, cum quaestor non hos sed tribunos fabricarum insimulasset promittentes armorum si novas res agitari conperissent.
      </p>
      <p>
      Ultima Syriarum est Palaestina per intervalla magna protenta, cultis abundans terris et nitidis et civitates habens quasdam egregias, nullam nulli cedentem sed sibi vicissim velut ad perpendiculum aemulas: Caesaream, quam ad honorem Octaviani principis exaedificavit Herodes, et Eleutheropolim et Neapolim itidemque Ascalonem Gazam aevo superiore exstructas.
      </p>
    </section>
  </main>
</div>

Code:

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
html,body { width:100%; min-height:100%; height:100%; }
.cont {
  height: 60vh;
  display: flex;
  flex-direction: column;
}
header { 
  background:lightyellow;
  padding:10px;
}
#corps-mg {
  position:relative;
  flex: 1 0 200px;
  border: 2px red solid;
  overflow: hidden;
}
/* SIDE MENU */
#mg-nav {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow-x: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#mg-nav > div {
  position:absolute;
  top:0;
  left:0;
}
#mg-nav a {
  position:relative;
  display:block;
  width: 85px;
  background-color: #555;
  font-size: 2em;
  text-align: center;
  color: white;
  padding:8px 0;
  text-decoration:none;
  z-index:10;
}
#mg-nav a:hover {
  background-color: #000;
}
/* tooltip */
#mg-nav a > span {
  position:absolute;
  left:90%;
  top:20%;
  width: 140px;
  padding: 5px 0;
  font-size: 0.6em;
  font-weight: bold;
  font-style: italic;
  background: #F00;
  text-align: center;
  border-radius: 8px;
  display:none; /* on masque */
}
#mg-nav a > span::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent #F00 transparent transparent;
}
#mg-nav a:hover > span {
  display:block; /* on affiche */
}
/* RIGHT BLOCK */
#corps-mg > section {
  position:relative;
  margin-left:85px;
  height:100%;
  box-sizing:border-box;
  padding:5px 20px 20px;
  background:#eee;
  overflow-y:auto;
}

13/02/2020, 13h49
memento80

Bravo ! :ccool:

Il ne me reste plus qu'à l'adapter à mon environnement pour que ça marche (il faut que je modifie un peu la structure actuelle).
Mais ça répond parfaitement à mon problème donc je peux considérer ça comme résolu.

Merci beaucoup.