[分享]css3左侧边栏

CSS3是Web前端开发中非常重要的一项技术，其中左侧边栏的实现也是日常开发中经常需要的。下面我们来详细了解一下CSS3左侧边栏的实现方法。/CSS样式代码如下/ .sidebar{ width: 2...

CSS3是Web前端开发中非常重要的一项技术，其中左侧边栏的实现也是日常开发中经常需要的。下面我们来详细了解一下CSS3左侧边栏的实现方法。

/*CSS样式代码如下*/
.sidebar{
    width: 200px;
    height: 100%;
    background-color: #222222; /*背景颜色*/
    position: fixed;
    top: 0;
    left: -200px; /*初始位置左侧隐藏*/
    z-index: 999; /*层级*/
    transition: all 0.3s ease; /*过度动画*/
  }

  .sidebar.show{
    left: 0; /*通过添加show类来显示侧栏*/
  }

  .sidebar ul{
    list-style: none; /*去掉列表标记*/
    padding: 0;
    margin: 0;
  }

  .sidebar li{
    padding: 10px;
    font-size: 18px;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255, 0.1);
  }

  /*鼠标悬停样式*/
  .sidebar li:hover{
    background-color: rgba(0,0,0, 0.1);
    cursor: pointer;
  }

  /*响应式样式*/
  @media screen and (max-width: 768px){
    .sidebar{
      left: -200px; /*默认隐藏*/
    }

    .sidebar.show{
      left: 0; /*通过添加show类来显示侧栏*/
    }
  } 

首先，我们定义一个类名为sidebar的样式，并设置宽度为200px，设置背景颜色为#222222，设置position为fixed，固定在页面左侧，设置top为0，和left为负的200px，这样可以让侧栏初始状态下在页面左侧隐藏。

然后我们通过添加类名.show来显示侧栏，left的值设置为0，即让侧栏显示在屏幕中。

接着我们设置了一个ul列表，并去除了标记样式，然后给li标签设定颜色、字体大小和上边框。

最后我们设置了鼠标悬浮时的样式以及响应式布局，当屏幕小于等于768px时，侧栏会隐藏。

使用上述CSS样式，我们就可以轻松实现CSS3左侧边栏的效果。