Removing list's background when moving the list's element-CodePudding

I'm creating a dropdown list, however, when the dropdown animation happens a part of the list's container's background appears before the animation ends. I tried to fix that by adding "position: absolute" to the tag, however, the list tag contents below do not fit the container's width anymore, what should I do to fix this.

@keyframes growDown {
  0% {
    transform: scaleY(0)
  }
  80% {
    transform: scaleY(1.1)
  }
  100% {
    transform: scaleY(1)
  }
}

.bi-container {
  max-width: 100%;
  font-family: "Roboto", sans-serif;
  background: #deff9d;
  border-radius: 8px 8px 0px 0px;
  box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}

.bi-container h2.index-heading {
  text-transform: uppercase;
  font-weight: normal;
  margin: 0 16px;
  padding-top: 16px;
}

.blog-list {
  padding: 0px;
  display: none;
  position: absolute;
}

.show {
  display: block;
}

.dropdown_menu-1 {
  animation: growDown 300ms ease-in-out forwards;
  transform-origin: top center;
}

.bi-container ul.blog-list li:nth-of-type(even).blog {
  background: #2e2e2e;
}

.bi-container ul.blog-list li:hover.blog {
  background: #000;
}

<body>
  <div >
    <div id="links">
      <h2>links</h2>
    </div>
    <ul id="dangminhhoang" >
      <li >
        <a href="https://cybtechnophileblog.blogspot.com/2022/10/blog-post_5.html">Nháp 1</a>
      </li>
      <li >
        <a href="https://cybtechnophileblog.blogspot.com/2022/10/blog-post.html">Nháp 2</a>
      </li>
      <li >
        <a href="https://cybtechnophileblog.blogspot.com/2022/10/nhap-3.html">Nháp 3</a>
      </li>
      <li >
        <a href="https://cybtechnophileblog.blogspot.com/2022/10/nhap-4.html">Nháp 4</a>
      </li>
      <li >
        <a href="https://cybtechnophileblog.blogspot.com/2022/10/nhap-5.html">Nháp 5</a>
      </li>
    </ul>
  </div>
  <script>
    var links = document.getElementById("links");
    var bloglist = document.getElementById("dangminhhoang");

    function showList() {

      if (bloglist.className == 'blog-list') {
        bloglist.className = 'blog-list show dropdown_menu-1'
      } else {
        bloglist.className = 'blog-list'
      }
    }

    links.addEventListener("click", function() {
      showList();
    })
  </script>
</body>

this is the result:

CodePudding user response：

You are not obliged to use absolute position. You can add line-height to your animation, with this property, your div will grow with the time because the content will have a height of 0.

@keyframes growDown {
  0% {
    transform: scaleY(0);
    line-height:0px;
  }
  80% {
    transform: scaleY(1.1);
  }
  100% {
    transform: scaleY(1);
    line-height:1rem;
  }
}

.bi-container {
  max-width: 100%;
  font-family: "Roboto", sans-serif;
  background: #deff9d;
  border-radius: 8px 8px 0px 0px;
  box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
}

.bi-container h2.index-heading {
  text-transform: uppercase;
  font-weight: normal;
  margin: 0 16px;
  padding-top: 16px;
}

.blog-list {
  padding: 0px;
  display: none;
}

.show {
  display: block;
}

.dropdown_menu-1 {
  animation: growDown 300ms ease-in-out forwards;
  transform-origin: top center;
}

.bi-container ul.blog-list li:nth-of-type(even).blog {
  background: #2e2e2e;
}

.bi-container ul.blog-list li:hover.blog {
  background: #000;
}

<body>
  <div >
    <div id="links">
      <h2>links</h2>
    </div>
    <ul id="dangminhhoang" >
      <li >
        <a href="https://cybtechnophileblog.blogspot.com/2022/10/blog-post_5.html">Nháp 1</a>
      </li>
      <li >
        <a href="https://cybtechnophileblog.blogspot.com/2022/10/blog-post.html">Nháp 2</a>
      </li>
      <li >
        <a href="https://cybtechnophileblog.blogspot.com/2022/10/nhap-3.html">Nháp 3</a>
      </li>
      <li >
        <a href="https://cybtechnophileblog.blogspot.com/2022/10/nhap-4.html">Nháp 4</a>
      </li>
      <li >
        <a href="https://cybtechnophileblog.blogspot.com/2022/10/nhap-5.html">Nháp 5</a>
      </li>
    </ul>
  </div>
  <script>
    var links = document.getElementById("links");
    var bloglist = document.getElementById("dangminhhoang");

    function showList() {

      if (bloglist.className == 'blog-list') {
        bloglist.className = 'blog-list show dropdown_menu-1'
      } else {
        bloglist.className = 'blog-list'
      }
    }

    links.addEventListener("click", function() {
      showList();
    })
  </script>
</body>

CodePudding user response：

Just add relative position to your wrapper or container and set a width of 100% to your blog-list.

var links = document.getElementById("links");
          var bloglist = document.getElementById("dangminhhoang");
      
          function showList() {
      
            if (bloglist.className == 'blog-list') {
              bloglist.className = 'blog-list show dropdown_menu-1'
            } else {
              bloglist.className = 'blog-list'
            }
          }
      
          links.addEventListener("click", function() {
            showList();
          })

@keyframes growDown {
  0% {
    transform: scaleY(0)
  }
  80% {
    transform: scaleY(1.1)
  }
  100% {
    transform: scaleY(1)
  }
}

.bi-container {
  max-width: 100%;
  font-family: "Roboto", sans-serif;
  background: #deff9d;
  border-radius: 8px 8px 0px 0px;
  box-shadow: 0 4px 11px rgba(0, 0, 0, 0.6);
  position: relative;
}

.bi-container h2.index-heading {
  text-transform: uppercase;
  font-weight: normal;
  margin: 0 16px;
  padding-top: 16px;
}

.blog-list {
  width: 100%;
  padding: 0px;
  display: none;
  position: absolute;
}

.show {
  display: block;
}

.dropdown_menu-1 {
  animation: growDown 300ms ease-in-out forwards;
  transform-origin: top center;
}

.bi-container ul.blog-list li:nth-of-type(even).blog {
  background: #2e2e2e;
}

.bi-container ul.blog-list li:hover.blog {
  background: #000;
}

<div >
          <div id="links">
            <h2>links</h2>
          </div>
          <ul id="dangminhhoang" >
            <li >
              <a href="https://cybtechnophileblog.blogspot.com/2022/10/blog-post_5.html">Nháp 1</a>
            </li>
            <li >
              <a href="https://cybtechnophileblog.blogspot.com/2022/10/blog-post.html">Nháp 2</a>
            </li>
            <li >
              <a href="https://cybtechnophileblog.blogspot.com/2022/10/nhap-3.html">Nháp 3</a>
            </li>
            <li >
              <a href="https://cybtechnophileblog.blogspot.com/2022/10/nhap-4.html">Nháp 4</a>
            </li>
            <li >
              <a href="https://cybtechnophileblog.blogspot.com/2022/10/nhap-5.html">Nháp 5</a>
            </li>
          </ul>
        </div>