移动端自定义侧滑菜单（滑动）

滑动效果，第一时间能想的是transition，transform。话不多说，上代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>移动端自定义侧滑菜单（滑动）</title> <style> * { margin: 0; padding: 0; } .page { height: 100%; } .page-bottom { height: 100%; 100%; position: fixed; background-color: rgb(0, 68, 97); z-index: 0; } .wc { color: white; padding-left: 20px; } .wc div { line-height: 60px; border-bottom: 1px solid white; } .page-content { padding-top: 100px; } .page-top { height: 100%; position: fixed; 100%; background-color: rgb(57, 125, 230); z-index: 0; transition: All 0.4s linear; } .page-top img { position: absolute; 35px; left: 20px; top: 20px; z-index: 111; } </style> </head> <body> <div class="page"> <div class="page-bottom"> <div class="page-content"> <div class="wc"> <div>item1</div> </div> <div class="wc"> <div>item2</div> </div> <div class="wc"> <div>item3</div> </div> <div class="wc"> <div>item4</div> </div> </div> </div> <div id="move" class="page-top draggable"> <img id="btn" src="http://jellyzx.gitee.io/blog/sideslip/images/7qmY.png" /> </div> </div> <script> window.onload = function () { var open = false; // 展开状态 var elBtn = document.getElementById('btn'); var moveEl = document.getElementById('move'); var width = document.documentElement.offsetWidth || document.body.clientWidth; var openWidth = width * 0.8; elBtn.onclick = function (e) { console.log({ e, open, elBtn, moveEl, width, openWidth }); e.stopPropagation(); if (open) { moveEl.style.cssText = "transform: translate3d(0px,0,0);" } else { moveEl.style.cssText = "transform: translate3d(" + openWidth + "px,0px,0px);" } open = !open; } } </script> </body> </html>

css 部分代码

* {
  margin: 0;
  padding: 0;
}

.page {
  height: 100%;
}

.page-bottom {
  height: 100%;
  width: 100%;
  position: fixed;
  background-color: rgb(0, 68, 97);
  z-index: 0;
}

.wc {
  color: white;
  /* padding: 30px 0 30px 40px; */
  padding-left: 20px;


}

.wc div {
  line-height: 60px;
  border-bottom: 1px solid white;
}

.page-content {
  padding-top: 100px;
}

.page-top {
  height: 100%;
  position: fixed;
  width: 100%;
  background-color: rgb(57, 125, 230);
  z-index: 0;
  /* transition: All 0.1s linear; */
}

.page-top img {
  position: absolute;
  width: 35px;
  /* height: 38px; */
  left: 20px;
  top: 20px;
  z-index: 111;
}

#btn {
  transition: all 0.4s linear;
  transform: rotate(0deg);
}

html部分代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>移动端自定义侧滑菜单（滑动）</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>

  <div class="page">
    <div class="page-bottom">
      <div class="page-content">
        <div class="wc">
          <div>item1</div>
        </div>
        <div class="wc">
          <div>item2</div>
        </div>
        <div class="wc">
          <div>item3</div>
        </div>
        <div class="wc">
          <div>item4</div>
        </div>
      </div>
    </div>
    <div id="move" class="page-top draggable">
      <img id="btn" src="images/7qmY.png" />
    </div>
  </div>
  <script src="js/index.js"></script>
</body>

</html>

js部分代码

(function () {
  var mark = 0; // 拖动起点 
  var newMark = 0; // 拖动终点
  var open = false; // 展开状态
  var el = document.getElementById('move');
  var elBtn = document.getElementById('btn');
  var width = document.body.clientWidth;
  var changeWidth = width * 0.2;

  elBtn.onclick = function (e) {
    e.stopPropagation();
    if (open) {
      el.style.cssText = "transition: All 0.4s linear; transform: translate3d(0px,0,0);"
    } else {
      el.style.cssText = "transition: All 0.4s linear; transform: translate3d(300px,0,0);"
    }
    open = !open;
  }

  function touchmove(e) {
    newMark = e.touches[0].pageX
    var moveX = Math.ceil(newMark - mark);

    if (open) {
      if (moveX > 0) {
        return
      }
      moveX += 300
    }
    if (moveX > 0) {
      el.style.cssText = "transform: translate3d(" + moveX + "px,0,0);"
    }
  }

  function touchstart(e) {
    mark = newMark = e.touches[0].pageX;
  }

  function touchend(e) {
    if (!e.target.classList.contains("draggable")) {
      return;
    }
    var moveX = Math.abs(newMark - mark);
    if (open) { // 已打开
      if (moveX > changeWidth) {
        el.style.cssText = "transition: All 0.2s linear; transform: translate3d(0px,0,0);"
        open = !open
      } else {
        el.style.cssText = "transition: All 0.2s linear; transform: translate3d(300px,0,0);"
      }
    } else {
      if (moveX > changeWidth) {
        el.style.cssText = "transition: All 0.2s linear; transform: translate3d(300px,0,0);"
        open = !open
      } else {
        el.style.cssText = "transition: All 0.2s linear; transform: translate3d(0px,0,0);"
      }
    }
    mark = 0
    newMark = 0
  }

  el.addEventListener('touchmove', touchmove, false);
  el.addEventListener('touchstart', touchstart, false);
  el.addEventListener('touchend', touchend, false);
}())

效果预览滑动部分，请将浏览器手机调试模式打开预览