IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Menu scrollable et infobulle


Sujet :

CSS

  1. #1
    Membre habitué Avatar de memento80
    Homme Profil pro
    Boulot : ne rentre pas dans une case
    Inscrit en
    Novembre 2004
    Messages
    163
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Boulot : ne rentre pas dans une case
    Secteur : Industrie

    Informations forums :
    Inscription : Novembre 2004
    Messages : 163
    Points : 125
    Points
    125
    Par défaut 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.

    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 :
    Nom : 2020-02-11 15_56_36-Window.png
Affichages : 237
Taille : 48,8 Ko

    Merci par avance pour votre aide.

    Memento

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 939
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 939
    Points : 44 112
    Points
    44 112
    Par défaut
    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.

  3. #3
    Membre habitué Avatar de memento80
    Homme Profil pro
    Boulot : ne rentre pas dans une case
    Inscrit en
    Novembre 2004
    Messages
    163
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Boulot : ne rentre pas dans une case
    Secteur : Industrie

    Informations forums :
    Inscription : Novembre 2004
    Messages : 163
    Points : 125
    Points
    125
    Par défaut
    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 ?

  4. #4
    Invité
    Invité(e)
    Par défaut
    Bonjour,

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

    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
    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 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
    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;
    }
    Dernière modification par Invité ; 13/02/2020 à 13h59.

  5. #5
    Membre habitué Avatar de memento80
    Homme Profil pro
    Boulot : ne rentre pas dans une case
    Inscrit en
    Novembre 2004
    Messages
    163
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 44
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Boulot : ne rentre pas dans une case
    Secteur : Industrie

    Informations forums :
    Inscription : Novembre 2004
    Messages : 163
    Points : 125
    Points
    125
    Par défaut
    Bravo !

    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.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [CSS 2] Lier une infobulle aux icones du menu ?
    Par dukky dans le forum Mise en page CSS
    Réponses: 10
    Dernier message: 19/06/2009, 15h17
  2. TreeView et menu contextuel...
    Par agh dans le forum Composants VCL
    Réponses: 6
    Dernier message: 06/04/2009, 13h23
  3. Réponses: 10
    Dernier message: 06/04/2009, 01h28
  4. [système] Comment ajouter un item dans le context menu de Windows ?
    Par ddmicrolog dans le forum API, COM et SDKs
    Réponses: 8
    Dernier message: 29/06/2005, 18h03
  5. Menu en GL
    Par Kaïn dans le forum OpenGL
    Réponses: 2
    Dernier message: 06/05/2002, 12h58

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo