Partage
  • Partager sur Facebook
  • Partager sur Twitter

dropdown menu

    21 novembre 2021 à 18:23:36

    Bonjour, j'ai une page avec un menu drop down. Le probleme c'est que quand je clique dessus. Quand le menu est déroulé. Le contenu après est caché par le menu. Je voudrai que le contenu après le menu suive le menu même quand il est déroulé.

    Si vous avez des idées je vous en serai reconnaissant.

    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title>Liens</title>
        <link rel="stylesheet" href="DynamicDropDownMenu.css">
      </head>
      <body>
    
    
          <nav class="menu">
            <span class="menu_selected-item">Menu 1 </span>
            <input type="checkbox" class="menu_arrow menu_arrow-invert" name="menu_arrow" id="menu_arrow" />
            <label for="menu_arrow"></label>
            <div class="menu_options">
              <ul>
                <li>
                  lien 1
                </li>
                <li>
                  lien 2
                </li>
                <li>
                  lien 3
                </li>
                <li>
                  lien 4
                </li>
              </ul>
            </div>
          </nav>
          <div>du text</div>
      </body>
    </html>
    body {
      margin: 0;
      padding: 0;
      font-family: 'Arial';
    }
    
    ul {
      padding: 0;
      margin: 0;
      list-style: none;
    }
     .menu {
    	 position: relative;
    	 background: rgb(90, 90, 90);
    	 max-width: 480px;
       margin: 0 auto;
       padding: 16px 32px;
     }
    
     .clear {
       clear: both;
     }
    
     .menu_selected-item {
    	 display: inline-block;
    	 color: white;
    	 user-select: none;
    	 -webkit-user-drag: none;
    	 cursor: pointer;
    	 transition: color 0.2s ease-in-out;
    	  font-size: 32px;
    }
     .menu_arrow {
    	 display: none;
    }
    
    
     .menu_arrow + label {
    	 display: inline-block;
    	 position: relative;
    	 padding: 16px;
    	 float: right;
    	 cursor: pointer;
    }
     .menu_arrow + label::before, .menu_arrow + label::after {
    	 content: "";
    	 background: white;
    	 display: block;
    	 position: absolute;
    	 top: 0;
    	 bottom: 0;
    	 height: 0.25rem;
    	 width: calc(50% + .1875rem);
    	 margin: auto;
    	 transition: transform 0.4s cubic-bezier(0.8, 0.2, 0.5, 0.1), background 0.2s ease-in-out;
    }
     .menu_arrow + label::before {
    	 left: 0;
    	 border-radius: 0.5rem 0 0 0.5rem;
    }
     .menu_arrow + label::after {
    	 right: 0;
    	 border-radius: 0 0.5rem 0.5rem 0;
    }
     .menu_arrow + label:hover::before, .menu_arrow + label:hover::after {
    	 background: white;
    }
     .menu_arrow-invert + label::before {
    	 transform: rotate(40deg);
    }
     .menu_arrow-invert + label::after {
    	 transform: rotate(-40deg);
    }
     .menu_arrow-invert:checked + label::before {
    	 transform: rotate(-40deg);
    }
     .menu_arrow-invert:checked + label::after {
    	 transform: rotate(40deg);
    }
     .menu_arrow-invert:checked + label + .menu_options {
    	 opacity: 1;
    	 pointer-events: all;
    }
     .menu_options {
    	 opacity: 0;
    	 pointer-events: none;
    	 transition: all 0.4s ease-in-out;
    	 position: absolute;
    	 top: 100%;
    	 left: 0;
    	 right: 0;
    }
    
    
     .menu_options li {
    	 padding: 37px 36px;
       color: black;
    	 background: rgba(90, 90, 90, .2);
    	 transition: all 0.2s ease-in-out;
       border-bottom: 1px solid rgb(90, 90, 90);
    }
    
    .menu_options li:last-child {
      border-bottom: none;
      padding-bottom: 37px;
    }
    
    
     .menu_options li:hover {
       padding: 36px 36px;
    	 background: rgba(90, 90, 90, .6);
       color: white;
       font-size: 18px;
    }




    -
    Edité par As321 21 novembre 2021 à 18:24:15

    • Partager sur Facebook
    • Partager sur Twitter
      27 novembre 2021 à 22:11:09

      Bonsoir,

      Evite de positionner en absolute ta div class="menu_options" et ça ira mieux ;

      div qui, en outre est superflue, puisque tu peux mettre cette classe directement sur ul sans ajouter un conteneur inutile.

      • Partager sur Facebook
      • Partager sur Twitter
      "La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)

      dropdown menu

      × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
      • Editeur
      • Markdown