可伸缩式侧边栏

李浩东@

已于 2023-09-18 08:48:27 修改

阅读量159

点赞数 1

文章标签： css css3 html

于 2023-09-18 08:48:13 首次发布

本文链接：https://blog.csdn.net/m0_64180190/article/details/132962908

版权

这篇博客介绍了一种使用CSS实现可伸缩侧边栏的方法，通过设置CSS样式，实现侧边栏在点击按钮时平滑地展开和收起。侧边栏包含导航链接，使用了transform属性进行过渡效果，同时提供了相应的JavaScript代码来处理点击事件，切换侧边栏的状态。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<style>
   .container {
   display: flex;
   }

   .sidebar {
   width: 200px;
   height: 100%;
   background-color: #f1f1f1;
   position: fixed;
   left: 0;
   top: 0;
   transition: transform 0.3s ease-in-out;
   z-index: 100;
   }

   .sidebar.open {
   transform: translateX(0);
   }

   .sidebar.closed {
   transform: translateX(-200px);
   }

   ul {
   list-style-type: none;
   padding: 0;
   }

   li a {
   display: block;
   padding: 10px 20px;
   text-decoration: none;
   color: #333;
   transition: back