顶部导航栏（Top Bar）

Posted on 9 月 21, 2026 by

Foundation 顶部导航栏（Top Bar）

一、导航栏概述

顶部导航栏是网站头部常用的导航组件，支持响应式折叠、左右布局、分割线、下拉菜单、固定定位等功能。

必须初始化 Foundation JS：$(document).foundation();

核心结构

元素类 / 属性作用
<nav>.top-bar + data-topbar导航栏容器
<ul class="title-area">标题区域包含品牌名称/Logo 和移动端折叠按钮
<section class="top-bar-section">导航内容区包含左右菜单列表
.left / .right菜单对齐方向控制菜单靠左或靠右
.toggle-topbar移动端折叠触发器小屏幕显示菜单开关

二、基础顶部导航栏

<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">Foxdevelop</a></h1>
        </li>
        <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="#">首页</a></li>
            <li><a href="#">课程</a></li>
            <li><a href="#">下载</a></li>
            <li><a href="#">搜索</a></li>
        </ul>
    </section>
</nav>Code language: HTML, XML (xml)

小屏幕上导航项自动折叠，点击 Menu 按钮展开。大屏幕上所有菜单项水平排列。

三、左右分栏导航（登录/注册居右）

使用 .left 和 .right 两个 <ul> 分别控制菜单左右布局，适合将导航链接放左侧、用户操作放右侧：

<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">Foxdevelop</a></h1>
        </li>
        <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>
        </ul>
        <ul class="right">
            <li><a href="#">Sign Up</a></li>
            <li><a href="#">Login</a></li>
        </ul>
    </section>
</nav>Code language: HTML, XML (xml)

四、导航栏分割线

使用 .divider 类在菜单项之间添加分隔线（大屏幕为竖线，小屏幕为横线）：

<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">Foxdevelop</a></h1>
        </li>
        <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 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>
    </section>
</nav>Code language: HTML, XML (xml)

五、导航栏下拉菜单

在 <li> 上添加 .has-dropdown 类，内部嵌套 <ul class="dropdown"> 即可创建多级下拉菜单，支持无限层级嵌套：

<nav class="top-bar" data-topbar>
    <ul class="title-area">
        <li class="name">
            <h1><a href="#">Foxdevelop</a></h1>
        </li>
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
    </ul>

    <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>
</nav>Code language: HTML, XML (xml)

下拉菜单默认点击展开。如需鼠标悬停展开，在 <nav> 上添加 data-options="is_hover:true"。

六、固定导航栏

6.1 始终固定在顶部

将导航栏包裹在 <div class="fixed"> 中，页面滚动时导航栏始终固定在视口顶部：

<div class="fixed">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">Foxdevelop</a></h1>
            </li>
            <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>
            </ul>
        </section>
    </nav>
</div>Code language: HTML, XML (xml)

6.2 绝对定位（滚动到区域后固定）

使用 .sticky 替代 .fixed，导航栏初始随页面滚动，当滚动到其原始位置时自动吸附顶部：

<div class="sticky">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">Foxdevelop</a></h1>
            </li>
            <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>
            </ul>
        </section>
    </nav>
</div>Code language: HTML, XML (xml)

6.3 仅在大屏幕下固定

在 <nav> 上添加 data-options="sticky_on: large"（可选值：small | medium | large）：

<div class="sticky">
    <nav class="top-bar" data-topbar data-options="sticky_on: large">
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">Foxdevelop</a></h1>
            </li>
            <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>
            </ul>
        </section>
    </nav>
</div>Code language: HTML, XML (xml)

七、完整可运行示例

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Foundation 顶部导航栏示例</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
    <script src="foundation-5.5.3/js/vendor/jquery.js"></script>
    <script src="foundation-5.5.3/js/foundation.min.js"></script>
    <script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
    <script>
        $(document).ready(function () {
            $(document).foundation();
        })
    </script>
    <style>
        body {
            padding-top: 20px;
        }
        .demo-section {
            margin-bottom: 40px;
        }
    </style>
</head>
<body>

<!-- 基础导航栏 -->
<div class="demo-section">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">Foxdevelop</a></h1>
            </li>
            <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="#">首页</a></li>
                <li><a href="#">课程</a></li>
                <li><a href="#">下载</a></li>
                <li><a href="#">搜索</a></li>
            </ul>
            <ul class="right">
                <li><a href="#">Sign Up</a></li>
                <li><a href="#">Login</a></li>
            </ul>
        </section>
    </nav>
</div>

<div class="row">
    <div class="medium-12 columns">
        <p>向下滚动页面查看固定导航栏效果：</p>
        <p style="height: 800px;">（占位内容，模拟页面滚动）</p>
    </div>
</div>

<!-- 固定导航栏示例（取消注释即可使用） -->
<!--
<div class="fixed">
    <nav class="top-bar" data-topbar>
        <ul class="title-area">
            <li class="name">
                <h1><a href="#">Foxdevelop</a></h1>
            </li>
            <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>
            </ul>
        </section>
    </nav>
</div>
-->

</body>
</html>Code language: HTML, XML (xml)

八、使用要点小结

功能实现方式
创建导航栏<nav class="top-bar" data-topbar>
标题区域<ul class="title-area"> → <li class="name">
移动端折叠按钮<li class="toggle-topbar menu-icon">
菜单左右布局.left / .right 两个 <ul>
当前选中项.active 类
分割线<li class="divider">
下拉菜单.has-dropdown + <ul class="dropdown">
悬停触发下拉data-options="is_hover:true"
固定顶部外层包裹 <div class="fixed">
滚动吸附外层包裹 <div class="sticky">
响应式固定data-options="sticky_on: large"
JS 初始化$(document).foundation()
Posted in Foundation教程

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注