css 左侧收缩 右侧自适应

网页界面设计中，左侧栏一般用来导航、展示内容概览等功能，而右侧则更多是用来展示详细内容、表单等功能。通过CSS编写，我们可以实现左侧导航栏的收缩功能，同时使右侧内容区域自适应宽度。

html,body{
      height: 100%;
}
.container{
      height: 100%;
      display: flex;
}
.sidebar{
      background-color: #333;
      color: #fff;
      width: 200px;
      height: 100%;
      transition: all .3s ease-in-out;
      overflow: hidden;
}
.sidebar.closed{
      width: 50px;
}
.main{
      background-color: #eee;
      flex-grow: 1;
      height: 100%;
      padding: 20px;
}
.toggle-button{
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
}
    

上面是CSS代码，我们通过设置.sidebar的宽度和使用transition动画来实现左侧导航栏的收缩和展开，同时将overflow属性设置为hidden，隐藏滚动条。当.sidebar元素有closed的类名时，宽度变为50px，实现收缩效果。使用.flex-grow：1的方式，让右侧主要内容区域自适应剩余宽度。

我们还可以为左侧导航栏添加宽度切换的按钮，实现更友好的交互。按钮的HTML代码如下：

div class="toggle-button">
      i class="fa fa-angle-double-left toggle-icon">
    /i>
    /div>
    

其中，fa fa-angle-double-left是Font Awesome图标库中的向左双箭头图标，是一个优秀的免费图标库，可以提高我们的图标设计效率。

最后，我们来看一下toggle-button按钮的JavaScript代码：

const toggleButton = document.querySelector('.toggle-button');
    const toggleIcon = document.querySelector('.toggle-icon');
    const sidebar = document.querySelector('.sidebar');
    toggleButton.addEventListener('click', () =>
 {
      sidebar.classList.toggle('closed');
      toggleIcon.classList.toggle('fa-angle-double-right');
}
    );
    

这里使用了ES6语法的箭头函数，规定了点击按钮时触发的事件，同时调用classList对象中的toggle方法，切换closed类名。同样，toggleIcon元素的类名也会随之切换，实现左右箭头图标的切换效果。

这样，我们就实现了左侧收缩，右侧自适应的网页布局效果。通过灵活运用CSS和JavaScript，我们可以打造优雅美观、交互友好的网页界面，为用户提供更好的体验。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！