【每日一练】206—下拉菜单效果

每日一练1年前 (2023)发布 admin
1,301 0

以下是今天每日一练的最终效果:

【每日一练】206—下拉菜单效果

HTML:

<!DOCTYPE html>
<html lang=”en”>
  <head>
    <meta charset=”UTF-8″ />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
    <title>【每日一练】第206练</title>
    <link
      rel=”stylesheet”
      href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css”
      integrity=”sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==”
      crossorigin=”anonymous”
      referrerpolicy=”no-referrer”
    />
    <link rel=”stylesheet” href=”index.css” />
  </head>
  <body>
    <div class=”menu”>
      <p>今天需要做的几件事情</p>
      <i class=”fas fa-angle-down”></i>
    </div>
    <ul class=”social-lists hide”>
      <li>
        <p>01-学习编程</p>
      </li>
      <li>
        <p>02-看书阅读</p>
      </li>
      <li>
        <p>03-运动减肥</p>
      </li>
      <li>
        <p>04-摄影修片</p>
      </li>
    </ul>
    <script src=”index.js”></script>
  </body>
</html>

CSS:

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    justify-content: center;
    font-family: sans-serif;
    background: #444;
  }
  .menu {
    background: #fff;
    width: 300px;
    opacity: 0.3;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
  }
  .menu .fas{
      transition: transform .5s;
  }
  .menu p {
    margin: 0 10px;
    display: flex;
    align-items: center;
    color:#222;
  }
  .social-lists {
    background: #fff;
    width: 300px;
    padding: 10px;
    opacity: 0.3;
    list-style-type: none;
    border-radius: 5px;
  }
  .social-lists li {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: padding 0.2s linear;
  }
  .social-lists li:hover {
    background: #555;
    border-radius: 5px;
    padding-left: 10px;
    color:#fff;
  }
  .social-lists li .fab {
    margin: 0 10px;
  }
  .rotate .fas {
    transform: rotate(180deg);
  }
  .hide {
    visibility: hidden;
  }

JS:

const menuEl = document.querySelector(“.menu”);
const menuTextEl = document.querySelector(“.menu p”);
const socialListsEl = document.querySelector(“.social-lists”);
const liEls = document.querySelectorAll(“.social-lists li”);
menuEl.addEventListener(“click”, () => {
  socialListsEl.classList.toggle(“hide”);
  menuEl.classList.toggle(“rotate”);
});
liEls.forEach((liEl) => {
  liEl.addEventListener(“click”, () => {
    menuTextEl.innerHTML = liEl.innerHTML;
    socialListsEl.classList.add(“hide”);
    menuEl.classList.toggle(“rotate”);
  });
});

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

 

© 版权声明

相关文章

暂无评论

暂无评论...