导航条

优质

小牛编辑

131浏览

2023-12-01

导航条使用的事 HTML5 的 nav 标签，里面推荐使用 div 容器，导航条有两个主要的部分。一个是 logo 或品牌链接和导航链接。你可以设置这些链接的对齐方式。

右对齐链接

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

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

左对齐链接

使用左对齐导航链接，只要增加一个 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="http://www.materializecss.cn/sass.html">Sass</a></li>
  <li><a href="http://www.materializecss.cn/badges.html">组件</a></li>
  <li><a href="http://www.materializecss.cn/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="http://www.materializecss.cn/sass.html">Sass</a></li>
  <li><a href="http://www.materializecss.cn/badges.html">组件</a></li>
  <li><a href="http://www.materializecss.cn/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="http://www.materializecss.cn/sass.html">Sass</a></li>
  <li><a href="http://www.materializecss.cn/badges.html">组件</a></li>
  <li class="active"><a href="http://www.materializecss.cn/collapsible.html">JavaScript</a></li>
</ul>
    </div>
  </nav>

扩展导航条的标签

扩展导航条组件，增加类 extended-nav 到 nav 标签中。导航条的高度将会是可变的。然后你可以增加其他标签组件到 nav-wrapper 里面。

<nav class="nav-extended">
    <div class="nav-wrapper">
<a href="#" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
  <li><a href="http://www.materializecss.cn/sass.html">Sass</a></li>
  <li><a href="http://www.materializecss.cn/badges.html">组件</a></li>
  <li><a href="http://www.materializecss.cn/collapsible.html">JavaScript</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
  <li><a href="http://www.materializecss.cn/sass.html">Sass</a></li>
  <li><a href="http://www.materializecss.cn/badges.html">组件</a></li>
  <li><a href="http://www.materializecss.cn/collapsible.html">JavaScript</a></li>
</ul>
    </div>
    <div class="nav-content">
<ul class="tabs tabs-transparent">
  <li class="tab"><a href="#test1">测试 1</a></li>
  <li class="tab"><a class="active" href="#test2">测试 2</a></li>
  <li class="tab disabled"><a href="#test3">禁用标签</a></li>
  <li class="tab"><a href="#test4">测试 4</a></li>
</ul>
    </div>
  </nav>
  <div id="test1" class="col s12">测试 1</div>
  <div id="test2" class="col s12">测试 2</div>
  <div id="test3" class="col s12">测试 3</div>
  <div id="test4" class="col s12">测试 4</div>

固定导航条

为了使导航条固定，你必须在外围div中增加一个 navbar-fixed 类。这将会遮挡一定高度的内容，你可以通过增加相同高度的div抵消导航条占用的高度。

<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="http://www.materializecss.cn/sass.html">Sass</a></li>
    <li><a href="http://www.materializecss.cn/badges.html">组件</a></li>
  </ul>
</div>
    </nav>
  </div>

导航条中的下拉菜单

在导航条中增加下拉菜单，增加 ul 下拉结构到页面。然后，增加一个元素触发下拉菜单。确定下拉结构中的id与触发按钮的 data-activates 属性一致。

<!-- Dropdown Structure -->
<ul id="dropdown1" class="dropdown-content">
  <li><a href="#!">一</a></li>
  <li><a href="#!">二</a></li>
  <li class="divider"></li>
  <li><a href="#!">三</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="http://www.materializecss.cn/sass.html">Sass</a></li>
<li><a href="http://www.materializecss.cn/badges.html">组件</a></li>
<!-- Dropdown Trigger -->
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">下拉<i class="material-icons right">arrow_drop_down</i></a></li>
    </ul>
  </div>
</nav>

触发下拉菜单，增加这一行代码到你的 js 文件中，饱汉子 $( document ).ready(function) 代码块中。

$(".dropdown-button").dropdown();

单击触发下拉菜单

默认下拉菜单是悬浮触发，如果要单击触发，通过 { hover: false } 到上面 dropdown() 函数。

图标链接

你可以增加图标到链接中。对于图标链接你不需要额外的类，只要增加 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="http://www.materializecss.cn/sass.html"><i class="material-icons">search</i></a></li>
  <li><a href="http://www.materializecss.cn/badges.html"><i class="material-icons">view_module</i></a></li>
  <li><a href="http://www.materializecss.cn/collapsible.html"><i class="material-icons">refresh</i></a></li>
  <li><a href="http://www.materializecss.cn/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="http://www.materializecss.cn/sass.html"><i class="material-icons left">search</i>链接带左图标</a></li>
  <li><a href="http://www.materializecss.cn/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 href="#">A link</a></li>
  <li><a class="waves-effect waves-light btn">一个按钮</a></li>
  <li><a class="waves-effect waves-light btn-large">一个大按钮</a></li>
</ul>
    </div>
  </nav>

一半的固定动作在扩展的导航条

增加一个一半的固定动作按钮到导航条上。

<nav class="nav-extended">
    <div class="nav-wrapper">
<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。带你看下面的例子了解这个功能。增加整个 button-collapse 行到你的 nav 标签。

<nav>
    <div class="nav-wrapper">
<a href="#!" class="brand-logo">Logo</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
  <li><a href="http://www.materializecss.cn/sass.html">Sass</a></li>
  <li><a href="http://www.materializecss.cn/badges.html">组件</a></li>
  <li><a href="http://www.materializecss.cn/collapsible.html">Javascript</a></li>
  <li><a href="http://www.materializecss.cn/mobile.html">手机</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
  <li><a href="http://www.materializecss.cn/sass.html">Sass</a></li>
  <li><a href="http://www.materializecss.cn/badges.html">组件</a></li>
  <li><a href="http://www.materializecss.cn/collapsible.html">Javascript</a></li>
  <li><a href="http://www.materializecss.cn/mobile.html">手机</a></li>
</ul>
    </div>
  </nav>

初始化

在包含 button-collapse 整行到你的导航条中时，将下面这段代码放到 $( document ).ready(function(){}) 里面。下面的示例如果您没有修改上面示例的类。直接可以使用，你有，只要改变 jQuery 选择器的类就可以匹配了。

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