侧边导航条 - Materialize

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

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

John Doe jdandturk@gmail.com
带有图标的第一个链接
第二个链接
子标题
带波纹效果的第三个链接



  <nav> <!-- 导航条内容  --> </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">jdandturk@gmail.com</span></a>
    </div></li>
    <li><a href="#!"><i class="material-icons">cloud</i>带有图标的第一个链接</a></li>
    <li><a href="#!">第二个链接</a></li>
    <li><div class="divider"></div></li>
    <li><a class="subheader">子标题</a></li>
    <li><a class="waves-effect" href="#!">带波纹效果的第三个链接</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);
  });

  // 初始化可折叠组件 (如果使用下拉变体，请取消对以下行的注释)
  // var collapsibleElem = document.querySelector('.collapsible');
  // var collapsibleInstance = M.Collapsible.init(collapsibleElem, options);

  // 或使用JQuery

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

名称	类型	默认	描述
edge	String	'left'	显示侧边导航条在屏幕哪一侧。
draggable	Boolean	true	允许滑动手势打开/关闭侧边导航条。
inDuration	Number	250	进入的过渡效果的时间长度（毫秒）。
outDuration	Number	200	退出的过渡效果的时间长度（毫秒）。
onOpenStart	Function	null	当侧边导航条开始进入时调用的函数。
onOpenEnd	Function	null	当侧边导航条完全进入时调用的函数
onCloseStart	Function	null	当侧边导航条开始退出时调用的函数。
onCloseEnd	Function	null	当侧边导航条完成退出时调用的函数。
preventScrolling	Boolean	true	在侧边导航条打开时阻止页面滚动。

因为jQuery不再是一个依赖项，所以所有的方法都是在插件实例上调用的。你可以通过如下方法获取插件实例。
  var instance = M.Sidenav.getInstance(elem);

  /* jQuery方法调用
    您仍然可以使用旧的jQuery插件方法调用。
    但您将无法访问实例属性。

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

.open();

打开侧边导航条。


instance.open();

.close();

关闭侧边导航条。


instance.close();

.destroy();

销毁插件实例并回收。


instance.destroy();

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

添加类 .sidenav-close到侧边导航条中的一个元素，并且该元素上的任何单击事件都将导致侧边导航条关闭。这在单击链接不会刷新的单页面应用中非常有用。


  <ul id="slide-out" class="sidenav">
      <li><a class="sidenav-close" href="#!">单击关闭侧边导航条</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="#!">第一个侧边导航条链接</a></li>
      <li><a href="#!">第二个侧边导航条链接</a></li>
      <li class="no-padding">
        <ul class="collapsible collapsible-accordion">
          <li>
            <a class="collapsible-header">下拉列表<i class="material-icons">arrow_drop_down</i></a>
            <div class="collapsible-body">
              <ul>
                <li><a href="#!">一</a></li>
                <li><a href="#!">二</a></li>
                <li><a href="#!">三</a></li>
                <li><a href="#!">四</a></li>
              </ul>
            </div>
          </li>
        </ul>
      </li>
    </ul>
    <ul class="right hide-on-med-and-down">
      <li><a href="#!">第一个侧边导航条链接</a></li>
      <li><a href="#!">第二个侧边导航条链接</a></li>
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">下拉列表<i class="material-icons right">arrow_drop_down</i></a></li>
      <ul id='dropdown1' class='dropdown-content'>
        <li><a href="#!">一</a></li>
        <li><a href="#!">二</a></li>
        <li><a href="#!">三</a></li>
        <li><a href="#!">四</a></li>
      </ul>
    </ul>
    <a href="#" data-target="slide-out" class="sidenav-trigger"><i class="material-icons">menu</i></a>

全屏HTML结构

如果你想全屏访问菜单你只要添加一个简单的助手类 show-on-large到 .sidenav-trigger上即可。


    <ul id="slide-out" class="sidenav">
      <li><a href="#!">第一个导航条链接</a></li>
      <li><a href="#!">第二个导航条链接</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="#!">第一个导航条链接</a></li>
      <li><a href="#!">第二个导航条链接</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;
      }
    }

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

初始化

选项

方法