dropdown menu par As321 - page 1

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

As321

21 novembre 2021 à 18:23:36

philiga

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.

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

dropdown menu

dropdown menu

Supprimer

Modérer

Signaler le message aux modérateurs