移动app的左右滑隐藏菜单

来源：互联网发布：电动螺丝刀知乎编辑：程序博客网时间：2024/06/07 04:57

最近在做app的时候碰到要使用左右滑动来显示或者隐藏菜单页面，这里做了一个简单的总结，具体的各种api网上很多。

干货如下：

<!DOCTYPE html><html><head lang="en">  <meta charset="UTF-8">  <meta content="width=device-width, initial-scale=1" name="viewport" />  <meta name="MobileOptimized" content="320">  <meta name="HandheldFriendly" content="True">  <meta name="apple-mobile-web-app-capable" content="yes">  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">  <title></title>  <link rel="stylesheet" href="assets/pages/css/home-1.css"/>  <style>    html,    body {      width: 100%;      height: 100%;    }    .slideout-menu {      position: fixed;      left: 0;      top: 0;      bottom: 0;      right: 0;      z-index: 0;      width: 256px;      overflow-y: scroll;      -webkit-overflow-scrolling: touch;      display: none;    }    .slideout-panel {      position:relative;      z-index: 1;      width:300px;      height: 500px;    }    .slideout-open,    .slideout-open body {      overflow: hidden;    }    .slideout-open .slideout-menu {      display: block;    }  </style></head><body>  <nav id="menu">    //菜单页面  </nav>  <main id="panel">    //主体页面  </main>  <script src="slideout.min.js"></script>

  <script>

   //滑动效果    var slideout = new Slideout({     'panel': document.getElementById('panel'),     'menu': document.getElementById('menu'),     'padding': 256,     'tolerance': 70    });   //点击效果   document.querySelector('#clicktt').addEventListener('click', function() {    slideout.toggle()   });

  </script>

</body></html>

0 0