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 déroulant à trois niveaux


Sujet :

CSS

  1. #1
    Nouveau Candidat au Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Février 2021
    Messages
    1
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 26
    Localisation : France, Haute Garonne (Midi Pyrénées)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Février 2021
    Messages : 1
    Points : 1
    Points
    1
    Par défaut Menu déroulant à trois niveaux
    Bonjour

    Je souhaite avoir un menu déroulant qui descend jusqu'à 3 sous-niveaux. J'aimerais aussi que seuls les titres de niveau 1 soient affichés, jusqu'à ce que la souris en survole un qui contient un sous-niveau. Puis, si la souris survole un titre de niveau 2 qui contient des niveaux 3, afficher ces derniers à leur tour.

    Pour l'instant le menu déroulant de niveau 2 marche : lorsque la souris passe sur les éléments du menu 1, il y a les éléments du niveau 2 qui apparaissent puis qui disparaissent lorsque la souris part.

    Cependant le problème survient pour le niveau 3 du menu : ici les éléments du troisième menu ne s'affichent pas lorsque la souris passe dessus.

    En fait je voudrais que lorsque la souris passe sur un élément de niveau 2 qui contient des éléments de niveau 3 ces éléments apparaissent comme sur l'exemple ci-dessous



    Voici mon code html et css :
    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
    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
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    174
    175
    176
    177
    178
    179
    180
    181
    182
    183
    184
    185
    186
    187
    188
    189
    190
    191
    192
    193
    194
    195
    196
    197
    198
    199
    200
    201
    202
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    <HTML>
    <HEAD>
      <meta charset ="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Idylle bourgeoise</title>
        <script src="https://kit.fontawesome.com/5c79d10849.js" crossorigin="anonymous"></script>
        <link href="https://fonts.googleapis.com/css2?family=Oswald&display=swap" rel="stylesheet">
      <link href="https://fonts.googleapis.com/css2?family=IM+Fell+English+SC&display=swap" rel="stylesheet">
      <style>
      .header {
        background-color : white;
        width: 100%;
        margin: 0 auto;
        position: flex;
        top: 0px;
        margin-bottom : -20;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        font-family: 'Arial', serif;
      }
      aside {
        float : right;
        color : black;
     background-color : #7EF2E7;
     opacity : 0.8;
     border-radius: 10px;
        margin-right: 10%;
        margin-top : 20px;
        margin-left : 10%;
        padding-left: 10px;
        padding-right: 10px;
        display: inline-block;
      }
      .site-description {
        text-align: center;
      }
    nav{
        width: 104%;
        margin-left: -49px ;
        margin-right: -100px ;
        background-color: #44A6A6;
        position: sticky;
        top: 0px;
    }
    nav ul{
        list-style-type: none;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 0px;
        padding-bottom: 0px;
    }
    nav ul li{
        float: left;
        width: 14.2%;
        text-align: center;
        position: relative;
        margin : auto;
    }
    nav ul::after{
        content: "";
        display: table;
        clear: both;
    }
    nav a{
        display: block;
        text-decoration: none;
        color: black;
        border-bottom: 2px solid transparent;
        padding: 10px 0px;
        color : white;
        font-family: 'Arial', serif;
    }
    /*fait apparaitre un block de couleur quand on passe sur un élément*/
    nav a:hover{
        color: black;
        background-color: #7EF2E7;
        border-bottom: 2px solid black;
    }
    .sous{
        display : none; /*masque les sous éléments*/
        box-shadow: 0px 1px 2px #CCC; /*met le cadre des sous éléments en reliefs*/
        background-color: white;/*definit la couleur */
        position: absolute;
        width: 100%;
        z-index: 1000;
    }
    nav > ul li:hover .sous{
        display: block; /*fait apparaitre les éléments de sous*/
    }
    .sous li{
        float: none;
        width: 100%;
        text-align: left;
        border-top : thin dotted black;
    }
    .sous a{
        padding: 10px;
        border-bottom: none;
        color : black;
    }
    .sous a:hover{
        border-bottom: none;
        background-color: RGBa(200,200,200,0.1);
    }
    .deroulant > a::after{
        content:"▼";
        font-size: 12px;
    }
    .conteneur{
      margin: 50px 20px;
      height: 1500px;
    }
    article{
      float : right;
      color : white;
      background-color : black;
      opacity : 0.8;
      border-radius: 10px;
      margin-right: 10%;
      margin-top : 30px;
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 5px;
      padding-bottom: 5px;
    }
    .search-container {
      margin-top : 10px;
    }
    .sous-sous{
        display : none; /*masque les sous éléments*/
        box-shadow: 0px 1px 2px #CCC; /*met le cadre des sous éléments en reliefs*/
        background-color: white;/*definit la couleur */
        position: absolute;
        width: 100%;
        z-index: 1000;
    }
    nav > ul li:hover .sous{
        display: block; /*fait apparaitre les éléments de sous*/
    }
    .sous-sous li{
        float: none;
        width: 100%;
        text-align: left;
        border-top : thin dotted black;
    }
    .sous-sous a{
        padding: 10px;
        border-bottom: none;
        color : black;
    }
    .sous-sous a:hover{
        border-bottom: none;
        background-color: RGBa(200,200,200,0.1);
    }
    .deroulant-sous > a::after{
        content:"▼";
        font-size: 12px;
    }
      </style>
    </HEAD>
    <BODY>
      <div class="header">
              <a href=""><img src="../Accueil/logo.jpg" height="105px" width="245px"></a>
              <aside><p class="site-description">Bienvenue sur le site de valorisation d'une collection de photographies issues du fonds Joseph Mauran,photographe amateur et bourgeois rural de la Belle Epoque.</p></aside>
    <article>Espace</br>enseignant</article>
      </div>
      <div class="menu">
      <ul>
        <nav>
    <ul>
      <li ><a href="#"><i class="fas fa-home"></i>&ensp;Accueil &ensp;</a>
      <li ><a href="#">Joseph Mauran &ensp;</a>
      </li>
      <li class="deroulant"><a href="#">Decouvrir la Belle Epoque &ensp;</a>
        <ul class="sous">
          <li class="deroulant-sous"><a href="#">Evénements Historiques</a></li>
            <ul class="sous-sous">
              <li><a href="#">Exposition maritime internationale</a></li>
              <li><a href="#">Exposition universelle</a></li>
              <li><a href="#">Guerre</a></li>
            </ul>
          <li class="deroulant-sous"><a href="#">Manifestations Sociales</a></li>
              <ul class="sous-sous">
              </ul>
          <li class="deroulant-sous"><a href="#">Innovations Technologiques</br></a></li>
              <ul class="sous-sous">
              </ul>
          <li class="deroulant-sous"><a href="#">Style de vie</a></li>
              <ul class="sous-sous">
              </ul>
          <li class="deroulant-sous"><a href="#">Photomontages</a></li>
          <li class="deroulant-sous"><a href="#">Vêtements</a></li>
              <ul class="sous-sous">
              </ul>
        </ul>
      </li>
      <li><a href="#">Cartes postales</br> </a></li>
      <li class="deroulant"><a href="#">Jeux &ensp;</a>
        <ul class="sous">
          <li><a href="#">Quizz</a></li>
          <li><a href="#">Memory</a></li>
          <li><a href="#">Bonus</a></li>
        </ul>
        </li>
      <li class="deroulant"><a href="#">A propos &ensp;</a>
        <ul class="sous">
          <li><a href="#">Qui sommes nous</a></li>
          <li><a href="#">Mission et projet</a></li>
          <li><a href="#">Bibliographie</a></li>
        </ul>
        </li>
      <li>
            <div class="search-container">
          <form action="#">
            <input type="text" placeholder="   Rechercher..." name="search">
            <button type="submit"><i class="fas fa-search"style="font-size:16px; padding-top:1px ; padding-bottom: 1px;"></i></button>
          </form>
              </div>
      </li>
    </ul>
    </nav>
      </ul>
    </div>
    </BODY>
    </HTML>

    Cela fait deux jours que je me prend la tête pour savoir comment résoudre le problème.

    Est-ce que vous voyez d'ou viendrais le problème ?

    Merci d'avance pour vos réponses et vos solutions.

  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 et bienvenue sur DVP.
    ici les éléments du troisième menu ne s'affichent pas lorsque la souris passe dessus.
    il n'y a rien dans tes menus niveau 3 !?!


    Tu peux peut-être t'inspirer de Effet sur menu multi-niveaux, même si cela date un peu cela reste opérationnel.

    Nota : la construction de ton HTML est non conforme
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div class="menu">
      <ul>
        <nav>
          <ul>
    <nav> ne peut pas être enfant direct de <ul> et qui plus est il ne sert à rien.

  3. #3
    Expert éminent sénior

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 380
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 380
    Points : 10 410
    Points
    10 410
    Par défaut
    Citation Envoyé par fabiendelrieu Voir le message
    Bonjour

    Je souhaite avoir un menu déroulant qui descend jusqu'à 3 sous-niveaux. J'aimerais aussi que seuls les titres de niveau 1 soient affichés, jusqu'à ce que la souris en survole un qui contient un sous-niveau. Puis, si la souris survole un titre de niveau 2 qui contient des niveaux 3, afficher ces derniers à leur tour.
    Est-ce que tu as bien réfléchis à l'ergonomie, et à la compatibilité avec les smartphones ? On en voit quasiment plus des menus à plus de 2 niveaux (c'est à dire titre + sous-menu) parce que c'est difficile à utiliser y compris sur un ordinateur de bureau, et incompatible ou encore plus difficile à utiliser sur les smartphones. Au delà du premier sous-menu on fait maintenant afficher une nouvelle page pour lister les menus suivants, soit sur une nouvelle page soit sous forme d'un popup css/javascript. La première solution étant plus facile pour avoir un code directement compatible desktop/mobile.

    Et toujours pour des problèmes de compatibilité il faut oublier le mouseover pour les portables. Bref là tu reviens de nombreuses années en arrière au niveau de l'ergonomie, et si certaines évolutions sont critiquables, celle-ci s'est imposée comme une évidence car les sous-menus multiples sont pénibles à utiliser pour l'utilisateur.

Discussions similaires

  1. Css menu déroulant à deux niveaux
    Par tatutatu2009 dans le forum Mise en page CSS
    Réponses: 1
    Dernier message: 25/04/2015, 19h07
  2. Menu déroulant à plusieurs niveaux (CSS+JS)
    Par Toiine dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 16/04/2015, 12h50
  3. [XL-2010] Menu déroulant multi-niveaux
    Par maxoulagalere dans le forum Excel
    Réponses: 18
    Dernier message: 08/01/2015, 17h29
  4. [MySQL] Menu déroulant à trois niveaux
    Par jonfever dans le forum PHP & Base de données
    Réponses: 3
    Dernier message: 02/10/2012, 10h58
  5. Menu déroulant (select), passer de 2 niveaux à 3 niveaux
    Par DaD92 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 10/12/2006, 22h51

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