20231107-前端学习炫酷菜单效果和折叠侧边栏

news2025/10/31 22:58:30

炫酷菜单效果

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>炫酷菜单效果</title>
  <script src="https://kit.fontawesome.com/d37465fc7c.js" crossorigin="anonymous"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-family: sans-serif;
      list-style: none;
      text-decoration: none;
    }

    .middle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .menu {
      width: 300px;
      border-radius: 8px;
      overflow: hidden;
    }

    .item {
      border-top: 1px solid #2980b9;
      overflow: hidden;
    }

    .btn {
      display: block;
      padding: 16px 20px;
      background: #3498db;
      position: relative;
      color: white;
    }

    .btn::before {
      content: "";
      position: absolute;
      width: 14px;
      height: 14px;
      background: #3498db;
      left: 20px;
      bottom: -7px;
      transform: rotate(45deg);
    }

    .btn i {
      margin-right: 10px;
    }

    .smenu {
      background: #333;
      overflow: hidden;
      transition: max-height 0.3s;
      max-height: 0;
    }

    .smenu a {
      display: block;
      padding: 16px 26px;
      color: white;
      font-size: 14px;
      margin: 4px 0;
      position: relative;
    }

    .smenu a::before {
      content: "";
      position: absolute;
      width: 6px;
      height: 100%;
      background: #3498db;
      left: 0;
      top: 0;
      transition: 0.3s;
      opacity: 0;
    }

    .smenu a:hover::before {
      opacity: 1;
    }

    .item:target .smenu {
      max-height: 10em;
    }
  </style>
</head>

<body>
  <div class="middle">
    <div class="menu">
      <li class="item" id="profile">
        <a href="#profile" class="btn">
          <i class="fa-solid fa-user"></i>Profile
        </a>
        <div class="smenu">
          <a href="">Posts</a>
          <a href="">Picture</a>
        </div>
      </li>

      <li class="item" id="messages">
        <a href="#messages" class="btn">
          <i class="fa-solid fa-envelope"></i>Messages
        </a>
        <div class="smenu">
          <a href="">new</a>
          <a href="">Sent</a>
          <a href="">Spam</a>
        </div>
      </li>

      <li class="item" id="settings">
        <a href="#settings" class="btn">
          <i class="fa-solid fa-gear"></i>Settings
        </a>
        <div class="smenu">
          <a href="">Password</a>
          <a href="">Language</a>
        </div>
      </li>

      <li class="item">
        <a href="" class="btn">
          <i class="fa-solid fa-right-from-bracket"></i>Logout
        </a>
      </li>
    </div>
  </div>
</body>

</html>

折叠侧边栏

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>折叠侧边栏</title>
  <script src="https://kit.fontawesome.com/d37465fc7c.js" crossorigin="anonymous"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    a {
      text-decoration: none;
    }

    li {
      list-style: none;
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f4f4f4;
    }

    .navbar {
      background-color: #3b5998;
      overflow: hidden;
      height: 63px;
    }

    .navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      font-size: 17px;
      padding: 14px 16px;
    }

    .navbar ul {
      margin: 8px 0 0 0;
    }

    .open-side i {
      padding-top: 18px;
    }

    .navbar a:hover {
      background-color: #ddd;
      color: #000;
    }

    .side-nav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      opacity: 0.8;
      overflow-x: hidden;
      padding-top: 60px;
      transition: 0.5s;
    }

    .side-nav a {
      padding: 10px 10px 10px 30px;
      font-size: 22px;
      color: #ccc;
      display: block;
      transition: .3s;
    }

    .side-nav a:hover {
      color: orange;
    }

    .side-nav .btn-close {
      position: absolute;
      top: 0;
      right: 22px;
      font-size: 36px;
    }

    #content {
      transition: margin-left .5s;
      padding: 20px;
    }

    @media(max-width:568px) {
      .navbar ul {
        display: none;
      }
    }

    /* @media(min-width:568px) {
      .open-side {
        display: none;
      }
    } */
  </style>
</head>

<body>
  <nav class="navbar">
    <span class="open-side">
      <a href="#" onclick="openSideMenu()">
        <i class="fa-solid fa-bars fa-2xl"></i>
      </a>
    </span>
    <ul class="navbar-nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>

  <div id="side-menu" class="side-nav">
    <a href="#" class="btn-close" onclick="closeSideMenu()">&times;</a>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Services</a>
    <a href="#">Contact</a>
  </div>

  <div id="content">
    <h1>你好，世界！</h1>
  </div>

  <script>
    xySideMenu = document.getElementById("side-menu");
    xyContent = document.getElementById("content");

    function openSideMenu() {
      xySideMenu.style.width = "250px";
      xyContent.style.marginLeft = "250px";
    }

    function closeSideMenu() {
      xySideMenu.style.width = "0";
      xyContent.style.marginLeft = "0";
    }
  </script>
</body>

</html>