HTML+CSS | 可伸缩竖栏 | 咱就是说，后端的也来前端玩玩

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第1篇文章，点击查看活动详情

---

在这里浅浅尝试了一下，写了个可伸缩的竖栏。

不得不说，前端真的非常神奇。

效果展示

代码地址

代码中用到的图片来源

代码分析

下面就来浅浅分析一下所写的代码，大体上分为两个步骤：使用HTML添加要显示的元素和使用CSS更改完善样式。

1. 使用HTML添加要实现的元素

这个可伸缩竖栏我设计的需要显示6个图片和6个图片对应的含义，设计了一个大的划分，在这个大的划分中添加了6个链接，每一个链接中包含有图片和文字说明。

<div class="shell">
        <a href="#" class="box"><i class="iconfont icon-icon-test1"></i><span>用户</span></a>
        <a href="#" class="box"><i class="iconfont icon-icon-test3"></i><span>编辑</span></a>
        <a href="#" class="box"><i class="iconfont icon-icon-test"></i><span>消息</span></a>
        <a href="#" class="box"><i class="iconfont icon-icon-test6"></i><span>通知</span></a>
        <a href="#" class="box"><i class="iconfont icon-icon-test4"></i><span>分享</span></a>
        <a href="#" class="box"><i class="iconfont icon-icon-test5"></i><span>设置</span></a>
    </div>

这一步完成后是如图这个样子

2. 使用CSS更改完善样式

1. 对shell、box和i设置样式。

   在shell中：确定整个伸缩竖栏的大小、颜色以及对齐方式等等。

   在box中：设置每个链接的大小等等。

   在i中：设置图片的大小和位置。

   在span中：设置字体的大小和位置。

      .shell{
          width: 100px;
          height: 600px;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: rgb(107, 210, 233);
          border-radius: 10px;
          transition: .3s;
          overflow: hidden;
      }

      .box{
          display: block;
          height: 15%;
          width: 85%;
          margin: 9px;
          border-radius: 5px;
          position: relative;
          transition: .3s;
          color: rgb(255, 255, 255);
      }

      .box i{
          font-size: 60px;
          position: absolute;
          margin: 9px 0 0 11px;
      }
      
      .box span{
          position: relative;
          top: 22px;
          left: 100px;
          font: 500 20px '';
          opacity: 0;
          transition: .1s;
      }

1. 添加分割线：在第1个链接下方和第5链接下方添加一条白色的分隔线。

      .box:nth-child(1)::before,
      .box:nth-child(5)::before{
          content: '';
          display: block;
          width: 100%;
          height: 2px;
          background-color: #fff;
          position: absolute;
          bottom: -10px;
      }

1. 添加伸缩动态效果。

        .shell:hover{
            width: 210px;
        }

        .box:hover{
            background-color: rgb(162, 223, 244);
        }

        .shell:hover span{
            opacity: 1;
        }

        .box:hover{
            color: #fff;
        }