纯css实现隐藏侧边栏菜单

可以通过使用CSS的transform属性来实现隐藏侧边栏菜单，具体步骤如下：

1. 首先，在HTML中创建一个包含侧边栏和主内容的容器。

2. 接下来，使用CSS设置侧边栏的样式，并将其定位到左侧，例如：

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

3. 然后，使用CSS设置主内容的样式，并将其定位到右侧，例如：

   .main-content {
       margin-left: 200px;
       transition: margin-left 0.3s ease-in-out;
   }

4. 最后，使用JavaScript来控制侧边栏的显示和隐藏，例如：

   const sidebar = document.querySelector('.sidebar');
   const mainContent = document.querySelector('.main-content');
   const toggleButton = document.querySelector('.toggle-button');

   toggleButton.addEventListener('click', () => {
       sidebar.classList.toggle('active');
       mainContent.classList.toggle('active');
   });

这里我们通过给侧边栏和主内容容器添加active类来实现显示和隐藏的效果，同时通过CSS的transform属性来实现平滑的动画过渡。