slide-and-swipe-menu是一款支持移动手机滑动触摸的隐藏侧边栏菜单jQuery插件。该侧边栏菜单基于touchSwipe插件,可以通过按钮来触发打开侧边栏菜单,并通过滑动触摸来关闭菜单。
安装
可以通过bower或nmp来安装该侧边栏菜单插件。
bower install slide-and-swipe-menu --save npm install slide-and-swipe-menu --save
使用方法
使用该侧边栏菜单插件需要引入jQuery,jquery.touchSwipe.min.js和jquery.slideandswipe.js文件。
<script src="jquery/1.8.2/jquery.min.js"></script> <!-- touchSwipe library --> <script src="http://labs.rampinteractive.co.uk/touchSwipe/jquery.touchSwipe.min.js"></script> <!-- Sliding swipe menu javascript file --> <script src="js/jquery.slideandswipe.js"></script>
或者直接使用Browserify:
require('slideAndSwipe');
HTML结构
下面是该侧边栏布局的基本HTML结构,侧边栏菜单放在<nav>
元素中。
<body> <nav> [...] </nav> <main> [...] <a class="ssm-open-nav" href="#" title="Open / close">Open / close</a> </main> <div class="ssm-overlay"></div> </body>
CSS样式
需要为该侧边栏布局添加一些基本的CSS样式:
/* 侧边栏菜单样式 */ nav { height: 100%; width: 280px; background-color: #0a4a3c; left: 0; top: 0; z-index: 2; position: fixed; overflow-y: auto; overflow-x: visible; transform: translate(-280px,0); } /* 遮罩层样式 */ .ssm-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.2); display: none; z-index: 1; }
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该侧边栏菜单插件。
<script> $(document).ready(function() { $('nav').slideAndSwipe(); }); </script>
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!