【每日一练】205—折叠菜单栏效果

每日一练8个月前更新 admin
971 0

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

【每日一练】205—折叠菜单栏效果

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>【每日一练】第205练</title>
    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css” integrity=”sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==” crossorigin=”anonymous” />
    <link rel=”stylesheet” href=”index.css”>
</head>
<body>
    <i class=”fa fa-bars” aria-hidden=”true”></i>
    <div class=”sidebar”>
        <div class=”sidebar-header”>
            <img class=”logo” src=”logo.svg” alt=”logo”>
            <i class=”fa fa-times” aria-hidden=”true”></i>
        </div>
        <ul class=”menu”>
            <li><a href=”#”>Home</a></li>
            <li><a href=”#”>About</a></li>
            <li><a href=”#”>Contact</a></li>
        </ul>
    </div>
    <script src=”index.js”></script>
</body>
</html>

CSS:

* {
    margin: 0;
    padding: 0;
  }
  body {
    font-family: sans-serif;
    background: #ebebeb;
  }
  .menu a {
    display: block;
    font-size: 1.5rem;
    padding: 1rem 1.5rem;
    color: grey;
    transition: all 0.3s linear;
    text-decoration: none;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    background: white;
    width: 100%;
    height: 100%;
    transition: all 0.3s linear;
    transform: translate(-100%);
  }
  .show-sidebar {
    transform: translate(0);
  }
  .fa-bars {
    position: fixed;
    top: 2rem;
    right: 3rem;
    color: #00a6bc;
    font-size: 1.5rem;
    cursor: pointer;
  }
  .fa-bars:hover {
    color: black;
  }
  .fa-times {
    font-size: 1.5rem;
    color: #00a6bc;
    cursor: pointer;
  }
  .fa-times:hover {
    color: black;
  }
  .sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
  }
  .logo {
    margin-left: -15px;
  }
  @media (min-width: 676px) {
    .sidebar {
      width: 500px;
    }
  }
  .menu a:hover {
    background: #00a6bc;
    padding-left: 1.7rem;
    color:#fff;
  }

JS:

const bars = document.querySelector(“.fa-bars”);
const sidebar = document.querySelector(“.sidebar”);
const closingButton = document.querySelector(“.fa-times”);
bars.addEventListener(“click”, () => {
  sidebar.classList.toggle(“show-sidebar”);
});
closingButton.addEventListener(“click”, () => {
  sidebar.classList.remove(“show-sidebar”);
});

写在最后

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

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

 

© 版权声明

相关文章

暂无评论

暂无评论...