CSS实战--实现侧边栏滑进滑出

最新推荐文章于 2024-08-05 14:55:17 发布

刘翾

最新推荐文章于 2024-08-05 14:55:17 发布

阅读量1.1w

点赞数 1

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/c_kite/article/details/78765062

版权

CSS 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

效果

这里写图片描述

用的csdn做的例子, 本篇博客主要讲的是侧边栏滑进滑出, 背景是图片……, 不要在意.

代码

//index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>home</title>
  <script>
    var documentElement = document.documentElement; //获取html元素 
    documentElement.style.fontSize = documentElement.getBoundingClientRect().width / 16 + 'px'; //设置为视窗宽度的1/16
  </script>
  <link rel="stylesheet" type="text/css" href="./index.css">
</head>

<body>
  <!-- 网页主体容器 -->
  <div class="body">
    <!-- 左上角头像 -->
    <a href="javascript:void(0)" class="avatar-small"></a>
    <!-- 方便演示内容图片代替主页 -->
    <img class="main" src="./img/1.PNG">
  </div>
  <!-- 网页遮罩 -->
  <div class="mask"></div>
  <!-- 侧边栏 -->
  <div class="nav">
    <ul>
      <li>
        <a>
          <img src="./img/avatar.jpg" class="avatar-big" alt="">
        </a>
      </li>
      <li>
        <a>我的课程</a>
      </li>
      <li>
        <a>我的订单</a>
      </li>
      <li>
        <a>我的收藏</a>
      </li>
      <li>
        <a>个人中心</a>
      </li>
    </ul>
  </div>
  <script type="text/javascript" src="./index.js"></script>
</body>

</html>

//index.css
body {
  margin: 0;
}
ul, li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.avatar-small {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  width: 2rem;
  height: 2rem;
}
.main{
  width: 100vw;
  height: 100vh;
}

.mask {
  display: none;
  position: fixed;
  z-index: 10;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .1);
}

.nav {
  position: absolute;
  z-index: 11;
  left: -7rem;
  top: 0;
  width: 7rem;
  height: 100%;
  background: #555;
}
.nav {
  transition: left linear .1s;
}
.nav a {
  display: block;
  padding: 1em 0;
  border-bottom: 1px solid #888;
  font-size: 16px;
  color: #eee;
  text-align: center;
}
.nav .avatar-big {
  width: 3rem;
  border-radius: 50%;
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

//index.js
let btn = document.getElementsByClassName('avatar-small')[0],
    mask = document.getElementsByClassName('mask')[0],
    nav = document.getElementsByClassName('nav')[0];

btn.addEventListener('click', function () {
  mask.style.display = 'block';
  nav.style.left = 0;
}, false);

mask.addEventListener('click', function () {
  mask.style.display = 'none';
  nav.style.left = '-7rem';
}, false)