文章: 阅读:

Foundation 顶部导航栏

CSSFoundation

前言

  • Foundation 顶部导航栏。

1、顶部导航栏

  • 顶部导航栏放在页面头部：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <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>

    <div style="padding: 20px;">
        <h3>基本头部工具条实例</h3>
        <p>工具条是在页面头部的导航。</p>
        <p><strong>注意:</strong> 在小屏幕上工具条会被一个按钮取代 (重置窗口，查看效果)。</p>
        <p>在按钮被点击后导航项将显示。</p>
    </div>

    <!-- 初始化 Foundation JS -->
    <script>
         $(document).ready(function () {
            $(document).foundation();
         })
    </script>

  • 效果 🔗

  • 解析

    • 使用 <nav class="top-bar" data-topbar> 创建标准工具条。.title-area 类定义了网站 logo 区域 (必须防止 li.name 内)。屏幕变小后你就可以看到一个 "menu" 按钮。Foundation 的菜单会根据屏幕尺寸自动折叠和延展：
    • 小屏幕上，由于尺寸的原因很多选项会被隐藏。li.toggle-topbar menu.icon 类创建了一个菜单的按钮，点击它可以显示被隐藏的选项。
    • .top-bar-section 定义了导航的链接部分。.left 类指定链接左对齐。.active 类用于显示选中的项，背景为蓝色。

1.1 对齐方式

  • 如果想导航链接右对齐可以将 .left 修改为 .right。也可以同时设置左边对齐与右边对齐。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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>

  • 效果 🔗

1.2 分割线

  • 导航栏可以通过 .divider 类来添加分割线 (大屏幕上是垂直的线，小屏幕上是水平线):

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    <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>

  • 效果 🔗

2、导航栏下拉菜单

  • 顶部导航栏可以设置下拉菜单。可以通过在 <li> 元素上添加 .has-dropdown 类来设置下拉菜单:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <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>

  • 效果 🔗

2.1 分割线

  • 使用 .divider 类来设置下拉菜单的分割线:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <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="#">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>
            </li>
        </ul>
    </section>

  • 效果 🔗

3、下拉菜单标签

  • 在 <li> 内添加 <label> 元素来设置下拉菜单的标签 (标题):

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <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><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>
            </li>
        </ul>
    </section>

  • 效果 🔗

3.1 内嵌下拉菜单

  • 下拉菜单可以再嵌入一个下拉菜单：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    <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>

  • 效果 🔗

3.2 可点击

  • 默认情况下导航栏的下拉菜单在鼠标移动过去后显示，我们可以使用 data-options="is_hover: false;" 属性来设置导航栏在鼠标在点击后显示:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <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>

  • 效果 🔗

4、导航栏上的按钮及图标

  • 可以在导航栏上放置图标和按钮：

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <section class="top-bar-section">
        <ul class="left">
            <li><a href="#">Page 1</a></li>
            <li><a href="#">Page 2</a></li>
            <li><a href="#" class="button">Button Link</a></li>
        </ul>
    </section>

  • 效果 🔗

4.1 图标

  • 可以在导航栏上放上图标。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <section class="top-bar-section">
        <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>
    </section>

  • 效果 🔗

5、固定导航栏

  • 导航栏可以固定在页面顶部。页面滚动时导航栏在顶部是不会动的。要固定导航栏只需要将导航栏放在 <div class="fixed"> 内即可:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <div class="fixed">
        <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>
    </div>

    <h2>搞定头部导航栏实例</h2>
    <p>导航栏可以在页面滚动时固定在页面顶部。</p><br>
    <h1>滚动 iframe 中的页面查看效果。</h1>

    <!-- 初始化 Foundation JS -->
    <script>
         $(document).ready(function () {
            $(document).foundation();
         })
    </script>

  • 效果 🔗

6、导航栏绝对定位

  • 可以将导航栏放在 <div class="sticky"> 内来设置导航栏的绝对定位，当滚动条滚到到该区域时，该导航栏就像固定导航栏一样在顶部不动:

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <div>
        <h1>导航栏绝对定位</h1>
        <h3>滚动时固定导航栏。</h3>
        <p>我们可以将导航栏放在 <code>&lt;div class="sticky"&gt;</code> 内来设置导航栏的绝对定位，当滚动条滚到到该区域时，该导航栏就像固定导航栏一样在顶部不动:</p>
    </div>

    <div class="sticky">
        <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>
    </div>

    <h2>Some text to enable scrolling</h2>
    <h2>Some text to enable scrolling</h2>
    <h2>Some text to enable scrolling</h2>
    <h2>Some text to enable scrolling</h2>
    <h2>Some text to enable scrolling</h2>
    <h2>Some text to enable scrolling</h2>
    <h2>Some text to enable scrolling</h2>

    <!-- 初始化 Foundation JS -->
    <script>
         $(document).ready(function () {
            $(document).foundation();
         })
    </script>

  • 效果 🔗

  • 当使用 .sticky 类时，顶部导航栏在所有屏幕尺寸上将固定不动。如果你需要在指定屏幕上设定只需要在 <nav> 上添加 data-options="sticky_on: small | medium | large" 属性即可：

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

  • 或者通过数组设置多个屏幕尺寸：

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

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-12 20:18


评论


文章目录
  1. 1. 前言
  2. 2. 1、顶部导航栏
    1. 2.1. 1.1 对齐方式
    2. 2.2. 1.2 分割线
  3. 3. 2、导航栏下拉菜单
    1. 3.1. 2.1 分割线
  4. 4. 3、下拉菜单标签
    1. 4.1. 3.1 内嵌下拉菜单
    2. 4.2. 3.2 可点击
  5. 5. 4、导航栏上的按钮及图标
    1. 5.1. 4.1 图标
  6. 6. 5、固定导航栏
  7. 7. 6、导航栏绝对定位
隐藏目录