垦荒学园

简体中文

English

简体中文

English

切换主题

Foundation 顶部导航栏 ​

Foundation 顶部导航栏（Top Bar）是一个响应式的导航组件，适用于网站的主导航。本章将介绍顶部导航栏的各种用法。

基本顶部导航栏 ​

使用 .top-bar 类创建基本导航栏：

html
<div class="top-bar">
    <div class="top-bar-left">
        <ul class="menu">
            <li class="menu-text">网站名称</li>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">服务</a></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li><a href="#">登录</a></li>
            <li><a href="#">注册</a></li>
        </ul>
    </div>
</div>

带下拉菜单的导航栏 ​

html
<div class="top-bar">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">品牌</li>
            <li>
                <a href="#">产品</a>
                <ul class="menu vertical">
                    <li><a href="#">产品 A</a></li>
                    <li><a href="#">产品 B</a></li>
                    <li><a href="#">产品 C</a></li>
                </ul>
            </li>
            <li>
                <a href="#">服务</a>
                <ul class="menu vertical">
                    <li><a href="#">咨询服务</a></li>
                    <li><a href="#">技术支持</a></li>
                </ul>
            </li>
            <li><a href="#">关于</a></li>
        </ul>
    </div>
</div>

响应式导航栏 ​

在小屏幕上显示汉堡菜单：

html
<!-- 标题栏（移动端显示） -->
<div class="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle="responsive-menu"></button>
    <div class="title-bar-title">菜单</div>
</div>

<!-- 导航栏 -->
<div class="top-bar" id="responsive-menu">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">网站名称</li>
            <li><a href="#">首页</a></li>
            <li>
                <a href="#">产品</a>
                <ul class="menu vertical">
                    <li><a href="#">产品 A</a></li>
                    <li><a href="#">产品 B</a></li>
                </ul>
            </li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li><input type="search" placeholder="搜索"></li>
            <li><button type="button" class="button">搜索</button></li>
        </ul>
    </div>
</div>

堆叠式导航栏 ​

在小屏幕上垂直堆叠：

html
<div class="top-bar stacked-for-medium">
    <div class="top-bar-left">
        <ul class="menu">
            <li class="menu-text">品牌</li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </div>
</div>

带搜索框的导航栏 ​

html
<div class="top-bar">
    <div class="top-bar-left">
        <ul class="menu">
            <li class="menu-text">Logo</li>
            <li><a href="#">首页</a></li>
            <li><a href="#">分类</a></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="menu">
            <li>
                <div class="input-group">
                    <input class="input-group-field" type="search" placeholder="搜索...">
                    <div class="input-group-button">
                        <button class="button" type="button">
                            <i class="fi-magnifying-glass"></i>
                        </button>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>

自定义样式 ​

深色导航栏 ​

html
<style>
    .top-bar.dark {
        background: #333;
    }
    .top-bar.dark .menu a {
        color: #fff;
    }
    .top-bar.dark .menu a:hover {
        color: #ccc;
    }
    .top-bar.dark .menu-text {
        color: #fff;
    }
</style>

<div class="top-bar dark">
    <!-- 内容 -->
</div>

透明导航栏 ​

html
<style>
    .top-bar.transparent {
        background: transparent;
        position: absolute;
        width: 100%;
        z-index: 100;
    }
    .top-bar.transparent .menu a {
        color: #fff;
    }
</style>

固定导航栏 ​

html
<style>
    .top-bar.fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    body {
        padding-top: 60px; /* 导航栏高度 */
    }
</style>

<div class="top-bar fixed">
    <!-- 内容 -->
</div>

带用户信息的导航栏 ​

html
<div class="top-bar">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Logo</li>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
        </ul>
    </div>
    <div class="top-bar-right">
        <ul class="dropdown menu" data-dropdown-menu>
            <li>
                <a href="#">
                    <img src="https://via.placeholder.com/30" style="border-radius: 50%; vertical-align: middle;">
                    张三
                </a>
                <ul class="menu vertical">
                    <li><a href="#">个人中心</a></li>
                    <li><a href="#">设置</a></li>
                    <li><a href="#">退出</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

完整示例 ​

html
<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Foundation 顶部导航栏示例</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/css/foundation.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css">
    <style>
        .demo-section {
            margin-bottom: 40px;
            padding: 20px;
            background: #f8f8f8;
        }
        .demo-section h3 {
            margin-bottom: 20px;
        }

        .top-bar.dark {
            background: #2c3e50;
        }
        .top-bar.dark .menu a { color: #ecf0f1; }
        .top-bar.dark .menu a:hover { color: #bdc3c7; }
        .top-bar.dark .menu-text { color: #fff; }
        .top-bar.dark .dropdown.menu > li.is-dropdown-submenu-parent > a::after {
            border-color: #ecf0f1 transparent transparent;
        }

        .top-bar.primary {
            background: #1779ba;
        }
        .top-bar.primary .menu a { color: #fff; }
        .top-bar.primary .menu a:hover { color: rgba(255,255,255,0.8); }
        .top-bar.primary .menu-text { color: #fff; }

        .main-content {
            padding: 40px 0;
        }
    </style>
</head>
<body>
    <!-- 响应式导航栏示例 -->
    <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle="main-menu"></button>
        <div class="title-bar-title">菜单</div>
    </div>

    <div class="top-bar dark" id="main-menu">
        <div class="top-bar-left">
            <ul class="dropdown menu" data-dropdown-menu>
                <li class="menu-text">Foundation</li>
                <li><a href="#">首页</a></li>
                <li>
                    <a href="#">产品</a>
                    <ul class="menu vertical">
                        <li><a href="#">产品 A</a></li>
                        <li><a href="#">产品 B</a></li>
                        <li>
                            <a href="#">更多产品</a>
                            <ul class="menu vertical">
                                <li><a href="#">产品 C</a></li>
                                <li><a href="#">产品 D</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#">服务</a>
                    <ul class="menu vertical">
                        <li><a href="#">咨询服务</a></li>
                        <li><a href="#">技术支持</a></li>
                    </ul>
                </li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
        <div class="top-bar-right">
            <ul class="dropdown menu" data-dropdown-menu>
                <li>
                    <div class="input-group" style="margin: 0;">
                        <input class="input-group-field" type="search" placeholder="搜索..." style="height: 2.2rem;">
                        <div class="input-group-button">
                            <button class="button" type="button" style="padding: 0.5rem 0.8rem;">
                                <i class="fi-magnifying-glass"></i>
                            </button>
                        </div>
                    </div>
                </li>
                <li>
                    <a href="#"><i class="fi-torso"></i> 用户</a>
                    <ul class="menu vertical">
                        <li><a href="#">个人中心</a></li>
                        <li><a href="#">设置</a></li>
                        <li><a href="#">退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>

    <div class="main-content">
        <div class="grid-container">
            <div class="demo-section">
                <h3>基本导航栏</h3>
                <div class="top-bar">
                    <div class="top-bar-left">
                        <ul class="menu">
                            <li class="menu-text">品牌</li>
                            <li><a href="#">首页</a></li>
                            <li><a href="#">关于</a></li>
                            <li><a href="#">服务</a></li>
                        </ul>
                    </div>
                    <div class="top-bar-right">
                        <ul class="menu">
                            <li><a href="#">登录</a></li>
                            <li><a href="#">注册</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="demo-section">
                <h3>主题色导航栏</h3>
                <div class="top-bar primary">
                    <div class="top-bar-left">
                        <ul class="dropdown menu" data-dropdown-menu>
                            <li class="menu-text">Logo</li>
                            <li><a href="#">首页</a></li>
                            <li>
                                <a href="#">产品</a>
                                <ul class="menu vertical">
                                    <li><a href="#">产品 A</a></li>
                                    <li><a href="#">产品 B</a></li>
                                </ul>
                            </li>
                            <li><a href="#">关于</a></li>
                        </ul>
                    </div>
                    <div class="top-bar-right">
                        <ul class="menu">
                            <li><a class="button small hollow" href="#" style="color: #fff; border-color: #fff;">登录</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="demo-section">
                <h3>带搜索框的导航栏</h3>
                <div class="top-bar">
                    <div class="top-bar-left">
                        <ul class="menu">
                            <li class="menu-text">搜索示例</li>
                        </ul>
                    </div>
                    <div class="top-bar-right">
                        <ul class="menu">
                            <li><input type="search" placeholder="搜索..."></li>
                            <li><button type="button" class="button">搜索</button></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="demo-section">
                <h3>居中 Logo 导航栏</h3>
                <div class="top-bar">
                    <div class="top-bar-left">
                        <ul class="menu">
                            <li><a href="#">首页</a></li>
                            <li><a href="#">产品</a></li>
                        </ul>
                    </div>
                    <div class="top-bar-center" style="position: absolute; left: 50%; transform: translateX(-50%);">
                        <span class="menu-text" style="font-size: 1.5rem; font-weight: bold;">LOGO</span>
                    </div>
                    <div class="top-bar-right">
                        <ul class="menu">
                            <li><a href="#">关于</a></li>
                            <li><a href="#">联系</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.5/dist/js/foundation.min.js"></script>
    <script>$(document).foundation();</script>
</body>
</html>

顶部导航栏最佳实践 ​

  1. 响应式设计：确保在移动设备上有良好的体验
  2. 清晰的层级：合理组织菜单结构
  3. 可访问性：支持键盘导航
  4. 突出重点：突出显示重要链接和当前页面
  5. 简洁设计：避免过多的菜单项

总结 ​

本章我们学习了：

  • 基本顶部导航栏的创建
  • 带下拉菜单的导航栏
  • 响应式导航栏
  • 自定义样式（深色、透明、固定）
  • 带搜索框和用户信息的导航栏

下一章，我们将学习 Foundation 侧边栏。