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

来源：互联网发布：C语言下列叙述错误的是编辑：程序博客网时间：2024/06/08 10:48

效果

这里写图片描述

用的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.cssbody {  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.jslet 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)

阅读全文

0 0