侧边导航 - Materialize 中文

这是一个滑动菜单。您可以使用我们的可折叠组件向侧边栏添加一个下拉菜单。如果您想看一个演示，我们的侧边栏将在较小的屏幕上使用它。要将其与全屏导航结合使用，您必须使用同一 UL 的两个副本。

请注意，侧边导航 HTML 不应包含在导航栏 HTML 中。

John Doe [email protected]
带图标的第一个链接
第二个链接
子标题
带波浪的第三个链接



  <nav> <!-- navbar content here  --> </nav>

  <ul id="slide-out" class="sidenav">
    <li><div class="user-view">
      <div class="background">
        <img src="images/office.jpg">
      </div>
      <a href="#user"><img class="circle" src="images/yuna.jpg"></a>
      <a href="#name"><span class="white-text name">John Doe</span></a>
      <a href="#email"><span class="white-text email">[email protected]</span></a>
    </div></li>
    <li><a href="#!"><i class="material-icons">cloud</i>First Link With Icon</a></li>
    <li><a href="#!">Second Link</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">Subheader</a></li>
    <li><a class="waves-effect" href="#!">Third Link With Waves</a></li>
  </ul>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>


  document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.sidenav');
    var instances = M.Sidenav.init(elems, options);
  });

  // Initialize collapsible (uncomment the lines below if you use the dropdown variation)
  // var collapsibleElem = document.querySelector('.collapsible');
  // var collapsibleInstance = M.Collapsible.init(collapsibleElem, options);

  // Or with jQuery

  $(document).ready(function(){
    $('.sidenav').sidenav();
  });

名称	类型	默认值	描述
edge	字符串	'left'	侧边导航出现的屏幕侧边。
draggable	布尔值	true	允许滑动操作打开/关闭侧边导航。
inDuration	数字	250	进入过渡的持续时间（毫秒）。
outDuration	数字	200	退出过渡的持续时间（毫秒）。
onOpenStart	函数	null	侧边导航开始进入时调用的函数。
onOpenEnd	函数	null	侧边导航完成进入时调用的函数。
onCloseStart	函数	null	侧边导航开始退出时调用的函数。
onCloseEnd	函数	null	侧边导航完成退出时调用的函数。
preventScrolling	布尔值	true	防止侧边导航打开时页面滚动。

由于 jQuery 不再是依赖项，因此所有方法都在插件实例上调用。您可以这样获取插件实例


  var instance = M.Sidenav.getInstance(elem);

  /* jQuery Method Calls
    You can still use the old jQuery plugin method calls.
    But you won't be able to access instance properties.

    $('.sidenav').sidenav('methodName');
    $('.sidenav').sidenav('methodName', paramName);
  */

.open();

打开侧边导航。


instance.open();

.close();

关闭侧边导航。


instance.close();

.destroy();

销毁插件实例并拆除


instance.destroy();

名称	类型	描述
el	元素	插件初始化时使用的 DOM 元素。
options	对象	实例初始化时使用的选项。
isOpen	布尔值	描述侧边导航的打开/关闭状态。
isFixed	布尔值	描述侧边导航是否固定。
isDragged	布尔值	描述侧边导航是否正在拖动。

将类 .sidenav-close 添加到侧边导航内的元素，对该元素的任何点击事件都会导致侧边导航关闭。这在单页应用中很有用，因为页面不会在链接点击时刷新。


  <ul id="slide-out" class="sidenav">
      <li><a class="sidenav-close" href="#!">Clicking this will close Sidenav</a></li>
  </ul>
  <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

以下是一些有用的变体和可以添加到侧边栏的附加元素。

下拉 HTML 结构

向侧边栏添加可折叠菜单。


    <ul id="slide-out" class="sidenav">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header">Dropdown<i class="material-icons">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>
    <ul class="right hide-on-med-and-down">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
      <ul id='dropdown1' class='dropdown-content'>
        <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>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

全屏 HTML 结构

如果您希望菜单在所有屏幕尺寸上都可以访问，只需向 .sidenav-trigger 添加一个简单的帮助程序类 show-on-large 即可。


    <ul id="slide-out" class="sidenav">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger show-on-large"><i class="material-icons">menu</i></a>

固定 HTML 结构

添加类 sidenav-fixed 以使侧边导航固定并在大型屏幕上打开，并在较小屏幕上隐藏常规功能。我们左侧的侧边导航就是一个例子。


    <ul id="slide-out" class="sidenav sidenav-fixed">
      <li><a href="#!">First Sidebar Link</a></li>
      <li><a href="#!">Second Sidebar Link</a></li>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

如果您计划使用此功能，则必须通过侧边菜单的宽度来偏移您的内容。将填充放置在偏移内容所在的位置，在我们的示例中，它位于页眉、主体和页脚中。


    header, main, footer {
      padding-left: 300px;
    }

    @media only screen and (max-width : 992px) {
      header, main, footer {
        padding-left: 0;
      }
    }

结构
初始化
选项
方法
属性
关闭触发器
变体

初始化

选项

方法