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

炫酷菜单效果

代码

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;
      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>

折叠侧边栏

代码

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>
相关推荐
cuisidong199725 分钟前
5G学习笔记三之物理层、数据链路层、RRC层协议
笔记·学习·5g
南宫理的日知录33 分钟前
99、Python并发编程:多线程的问题、临界资源以及同步机制
开发语言·python·学习·编程学习
我要洋人死1 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人1 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人1 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR1 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香1 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596931 小时前
前端预览word、excel、ppt
前端·word·excel
数据与后端架构提升之路1 小时前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习
小华同学ai1 小时前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书