Materialize.css 向右滑动打开菜单

Question

我知道 Materialize.css 可以选择向左滑动以关闭打开的侧边菜单，但是否可以像大多数 android 手机那样通过向右滑动打开菜单。

我有一个 meteor.js 应用程序的 android 实现，想知道是否提供开箱即用的功能。

Answer 1

是的，有可能吧out of the box:

// Initialize collapse button
$(".button-collapse").sideNav();

Demo in Plunker

堆栈片段中的演示

$(".button-collapse").sideNav();

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.js"></script>

<nav>
  <ul class="right hide-on-med-and-down">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
  </ul>
  <ul id="slide-out" class="side-nav">
    <li><a href="#!">First Sidebar Link</a></li>
    <li><a href="#!">Second Sidebar Link</a></li>
  </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</nav>

要进行测试，只需在 chrome 开发人员工具中启用模拟，重新加载页面，然后从边缘向内轻扫。

Materialize.css 向右滑动打开菜单

Materialize.css Swipe right to open menu

meteor

swipe

material-design

materialize

Demo in Plunker

堆栈片段中的演示