如何在右侧而不是左侧打开 Materialise SideNav？答案

【问题标题】：How do I open a Materialize SideNav on the right, instead of the left?如何在右侧而不是左侧打开 Materialise SideNav？
【发布时间】：2016-09-09 12:18:35
【问题描述】：

我正在使用 Materialize 设计框架，但我想从右侧打开 SideNav。我对 Materialise 了解不多。现在我的 SideNav 从左侧打开，但我想从右侧打开 SideNav。

$('.button-collapse').sideNav({
      menuWidth: 300, // Default is 240
      closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
    }
  );
  $('.collapsible').collapsible();

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>         
<nav>
  <ul class="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 fixed">
      <li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
      <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
            <div class="collapsible-body">
              <ul>
                <li><a href="#!">First</a></li>
                <li><a href="#!">Second</a></li>
                <li><a href="#!">Third</a></li>
                <li><a href="#!">Fourth</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</nav>

【问题讨论】：

标签： javascript html css material-design materialize

【解决方案1】：

尝试像这样在'.button-collapse'.sideNav(...) 上使用edge: 'right'：

$('.button-collapse').sideNav({
      menuWidth: 300,
      closeOnClick: true,
      edge: 'right', // <--- CHECK THIS OUT
    }
  );
  $('.collapsible').collapsible();

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>           
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.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 fixed">
      <li class="bold"><a href="#!" class="waves-effect waves-teal">First Sidebar Link</a></li>
      <li class="bold"><a href="#!" class="">Second Sidebar Link</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header waves-effect waves-teal">Dropdown<i class="mdi-navigation-arrow-drop-down"></i></a>
            <div class="collapsible-body">
              <ul>
                <li><a href="#!">First</a></li>
                <li><a href="#!">Second</a></li>
                <li><a href="#!">Third</a></li>
                <li><a href="#!">Fourth</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>
  <a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</nav>

【讨论】：

谢谢节省我的时间。投票支持这个问题对其他人有帮助。

【解决方案2】：

如果您将 Angular 与物化一起使用，请确保您有：

    $('.button-collapse').sideNav({
      menuWidth: 300,
      closeOnClick: true,
      edge: 'right', // <--- CHECK THIS OUT
    }
  );
  $('.collapsible').collapsible();

从控制器中的函数调用。我的看起来像这样：

    home.parallax = function() {
  $('.parallax').parallax()
}

home.sideNav = function() {
  $('.button-collapse').sideNav({
    menuWidth     : 300,
    edge          : 'right',
    closeOnClick  : true,
    draggable     : true
  });
}

我认为现在不得不这么说是很愚蠢的，但我让自己发疯了，试图从 init.js 文件中修改 edge 和 menuWidth 之类的东西，我认为文档告诉我我需要 sideNav 才能工作。

希望对像我一样将边缘设置为“右侧”的每个人都有帮助，但在经过几次良好的硬重置后，却一次又一次地在左侧看到它。

【讨论】：