左侧可伸缩式侧边导航栏，通过按钮_左侧可伸展导航栏

作者：Guff_9hys | 2024-07-01 20:50:35

踩

左侧可伸展导航栏

<!DOCTYPE html>
<html lang="zh">
<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>Document</title>
   <style>
       .sidebar {
       width: 200px;
       height: 100vh;
       background-color: #f1f1f1;
       overflow: hidden;
       transition: width 0.3s;
       }

       .menu {
       list-style-type: none;
       padding: 0;
       }

       .menu li {
       padding: 10px;
       }

       .toggle-button {
       padding: 10px;
       margin: 10px;
       }

       .collapsed {
       width: 80px;
       }
   </style>
</head>
<body>
   <div class="sidebar">
   <button class="toggle-button" οnclick="toggleSidebar()">Toggle</button>
   <ul class="menu">
   <li>首页</li>
   <li>我们的实力</li>
   <li>新闻中心</li>
   </ul>
   </div>
</body>
<script>
   function toggleSidebar() {
   const sidebar = document.querySelector('.sidebar');
   sidebar.classList.toggle('collapsed');
   }
</script>
</html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Guff_9hys/article/detail/777639