顶部导航条



链接左对齐

在导航链接<ul>上使用left使其左对齐。



  <nav>
    <div class="nav-wrapper">
    <a href="#" class="brand-logo right">Logo</a>
    <ul id="nav-mobile" class="hide-on-med-and-down">
      <li><a href="badges">标签</a></li>
      <li><a href="buttons">按钮</a></li>
      <li><a href="footer">页脚</a></li>
    </ul>
    </div>
  </nav>
        

logo居中

在medium及以下屏幕尺寸下logo会自动居中,如果你想一直让logo居中,在<a class="brand-logo">上添加center。 之后你要保证导航链接不会过长而与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="badges">标签</a></li>
      <li><a href="buttons">按钮</a></li>
      <li><a href="footer">页脚</a></li>
    </ul>
    </div>
  </nav>
        

选中状态

在li标签上使用active标签表示在当前页。



  <div>
    <nav>
    <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="badges">标签</a></li>
      <li><a href="buttons">按钮</a></li>
      <li class="active"><a href="footer">页脚</a></li>
    </ul>
    </div>
    </nav>
  </div>
        

图标链接


只需要添加一个i标签就能使其转化为图片链接。


  <nav>
    <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="javascript:;"><i class="mdi-action-search"></i></a></li>
      <li><a href="javascript:;"><i class="mdi-action-view-module"></i></a></li>
      <li><a href="javascript:;"><i class="mdi-navigation-refresh"></i></a></li>
      <li><a href="javascript:;"><i class="mdi-navigation-more-vert"></i></a></li>
    </ul>
    </div>
  </nav>


图标相对于文字的位置取决于你在i标签上使用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="javascript:;"><i class="mdi-action-search left"></i>Link with Left Icon</a></li>
      <li><a href="javascript:;"><i class="mdi-action-view-module right"></i>Link with Right Icon</a></li>
    </ul>
    </div>
  </nav>
        

手机端缩合


nav上使用button-collapse,当你浏览器的尺寸变小时,导航链接将会缩合到一个 的图标中。


  <nav>
    <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
    <ul class="right hide-on-med-and-down">
      <li><a href="badges">标签</a></li>
      <li><a href="buttons">按钮</a></li>
      <li><a href="footer">页脚</a></li>
      <li><a href="mobile">手机</a></li>
    </ul>
    <ul class="side-nav" id="mobile-demo">
      <li><a href="badges">标签</a></li>
      <li><a href="buttons">按钮</a></li>
      <li><a href="footer">页脚</a></li>
      <li><a href="mobile">手机</a></li>
    </ul>
    </div>
  </nav>
        

初始化

添加过缩合class后,需要使用一段js代码来初始化它。


  $(".button-collapse").sideNav();