当前位置:主页 > JavsScript库 > 菜单 / 导航 >

移动设备的可滑动画布导航 - mobile-swipe-menu
栏目分类:菜单 / 导航   发布日期:2021-08-21   浏览次数:

移动优先的画布导航,使用户能够通过单击切换按钮或滑动屏幕来显示和隐藏侧边菜单。

使用:

1. 安装并下载手机刷卡菜单。

# NPM
$ npm i mobile-swipe-menu --save

2. 为画布外导航菜单编写 HTML 代码。

<div id="menu">
  <div id="closeMenu">关闭菜单</div>
  <div class="wrapper">
    <ul>
      <li><a href="javascript:void(0)">项目 1</a></li>
      <li><a href="javascript:void(0)">项目 2</a></li>
      <li><a href="javascript:void(0)">项目 3</a></li>
      ...
    </ul>
  </div>
</div>

3. 画布外导航菜单的基本 CSS。

#menu {
  background-color: #ccc;
}
  
#menu > div:not(.wrapper) {
  background-color: #eee;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
  
.wrapper {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

4. 加载mobile-swipe-menu.js文档中的主要 JavaScript 。

<script src="js/mobile-swipe-menu.js"></script>

5. 初始化移动滑动菜单并完成。

var mobileMenu = new mobileSwipeMenu('#menu', {
    // options here
});

6. 确定画布外导航的宽度。

var mobileMenu = new mobileSwipeMenu('#menu', {
    width: 300
});

7. 确定滑动手柄的宽度。默认值:30。

var mobileMenu = new mobileSwipeMenu('#menu', {
    hookWidth: 15
});

8. 使画布外导航从左侧滑出而不是从右侧滑出。

var mobileMenu = new mobileSwipeMenu('#menu', {
    mode: 'left'
});

9. 事件处理程序。

var mobileMenu = new mobileSwipeMenu('#menu', {
    events: {
      opening: function () {
        console.log(this, 'Opened');
      },
      closing: function () {
        console.log(this, 'Closed');
      },
      drag: function (swipe) {
        console.log(this, swipe);
      }
    }
});

10. API 方法。

mobileMenu.open();
mobileMenu.close();
mobileMenu.toggle();


官方网站:https://github.com/milkamil93/mobile-swipe-menu

相关热词: mobile-swipe移动导航

相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库