menu

左对齐链接

使用左对齐导航链接，只要增加一个 left类到 <ul>标签里面。



  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo right">Logo</a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">组件</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

logo居中

Logo将在中屏幕和小屏幕上居中，但如果您希望Logo始终居中，请添加类 center到 <a class="brand-logo">中。 如果你使用这个，你必须确保链接不会重叠。



  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center">Logo</a>
      <ul id="nav-mobile" class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">组件</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

选项激活

增加active类到你的li标签中，如下： 



  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo center">Logo</a>
      <ul class="left hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">组件</a></li>
        <li class="active"><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

图标链接


你可以增加图标到链接中。对于图标链接你不需要额外的类，只要增加 i标签到链接里就可以。


  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo"><i class="material-icons">cloud</i>Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html"><i class="material-icons">search</i></a></li>
        <li><a href="badges.html"><i class="material-icons">view_module</i></a></li>
        <li><a href="collapsible.html"><i class="material-icons">refresh</i></a></li>
        <li><a href="mobile.html"><i class="material-icons">more_vert</i></a></li>
      </ul>
    </div>
  </nav>


要将图标添加到文本链接，您需要添加 left或 right类到图标，具体取决于您希望图标所在的位置。


  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html"><i class="material-icons left">search</i>链接带左图标</a></li>
        <li><a href="badges.html"><i class="material-icons right">view_module</i>链接带右图标</a></li>
      </ul>
    </div>
  </nav>

按钮


您可以在链接中添加按钮。对于按钮，您不需要任何额外的类。只需要把 .btn类添加到 a标签里面。


  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a class="waves-effect waves-light btn">按钮</a></li>
        <li><a class="waves-effect waves-light btn">按钮 <i class="material-icons right">cloud</i></a></li>
        <li><a class="waves-effect waves-light btn-large">大按钮</a></li>
      </ul>
    </div>
  </nav>

半浮动按钮在扩展导航条

增加一个半浮动按钮到你的扩展导航条组件




  <nav class="nav-extended">
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <ul class="right hide-on-med-and-down">
        <li><a>第一链接</a></li>
        <li><a>第二链接</a></li>
        <li><a>第三链接</a></li>
      </ul>
    </div>
    <div class="nav-content">
      <span class="nav-title">标题</span>
      <a class="btn-floating btn-large halfway-fab waves-effect waves-light teal">
        <i class="material-icons">add</i>
      </a>
    </div>
  </nav>

搜索条


你可以添加一个搜索表单到你的导航条里面。


  <nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label class="label-icon" for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
  </nav>

手机折叠按钮


当你拖动你的浏览器窗口缩小时，你会发现这些链接变成了一个汉堡图标 menu。带你看下面的例子了解这个功能。增加整个 sidenav-trigger行到你的 nav标签里面。


  <nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo">Logo</a>
      <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul class="right hide-on-med-and-down">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">组件</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">手机</a></li>
      </ul>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">组件</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">手机</a></li>
  </ul>

初始化

在将侧边导航触发器行包含到导航条中之后，您现在所要做的就是初始化插件。下面的这个例子假设您没有修改上面例子中的类。在这种情况下，只需更改下面一行中的选择器即可匹配它。


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

  // 或用JQuery

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