2 votes

ICoded avatar

ul li imbriqué hors de sa position

Demandé el 18 de Mai, 2022
Quand la question a-t-elle été
52 affichage
Nombre de visites la question a
1 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

J'ai créé un petit menu de navigation qui contiendra d'autres options. L'élément li doit être ouvert et une autre liste apparaît. Malheureusement, ma liste imbriquée apparaît à côté de l'élément li parent et non en dessous. Entre-temps, j'ai bidouillé ici et là et je n'arrive pas à trouver mon problème, il doit s'agir de quelque chose de très simple que je ne vois plus.

J'apprécie tout conseil.

  var icon = document.getElementById("main-menu-button");
    var icon1 = document.getElementById("icon-top");
    var icon2 = document.getElementById("icon-middle");
    var icon3 = document.getElementById("icon-bottom");
    var nav = document.getElementById('main-menu');

    icon.addEventListener('click', function() {
    icon1.classList.toggle('icon-top');
    icon2.classList.toggle('icon-middle');
    icon3.classList.toggle('icon-bottom');
    nav.classList.toggle('show');
    });

    $('.main-menu-ul ul').hide();

    $('.main-menu-li').click(function() {
        $(this).find('ul').slideToggle();
    });

   .icon-1, .icon-2, .icon-3 {
    position: absolute;
    left: 25%;
    top: 50%;
    width: 32px;
    height: 3px;
    background-color: black;
    transition: all 400ms cubic-bezier(.84,.06,.52,1.8);
}

.icon-1 {
    transform: translateY(-8px);
    animation-delay: 100ms;
}

.icon-3 {
    transform: translateY(8px);
    animation-delay: 250ms;
}

.icon-1.icon-top {
    transform: rotate(40deg);
}

.icon-2.icon-middle {
    transform: rotate(-40deg);
}

.icon-3.icon-bottom {
    opacity: 0;
}

.hamburger-icon {
    position: absolute;
    height: 60px;
    width: 60px;
    top: 2%;
    left: 1%;
    z-index: 1000;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
    background: rgba(255,255,255,0.2);
}

.hamburger-icon:hover {
    transform: scale(1.2);
    box-shadow: 0px 0px 30px rgba(0,0,0,0.1);
}

.dark-blue {
    position: absolute;
    top: 0;
    left: 0;
    background: #003273;
    height: 100%;
    width: 0%;
    transition: all 500ms cubic-bezier(0.62, 0.04, 0.3, 1.8);
    transition-delay: 50ms;
    z-index: 5;
    opacity: 0;
}

.dark-blue.slide {
    width: 25%;
    opacity: 1;
}

h1 {
    position: relative;
    top: 2%;
    left: 0;
    display: flex;
    justify-content: center;
    cursor: pointer;
    color: #757575;
}

nav {
    background: whitesmoke;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    z-index: 10;
    opacity: 0;
    box-shadow: -3px -3px 10px rgba(70,70,70,0.12), 
    3px 3px 15px rgba(70,70,70,0.12);
    transition: all 600ms cubic-bezier(0.62, 0.04, 0.3, 1.56);
    transition-delay: 100ms;
}

nav.show {
    width: 25%;
    opacity: 1;
}

.main-menu-ul {
    position: relative;
    height: fit-content;
    list-style: none;
    text-transform: uppercase;
    color: #757575;
    background: white;
    border-radius: 10px;
    box-shadow: -10px -10px 10px rgba(255,255,255,0.5), 
                 15px 15px 15px rgba(70,70,70,0.12);
    margin: 5vh 10px 10px 10px;
}

.main-menu-li {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 5vh;
    height: fit-content;
    color: #757575;
    transition: 0.3s ease-in-out;
    cursor: pointer;
    padding: 5px 0 5px 0;
    width: calc(100% - 20px);
}

.main-menu-li:hover {
    transform: scale3d(1.05);
}

.span-left {
    display: inline-block;
    width: 20%;
}

.span-middle {
    display: inline-block;
    width: 60%;
}

.span-right {
    display: inline-flex;
    justify-content: center;
    width: 20%;
}

.sub-menu-ul {
   display: inline-block;
   float: none;
   height: 0;
   border: none;
}

<head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <title>UL Test</title>    
        <!-- fontawesome stylesheet https://fontawesome.com/ -->
        <script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
        <!-- jQuery -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
     <!-- NAV Begin -->
     <div class="hamburger-icon" id="main-menu-button">
        <div class="icon-1" id="icon-top"></div>
        <div class="icon-2" id="icon-middle"></div>
        <div class="icon-3" id="icon-bottom"></div>
        <div class="clear"></div>
    </div>

<nav id="main-menu">
    <h1>Test</h1>

    <ul class="main-menu-ul">
        <li class="main-menu-li">
            <span class="span-left"><i class="fa-solid fa-user"></i></span>
            <span class="span-middle">Login</span>
            <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
                <ul class="sub-menu-ul">
                    <li>
                        <input type="text" placeholder="Username">
                        <input type="password" placeholder="Password"> 
                    </li>        
                </ul>
        </li>
        <li class="main-menu-li">
            <span class="span-left"><i class="fa-solid fa-magnifying-glass"></i></span>
            <span class="span-middle">Search</span>
            <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </li>
        <li class="main-menu-li">
            <span class="span-left"><i class="fa-solid fa-mountain-sun"></i></span>
            <span class="span-middle">Display Settings</span>
            <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </li>
        <li class="main-menu-li">
            <span class="span-left"><i class="fa-solid fa-gears"></i></span>
            <span class="span-middle">General Settings</span>
            <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </li>
        <li class="main-menu-li">
            <span class="span-left"><i class="fa-solid fa-file-export"></i></span>
            <span class="span-middle">Export</span>
            <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </li>
    </ul>

    <ul class="main-menu-ul">
        <li class="main-menu-li">
            <span class="span-left"><i class="fa-solid fa-info"></i></span>
            <span class="span-middle">Info</span>
            <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </li>
    </ul>
</nav>
</body>
Demandé el 18 de Mai, 2022 par ICoded

Réponse

Trop de publicités?

2voto

Nick Vu avatar
Nick Vu Points 755

Vous avez un problème lié à la flexbox. Tous les éléments sous main-menu-li sont des éléments flexibles, y compris votre sous ul .

Pour un correctif, vous devez séparer ces éléments en main-menu-li par des divs et définir des flexboxes pour les divs à la place.

var icon = document.getElementById("main-menu-button");
var icon1 = document.getElementById("icon-top");
var icon2 = document.getElementById("icon-middle");
var icon3 = document.getElementById("icon-bottom");
var nav = document.getElementById('main-menu');

icon.addEventListener('click', function() {
  icon1.classList.toggle('icon-top');
  icon2.classList.toggle('icon-middle');
  icon3.classList.toggle('icon-bottom');
  nav.classList.toggle('show');
});

$('.main-menu-ul ul').hide();

$('.main-menu-li').click(function() {
  $(this).find('ul').slideToggle();
});

.icon-1,
.icon-2,
.icon-3 {
  position: absolute;
  left: 25%;
  top: 50%;
  width: 32px;
  height: 3px;
  background-color: black;
  transition: all 400ms cubic-bezier(.84, .06, .52, 1.8);
}

.icon-1 {
  transform: translateY(-8px);
  animation-delay: 100ms;
}

.icon-3 {
  transform: translateY(8px);
  animation-delay: 250ms;
}

.icon-1.icon-top {
  transform: rotate(40deg);
}

.icon-2.icon-middle {
  transform: rotate(-40deg);
}

.icon-3.icon-bottom {
  opacity: 0;
}

.hamburger-icon {
  position: absolute;
  height: 60px;
  width: 60px;
  top: 2%;
  left: 1%;
  z-index: 1000;
  cursor: pointer;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
  background: rgba(255, 255, 255, 0.2);
}

.hamburger-icon:hover {
  transform: scale(1.2);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}

.dark-blue {
  position: absolute;
  top: 0;
  left: 0;
  background: #003273;
  height: 100%;
  width: 0%;
  transition: all 500ms cubic-bezier(0.62, 0.04, 0.3, 1.8);
  transition-delay: 50ms;
  z-index: 5;
  opacity: 0;
}

.dark-blue.slide {
  width: 25%;
  opacity: 1;
}

h1 {
  position: relative;
  top: 2%;
  left: 0;
  display: flex;
  justify-content: center;
  cursor: pointer;
  color: #757575;
}

nav {
  background: whitesmoke;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  z-index: 10;
  opacity: 0;
  box-shadow: -3px -3px 10px rgba(70, 70, 70, 0.12),
    3px 3px 15px rgba(70, 70, 70, 0.12);
  transition: all 600ms cubic-bezier(0.62, 0.04, 0.3, 1.56);
  transition-delay: 100ms;
}

nav.show {
  width: 25%;
  opacity: 1;
}

.main-menu-ul {
  list-style: none;
  position: relative;
  /*display: flex;*/ /*Remove this*/
  height: fit-content;
  text-transform: uppercase;
  color: #757575;
  background: white;
  border-radius: 10px;
  box-shadow: -10px -10px 10px rgba(255, 255, 255, 0.5),
    15px 15px 15px rgba(70, 70, 70, 0.12);
  margin: 5vh 10px 10px 10px;
}

.main-menu-li {
  position: relative;
  align-items: center;
  min-height: 5vh;
  height: fit-content;
  color: #757575;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  padding: 5px 0 5px 0;
  width: calc(100% - 20px);
}

/*Added a wrapper with div and made it become flexbox*/
.main-menu-li div {
  display: flex;
}

.main-menu-li:hover {
  transform: scale3d(1.05);
}

.span-left {
  display: inline-block;
  width: 20%;
}

.span-middle {
  display: inline-block;
  width: 60%;
}

.span-right {
  display: inline-flex;
  justify-content: center;
  width: 20%;
}

.sub-menu-ul {
  display: inline-block;
  float: none;
  height: 0;
  border: none;
  list-style: none;
  padding: 0;
}

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <title>UL Test</title>
  <!-- fontawesome stylesheet https://fontawesome.com/ -->
  <script src="https://kit.fontawesome.com/98a5e27706.js" crossorigin="anonymous"></script>
  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  <!-- NAV Begin -->
  <div class="hamburger-icon" id="main-menu-button">
    <div class="icon-1" id="icon-top"></div>
    <div class="icon-2" id="icon-middle"></div>
    <div class="icon-3" id="icon-bottom"></div>
    <div class="clear"></div>
  </div>

  <nav id="main-menu">
    <h1>Test</h1>

    <ul class="main-menu-ul">
      <li class="main-menu-li">
        <div>
          <span class="span-left"><i class="fa-solid fa-user"></i></span>
          <span class="span-middle">Login</span>
          <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </div>
        <ul class="sub-menu-ul">
          <li>
            <input type="text" placeholder="Username">
            <input type="password" placeholder="Password">
          </li>
        </ul>
      </li>
      <li class="main-menu-li">
        <div>

          <span class="span-left"><i class="fa-solid fa-magnifying-glass"></i></span>
          <span class="span-middle">Search</span>
          <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </div>
      </li>
      <li class="main-menu-li">
        <div>

          <span class="span-left"><i class="fa-solid fa-mountain-sun"></i></span>
          <span class="span-middle">Display Settings</span>
          <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </div>
      </li>
      <li class="main-menu-li">
        <div>

          <span class="span-left"><i class="fa-solid fa-gears"></i></span>
          <span class="span-middle">General Settings</span>
          <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </div>
      </li>
      <li class="main-menu-li">
        <div>

          <span class="span-left"><i class="fa-solid fa-file-export"></i></span>
          <span class="span-middle">Export</span>
          <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </div>
      </li>

    </ul>

    <ul class="main-menu-ul">
      <li class="main-menu-li">
        <div>

          <span class="span-left"><i class="fa-solid fa-info"></i></span>
          <span class="span-middle">Info</span>
          <span class="span-right"><i class="fa-solid fa-caret-down"></i></span>
        </div>
      </li>
    </ul>
  </nav>
</body>
Répondu el 18 de Mai, 2022 par Nick Vu (755 Points )

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X