materialize 布局2 --- navbar

navbar

1 设置 navbar 对齐

1. class:
   <nav><div class="nav-wrapper"></div></nav>
class="brand-logo center" 设置logo 居中
   <ul class="right"> 设置 navbar links 居中
2. 使用方法：

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo center">Logo </a>
    <ul class="right">
        <li><a href="sass.html">Sass</a></li>
        <li><a href="badges.html">Components</a></li>
        <li><a href="collapsible.html">JavaScript</a></li>
    </ul>
  </div>
</nav>

2 Active Items

• 增加类active 到 li 标签表示当前页

1. class: class="active"
2. 使用方法：
   <li class="active"><a href="collapsible.html">JavaScript</a></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">Components</a></li>
        <li class="active"><a href="collapsible.html">JavaScript</a></li>
      </ul>
    </div>
  </nav>

3 Extended Navbar with Tabs

要实现增加拓展的组件到 navbar，需要增加 类 nav-extended 到外层的nav tag

1. class: nav-extended
2. 使用方法：

<nav class="nav-extended">
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
</div>
 <div class="nav-content">
      <ul class="tabs tabs-transparent">
        <li class="tab"><a href="#test1">Test 1</a></li>
        <li class="tab"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab disabled"><a href="#test3">Disabled Tab</a></li>
        <li class="tab"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
</nav>

4 Fixed Navbar

1. To make the navbar fixed , you have to add an outer wrapping div with the class navbar-fixed.
2. This will offset your other content while making your nav fixed.
3. You can adjust the height of this outer div to change how much offset is on your content.
4. class: navbar-fixed
5. 使用方法：

<div class="navbar-fixed">
    <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">Sass</a></li>
          <li><a href="badges.html">Components</a></li>
        </ul>
      </div>
    </nav>
  </div>

5 Navbar 下拉菜单（dropdown menu）

1. To add a navbar dropdown menu, add the ul dropdown structure into the page.
2. Add an element to trigger the dropdown menu
3. Make sure to supply the id of the dropdown structure to the data-target attribute of the dropdown trigger.

使用 ul 结构增加下拉菜单，li增加触发下拉菜单的元素，提供ul的id给触发下拉菜单的属性data-target

1. class: dropdown-content, dropdown-trigger
2. 使用方法：

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">one</a></li>
  <li><a href="#!">two</a></li>
  <li class="divider"></li>
  <li><a href="#!">three</a></li>
</ul>
<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">Sass</a></li>
      <li><a href="badges.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-trigger" href="#!" data-target="dropdown1">Dropdown<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

6 图标链接（Icon Links）

1. You can add icons into links
2. For icon only links you don't need any addtional class.
3. Just pop the i tag in and it will work.
4. For adding an icon to a text link you need to add either a left or right class to the icon depending on where you want the icon to be

1. 图标链接, 使用 i tag 生效:

< i class="material-icons">cloud </i>

2. 图标链接，添加class left or right 决定图标出现在文字的左边还是右边:

< i class="material-icons left">cloud </i>

<nav>
    <div class="nav-wrapper">
      <a href="#!" class="brand-logo"><i class="material-icons">cloud</i>Logo</a>
      <ul class="right ">
        <li><a href="sass.html"><i class="material-icons   right">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>

7 按钮（Button）

1. You can add buttons into links. For buttons you don't need any additional class. Just pop the btn class on the a tag
   添加button 链接，在a标签里使用类 btn
2. halfway-fab

  <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">Button</a></li>
        <li><a class="waves-effect waves-light btn">Button <i class="material-icons right">cloud</i></a></li>
        <li><a class="waves-effect waves-light btn-large">Large Button</a></li>
//half-way fab
<a class="btn-floating btn-large halfway-fab waves-effect waves-light teal">
        <i class="material-icons">add</i>
      </a>
      </ul>
    </div>
  </nav>

8 Search bar

You can add a search form in the navbar

 <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>

9 Mobile Collapse Button (折叠标记)

When your nav bar is resized you will see that the links on the right turn into a hamburger icon . Take a look at the example below to get this functionality Add the entire sidenav-trigger line to your nav
nav bar 重新设置尺寸时，导航栏的所有链接会变成一个汉堡包图标，实现方法是：将全部的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">Components</a></li>
        <li><a href="collapsible.html">Javascript</a></li>
        <li><a href="mobile.html">Mobile</a></li>
      </ul>
    </div>
  </nav>

  <ul class="sidenav" id="mobile-demo">
    <li><a href="sass.html">Sass</a></li>
    <li><a href="badges.html">Components</a></li>
    <li><a href="collapsible.html">Javascript</a></li>
    <li><a href="mobile.html">Mobile</a></li>
  </ul>