8.19. Top navigation bar of Foundation

The top navigation bar is placed at the head of the page:

8.19.1. Example ¶

<nav class="top-bar" data-topbar>
  <ul class="title-area">
    <li class="name">
      <!-- 如果你不需要标题或图标可以删掉它 -->
      <h1><a href="#">WebSiteName</a></h1>
    </li>
      <!-- 小屏幕上折叠按钮: 去掉 .menu-icon 类，可以去除图标。
      如果需要只显示图片，可以删除 "Menu" 文本 -->
    <li class="toggle-topbar menu-icon"><a
href="#"><span>Menu</span></a></li>
  </ul>
  <section class="top-bar-section">
    <ul class="left">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </section>
</nav>
<!-- 初始化 Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>

尝试一下 »

Case analysis ¶

Use <nav class="top-bar" data-topbar> Create a standard toolbar. .title-area Class defines the logo zone of the site (you must prevent li.name Inside). When the screen becomes smaller, you can see a “menu” button. Foundation menus are automatically folded and extended according to screen size:

小屏幕上，由于尺寸的原因很多选项会被隐藏。 li.toggle-topbar menu.icon 类创建了一个菜单的按钮，点击它可以显示被隐藏的选项。 提示: 重置浏览器窗口查看效果。

.top-bar-section The link part of the navigation is defined. .left Class specifies the left alignment of the link. .active Class is used to display the selected items with a blue background.

提示: If you want to align the navigation links to the right, you can set the .left Modify to .right :

8.19.2. Example ¶

<section class="top-bar-section">
  <ul class="right">...

尝试一下 »

You can set left and right alignment at the same time:

8.19.3. Example ¶

<section class="top-bar-section">
  <ul class="left">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Page 1</a></li>
    <li><a href="#">Page 2</a></li>
  </ul>
  <ul class="right">
    <li><a href="#">Sign Up</a></li>
    <li><a href="#">Login</a></li>
  </ul>
</section>

尝试一下 »

The navigation bar can be accessed through the .divider Class to add split lines (vertical lines on the big screen and horizontal lines on the small screen):

8.19.4. Example ¶

<ul class="left">
  <li class="active"><a href="#">Home</a></li>
  <li class="divider"></li>
  <li><a href="#">Page 1</a></li>
  <li class="divider"></li>
  <li><a href="#">Page 2</a></li>
  <li class="divider"></li>
  <li><a href="#">Page 3</a></li>
  <li class="divider"></li>
</ul>

尝试一下 »

Drop-down menu of the navigation bar ¶

The top navigation bar can set the drop-down menu.

You can do this by using the <li> Add on the element .has-dropdown Class to set the drop-down menu

8.19.5. Example ¶

<section class="top-bar-section">
  <ul class="left">
    <li class="active"><a href="#">Home</a></li>
    <li class="has-dropdown">
      <a href="#">Dropdown</a>
      <ul class="dropdown">
        <li><a href="#">First link in dropdown</a></li>
        <li><a href="#">Second link in dropdown</a></li>
        <li class="active"><a href="#">Active link in dropdown</a></li>
      </ul>
    </li>
  </ul>
</section>

尝试一下 »

Dividing line ¶

Use .divider Class to set the split line of the drop-down menu

8.19.6. Example ¶

<ul class="dropdown">
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Orange</a></li>
  <li class="divider"></li>
  <li><a href="#">Kale</a></li>
  <li><a href="#">Spinach</a></li>
</ul>

尝试一下 »

Drop-down menu label ¶

In <li> Add inside <label> Element to set the label (title) of the drop-down menu:

8.19.7. Example ¶

<ul class="dropdown">
  <li><label>Fruit</label></li>
  <li><a href="#">Apple</a></li>
  <li><a href="#">Banana</a></li>
  <li><a href="#">Orange</a></li>
  <li class="divider"></li>
  <li><label>Vegetable</label></li>
  <li><a href="#">Kale</a></li>
  <li><a href="#">Spinach</a></li>
</ul>

尝试一下 »

Embedded drop-down menu ¶

The drop-down menu can be embedded with another drop-down menu:

8.19.8. Example ¶

<section class="top-bar-section">
  <ul class="left">
    <li class="has-dropdown">
      <a href="#">Dropdown</a>
      <ul class="dropdown">
        <li><label>Level 1</label></li>
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="has-dropdown">
          <a href="#">New dropdown</a>
          <ul class="dropdown">
            <li><label>Level 2</label></li>
            <li><a href="#">2nd level dropdown</a></li>
            <li><a href="#">2nd level dropdown</a></li>
            <li class="has-dropdown">
              <a href="#">New dropdown</a>
              <ul class="dropdown">
                <li><label>Level 3</label></li>
                <li><a href="#">3rd level dropdown</a></li>
                <li><a href="#">3rd level dropdown</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</section>

尝试一下 »

Clickable ¶

By default, the drop-down menu of the navigation bar is displayed after the mouse is moved over, and we can use the data-options="is_hover: false" Property to set the navigation bar to display after a mouse click:

8.19.9. Example ¶

<nav class="top-bar" data-topbar data-options="is_hover: false">

尝试一下 »

Buttons and icons on the navigation bar ¶

You can place icons and buttons on the navigation bar:

8.19.10. Example ¶

<li><a href="#" class="button">Button Link</a></li>

尝试一下 »

You can put icons on the navigation bar, and more picture styles can be viewed. Foundation 图标教程 :

8.19.11. Example ¶

<head>
<!-- Foundation 图标样式 -->
<link rel="stylesheet"
href="http://static.runoob.com/assets/foundation-icons/foundation-icons.css">
</head>
<ul class="left">
  <li class="active"><a href="#"><i class="fi-home"></i> Home</a></li>
  <li><a href="#"><i class="fi-torso"></i> Sign Up</a></li>
  <li><a href="#"><i class="fi-magnifying-glass"></i> Search</a></li>
</ul>

尝试一下 »

Fixed navigation bar ¶

The navigation bar can be fixed at the top of the page.

The navigation bar does not move at the top when the page is scrolled.

To fix the navigation bar, just place the navigation bar in the <div class="fixed"> Within:

8.19.12. Example ¶

<div class="fixed">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>

尝试一下 »

Absolute positioning of navigation bar ¶

We can put the navigation bar in <div class="sticky"> Inside to set the absolute positioning of the navigation bar, which remains at the top like a fixed navigation bar when the scroll bar scrolls to that area:

8.19.13. Example ¶

<div class="sticky">
  <nav class="top-bar" data-topbar>
    ...
  </nav>
</div>

尝试一下 »

When you use .sticky Class, the top navigation bar will be fixed on all screen sizes. If you need to set it on the specified screen, just set it in the <nav> Add on data-options="sticky_on: small|medium|large" Property is available:

8.19.14. Example ¶

<div class="sticky">
  <!-- 只有在大屏幕上 -->
  <nav class="top-bar" data-topbar data-options="sticky_on: large">
    ..
   </nav>
</div>

Or set multiple screen sizes through an array:

8.19.15. Example ¶

<div class="sticky">
  <!-- 小屏幕和大屏幕 (没有中等屏幕)-->
  <nav class="top-bar" data-topbar data-options="sticky_on: [small,
large]">
    ..
   </nav>
</div>