介绍

这是一个滑动菜单。你可以增加一个下拉列表到你的侧边导航条通过使用可折叠组件。如果你想看一个示例。我们的侧边导航用于小屏幕。为了结合全屏导航，你需要拷贝两份UL代码。

侧边导航示例

• 

  张三 jdandturk@sina.com
• cloud带图标的第一链接
• 第二链接
• 子标题
• 带波纹效果的第三链接

HTML 结构

  <ul id="slide-out" class="side-nav">
    <li><div class="userView">
      <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">张三</span></a>
      <a href="#!email"><span class="white-text email">jdandturk@sina.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-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
        

jQuery 插件初始化

  // Initialize collapse button
  $(".button-collapse").sideNav();
  // Initialize collapsible (uncomment the line below if you use the dropdown variation)
  //$('.collapsible').collapsible();
        

选项

你可以定制侧边导航通过设置你自己的宽度和菜单的对齐方式。

  $('.button-collapse').sideNav({
      menuWidth: 300, // Default is 240
      edge: 'right', // Choose the horizontal origin
      closeOnClick: true, // Closes side-nav on <a> clicks, useful for Angular/Meteor
      draggable: true // Choose whether you can drag to open on touch screens
    }
  );
        

jQuery插件方法

我们有方法使侧边导航显示和隐藏，你可以通过你的程序开控制侧边导航。

  // Show sideNav
  $('.button-collapse').sideNav('show');
  // Hide sideNav
  $('.button-collapse').sideNav('hide');
  // Destroy sideNav
  $('.button-collapse').sideNav('destroy');
        

变量

这里有一些有用的变量和附加的元素，你可以添加到你的侧边栏。

下拉列表 HTML 结构

增加一个可折叠的菜单到你的导航条。

    <ul id="slide-out" class="side-nav">
      <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-button" href="#!" data-activates="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-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
          

全屏 HTML 结构

如果你想这个菜单占用屏幕的大小，你可以增加一个简单的帮助类show-on-large到这个.button-collapse类里面。

    <ul id="slide-out" class="side-nav">
      <li><a href="#!">第一导航链接</a></li>
      <li><a href="#!">第二导航链接</a></li>
    </ul>
    <a href="#" data-activates="slide-out" class="button-collapse show-on-large"><i class="material-icons">menu</i></a>
          

固定 HTML 结构

增加类fixed使侧边导航固定并且打开在大屏幕和隐藏在小屏幕。我们的导航在左边就像这个例子。

    <ul id="slide-out" class="side-nav fixed">
      <li><a href="#!">第一导航链接</a></li>
      <li><a href="#!">第二导航链接</a></li>
    </ul>
    <a href="#" data-activates="slide-out" class="button-collapse"><i class="material-icons">menu</i></a>
          

如果你计划使用这个，你将不得不对你的内容使用一个侧边导航菜单的宽度的偏移量。将偏移量放在header、main、footer中。

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

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