Materialize.css 向右滑动打开菜单答案

【问题标题】：Materialize.css Swipe right to open menuMaterialize.css 向右滑动打开菜单
【发布时间】：2015-08-17 18:49:00
【问题描述】：

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

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

【问题讨论】：

标签： meteor swipe material-design materialize

【解决方案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 开发者工具中启用模拟，重新加载页面，然后从边缘滑入即可。

【讨论】：