水平导航栏(Navbar)

一个反应灵敏的水平导航栏,可以支持图像,链接,按钮和下拉列表

导航栏组件是一个具有以下结构的响应性和多功能水平导航栏:

  • navbar 主容器
    • navbar-brand左侧,始终可见,通常包含logo徽标和一些可选的链接或图标
      • navbar-burger 汉堡图标,用于切换触摸设备上的navbar菜单
    • navbar-menu导航栏菜单右侧,在触摸设备上隐藏,在桌面上可见
      • navbar-start 启动菜单,它出现在桌面上navbar-brand的左边
      • navbar-end 菜单的右侧部分,显示在navbar的末尾
        • navbar-item navbar项的每一项,可以是a或div
          • navbar-link 导航栏链接作为下拉列表的同级链接,带有箭头
          • navbar-dropdown 下拉菜单,可以包括code>navbar-item项和分隔符
            • navbar-divider 分隔线分隔导航栏项目的水平线

1.基本导航栏

为了快速入门,以下是完整的基本导航栏的外观:

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28">
      </a>
  
      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
  
    <div id="navbarBasicExample" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item">
          首页
        </a>
  
        <a class="navbar-item">
          文档
        </a>
  
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">
            更多
          </a>
  
          <div class="navbar-dropdown">
            <a class="navbar-item">
              关于
            </a>
            <a class="navbar-item">
              求职
            </a>
            <a class="navbar-item">
              联系
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item">
              问题反馈
            </a>
          </div>
        </div>
      </div>
  
      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-primary">
              <strong>注册</strong>
            </a>
            <a class="button is-light">
              登录
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>

2.布兰达导航navbar-brand

navbar-brand 位于navbar的左侧。它可以包含:

  • 许多个navbar-item
  • 最后一项是汉堡菜单 navbar-burger
<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <!-- navbar items, navbar burger... -->
    </div>
  </nav>

navbar:在触摸设备上<1024px 和桌面上>=1024px,navbar brand始终可见。 因此,建议只使用几个navbar项,以避免在小型设备上水平溢出。

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: Free, open source, and modern CSS framework based on Flexbox" width="112" height="28">
      </a>
  
      <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>
  </nav>

在桌面上>=1024px,navbar brand只会占用它需要的空间。

3.汉堡菜单Navbar burger

汉堡菜单navbar-burger,只出现在触摸设备上。它必须作为navbar-brand的最后一个子节点出现。它必须包含三个空白的span标签,以便可视化汉堡线或十字架(当激活时)。

<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
    <span aria-hidden="true"></span>
  </a>

如果修饰符类处于活动状态 is-active,则显示为X号。

4.导航栏菜单

导航栏菜单code>navbar-menu与navbar brand对应。因此,它必须作为navbar的直接子级,作为navbar brand的兄弟。

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <!-- navbar items, navbar burger... -->
    </div>
    <div class="navbar-menu">
      <!-- navbar start, navbar end -->
    </div>
  </nav>

导航栏菜单隐藏在<1024px的触摸设备上。你需要添加修改符is-active来显示它。

<div class="navbar-menu">
    <!-- hidden on mobile -->
  </div>
  
  <div class="navbar-menu is-active">
    <!-- shown on mobile -->
  </div>

在桌面上>=1024px,导航栏菜单将填满导航栏中的可用空间,留下navbar_brand所需的空间。它需要两个元素作为直接子项: he navbar brand just the space it needs. It needs, however, two elements as direct children:

  • navbar-start导航栏开始
  • navbar-end导航栏结束

5.导航栏开始和结束

navbar-startnavbar-endnavbar-menu直接和仅有的两个原色.

在电脑端分辨率 >= 1024px :

  • navbar-start 显示在左边
  • navbar-end 显示在右边

他们都可以包含多个 navbar-item.

<div class="navbar-menu">
    <div class="navbar-start">
      <!-- navbar items -->
    </div>
  
    <div class="navbar-end">
      <!-- navbar items -->
    </div>
  </div>

6.菜单元素Navbar item

菜单元素navbar-item 是菜单中最小的基本单位,也就是你要导航的最终链接,一般有多个,他有下面几种形式:

  • 导航链接
    <a class="navbar-item">
        Home
      </a>
  • brand logo
    <a class="navbar-item">
        <img src="https://bulma.io/images/bulma-logo.png" width="112" height="28" alt="Bulma">
      </a>
  • 下拉菜单
    <div class="navbar-item has-dropdown">
        <a class="navbar-link">
          Docs
        </a>
      
        <div class="navbar-dropdown">
          <!-- Other navbar items -->
        </div>
      </div>
  • 下拉菜单子项
    <div class="navbar-dropdown">
        <a class="navbar-item">
          Overview
        </a>
      </div>
  • 一个包含任何内容的容器, 例如表单
    <div class="navbar-item">
        <div class="field is-grouped">
          <p class="control">
            <a class="button">
              <span class="icon">
                <i class="fas fa-twitter" aria-hidden="true"></i>
              </span>
              <span>Tweet</span>
            </a>
          </p>
          <p class="control">
            <a class="button is-primary">
              <span class="icon">
                <i class="fas fa-download" aria-hidden="true"></i>
              </span>
              <span>Download</span>
            </a>
          </p>
        </div>
      </div>

它可以是锚定标记<a><div>

7.透明导航栏

要在任何可视上下文中无缝集成navbar,可以在navbar组件上添加 is-transparent修饰符。这将从导航栏项目中删除任何悬停或活动背景。

HTML

<nav class="navbar is-transparent">
    <div class="navbar-brand">
      <a class="navbar-item" href="https://bulma.io">
        <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
      </a>
      <div class="navbar-burger" data-target="navbarExampleTransparentExample">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
  
    <div id="navbarExampleTransparentExample" class="navbar-menu">
      <div class="navbar-start">
        <a class="navbar-item" href="https://bulma.io/">
          Home
        </a>
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link" href="https://bulma.io/documentation/overview/start/">
            Docs
          </a>
          <div class="navbar-dropdown is-boxed">
            <a class="navbar-item" href="https://bulma.io/documentation/overview/start/">
              Overview
            </a>
            <a class="navbar-item" href="https://bulma.io/documentation/overview/modifiers/">
              Modifiers
            </a>
            <a class="navbar-item" href="https://bulma.io/documentation/columns/basics/">
              Columns
            </a>
            <a class="navbar-item" href="https://bulma.io/documentation/layout/container/">
              Layout
            </a>
            <a class="navbar-item" href="https://bulma.io/documentation/form/general/">
              Form
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item" href="https://bulma.io/documentation/elements/box/">
              Elements
            </a>
            <a class="navbar-item is-active" href="https://bulma.io/documentation/components/breadcrumb/">
              Components
            </a>
          </div>
        </div>
      </div>
  
      <div class="navbar-end">
        <div class="navbar-item">
          <div class="field is-grouped">
            <p class="control">
              <a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
                <span class="icon">
                  <i class="fab fa-twitter"></i>
                </span>
                <span>
                  Tweet
                </span>
              </a>
            </p>
            <p class="control">
              <a class="button is-primary" href="https://github.com/jgthms/bulma/releases/download/0.9.1/bulma-0.9.1.zip">
                <span class="icon">
                  <i class="fas fa-download"></i>
                </span>
                <span>Download</span>
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </nav>

8.固定导航栏

你可以将导航栏固定到页面的顶部或底部。这是一个两步实现过程:

  • navbar添加 is-fixed-topis-fixed-bottom
    <nav class="navbar is-fixed-top">
  • 将相应的has-navbar-fixed-tophas-navbar-fixed-bottom修饰符添加<html><body> 元素中,为页面提供适当的填充
    <html class="has-navbar-fixed-top">

点击下面链接在新页面打开演示页

9.下拉菜单

创建下拉菜单,需要 4 个元素:

  • navbar-itemhas-dropdown 修饰符
  • navbar-link 带下拉箭头
  • navbar-dropdown 下拉菜单选项,包含 navbar-itemnavbar-divider
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
    <div class="navbar-item has-dropdown">
      <a class="navbar-link">
        Docs
      </a>
  
      <div class="navbar-dropdown">
        <a class="navbar-item">
          Overview
        </a>
        <a class="navbar-item">
          Elements
        </a>
        <a class="navbar-item">
          Components
        </a>
        <hr class="navbar-divider">
        <div class="navbar-item">
          Version 0.9.1
        </div>
      </div>
    </div>
  </nav>

CSSJavaScript控制显示/隐藏下拉列表

navbar-dropdown 在移动设备分辨率 < 1024px时候显示, 在桌面设备 >= 1024px隐藏。 但是 下拉列表在桌面设备如何显示取决于其父类。

带有 has-dropdown 修饰符的navbar-item有两个额外的修饰符:

  • is-hoverable:悬停父导航栏项时,将显示下拉列表
  • is-active: 下拉列表总是显示。

当CSS:hover实现时,本身就可以完美工作,is-active类可用于希望用JavaScript控制下拉列表显示的用户。

<div class="navbar-item has-dropdown is-hoverable">
    <!-- navbar-link, navbar-dropdown etc. -->
  </div>
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
    <div class="navbar-item has-dropdown is-hoverable">
      <a class="navbar-link">
        Docs
      </a>
  
      <div class="navbar-dropdown">
        <a class="navbar-item">
          Overview
        </a>
        <a class="navbar-item">
          Elements
        </a>
        <a class="navbar-item">
          Components
        </a>
        <hr class="navbar-divider">
        <div class="navbar-item">
          Version 0.9.1
        </div>
      </div>
    </div>
  </nav>
<div class="navbar-item has-dropdown is-active">
    <!-- navbar-link, navbar-dropdown etc. -->
  </div>
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
    <div class="navbar-item has-dropdown is-active">
      <a class="navbar-link">
        Docs
      </a>
  
      <div class="navbar-dropdown">
        <a class="navbar-item">
          Overview
        </a>
        <a class="navbar-item">
          Elements
        </a>
        <a class="navbar-item">
          Components
        </a>
        <hr class="navbar-divider">
        <div class="navbar-item">
          Version 0.9.1
        </div>
      </div>
    </div>
  </nav>

Right dropdown

10.右侧下拉菜单

如果父navbar-item位于右侧,则可以使用 is-right修饰符将下拉列表定位为从右侧开始。

<div class="navbar-dropdown is-right">
    <!-- navbar-item, navbar-divider etc. -->
  </div>

Documentation

Everything you need to create a website with Bulma

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
    <div class="navbar-menu">
      <div class="navbar-start">
        <div class="navbar-item has-dropdown is-active">
          <a class="navbar-link">
            Left
          </a>
  
          <div class="navbar-dropdown">
            <a class="navbar-item">
              Overview
            </a>
            <a class="navbar-item">
              Elements
            </a>
            <a class="navbar-item">
              Components
            </a>
            <hr class="navbar-divider">
            <div class="navbar-item">
              Version 0.9.1
            </div>
          </div>
        </div>
      </div>
  
      <div class="navbar-end">
        <div class="navbar-item has-dropdown is-active">
          <a class="navbar-link">
            Right
          </a>
  
          <div class="navbar-dropdown is-right">
            <a class="navbar-item">
              Overview
            </a>
            <a class="navbar-item">
              Elements
            </a>
            <a class="navbar-item">
              Components
            </a>
            <hr class="navbar-divider">
            <div class="navbar-item">
              Version 0.9.1
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>
  
  <section class="hero is-primary">
    <div class="hero-body">
      <p class="title">
        Documentation
      </p>
      <p class="subtitle">
        Everything you need to <strong>create a website</strong> with Bulma
      </p>
    </div>
  </section>

11.上弹菜单

如果您使用的是底部的导航,比如固定底部的导航,那么您可能需要使用上拉菜单。 只需在父navbar-item的修饰符 has-dropdown后面增加has-dropdown-up修饰符。

<div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
    <a class="navbar-link" href="https://bulma.io/documentation/overview/start/">
      Docs
    </a>
    <div class="navbar-dropdown">
      <a class="navbar-item" href="https://bulma.io/documentation/overview/start/">
        Overview
      </a>
    </div>
  </div>

Documentation

Everything you need to create a website with Bulma

<section class="hero is-primary">
    <div class="hero-body">
      <p class="title">
        Documentation
      </p>
      <p class="subtitle">
        Everything you need to <strong>create a website</strong> with Bulma
      </p>
    </div>
  </section>
  
  <nav class="navbar" role="navigation" aria-label="dropdown navigation">
    <div class="navbar-menu">
      <div class="navbar-start">
        <div class="navbar-item has-dropdown has-dropdown-up is-active">
          <a class="navbar-link">
            Dropup
          </a>
  
          <div class="navbar-dropdown">
            <a class="navbar-item">
              Overview
            </a>
            <a class="navbar-item">
              Elements
            </a>
            <a class="navbar-item">
              Components
            </a>
            <hr class="navbar-divider">
            <div class="navbar-item">
              Version 0.9.1
            </div>
          </div>
        </div>
      </div>
    </div>
  </nav>

Dropdown without arrow

12.无箭头下拉列表

可以通过向导航栏的项添加“无箭头”is-arrowless修饰符来删除这些项中的箭头。

<div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link is-arrowless">
      Docs
    </a>
    <!-- navbar-dropdowns -->
  </div>
<div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link is-arrowless">
      Link without arrow
    </a>
    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.9.1
      </div>
    </div>
  </div>

13.下拉菜单样式

默认 navbar-dropdown 具有:

  • 一个灰色顶边border-top
  • 底部两边有个半圆角border-radius

Documentation

Everything you need to create a website with Bulma

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
    <a class="navbar-item">
      <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: Free, open source, and modern CSS framework based on Flexbox" width="112" height="28">
    </a>
  
    <div class="navbar-item has-dropdown is-active">
      <a class="navbar-link">
        Docs
      </a>
  
      <div class="navbar-dropdown">
        <a class="navbar-item">
          Overview
        </a>
        <a class="navbar-item">
          Elements
        </a>
        <a class="navbar-item">
          Components
        </a>
        <hr class="navbar-divider">
        <div class="navbar-item">
          Version 0.9.1
        </div>
      </div>
    </div>
  </nav>
  
  <section class="hero is-primary">
    <div class="hero-body">
      <p class="title">
        Documentation
      </p>
      <p class="subtitle">
        Everything you need to <strong>create a website</strong> with Bulma
      </p>
    </div>
  </section>

当有一个透明的导航菜单时,最好使用下拉列表的装箱版本通,使用 is-boxed修饰符。

  • 灰色框被移除
  • 添加了轻微的内部阴影
  • 所有的角都是圆的
  • 悬停/活动状态已设置动画

Documentation

Everything you need to create a website with Bulma

<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
    <a class="navbar-item">
      <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: Free, open source, and modern CSS framework based on Flexbox" width="112" height="28">
    </a>
  
    <div class="navbar-item has-dropdown is-active">
      <a class="navbar-link">
        Docs
      </a>
  
      <div class="navbar-dropdown is-boxed">
        <a class="navbar-item">
          Overview
        </a>
        <a class="navbar-item">
          Elements
        </a>
        <a class="navbar-item">
          Components
        </a>
        <hr class="navbar-divider">
        <div class="navbar-item">
          Version 0.9.1
        </div>
      </div>
    </div>
  </nav>
  
  <section class="hero">
    <div class="hero-body">
      <p class="title">
        Documentation
      </p>
      <p class="subtitle">
        Everything you need to <strong>create a website</strong> with Bulma
      </p>
    </div>
  </section>

14.激活下拉菜单项

Documentation

Everything you need to create a website with Bulma

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
    <a class="navbar-item">
      <img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: Free, open source, and modern CSS framework based on Flexbox" width="112" height="28">
    </a>
  
    <div class="navbar-item has-dropdown is-active">
      <a class="navbar-link">
        Docs
      </a>
  
      <div class="navbar-dropdown">
        <a class="navbar-item">
          Overview
        </a>
        <a class="navbar-item is-active">
          Elements
        </a>
        <a class="navbar-item">
          Components
        </a>
        <hr class="navbar-divider">
        <div class="navbar-item">
          Version 0.9.1
        </div>
      </div>
    </div>
  </nav>
  
  <section class="hero is-primary">
    <div class="hero-body">
      <p class="title">
        Documentation
      </p>
      <p class="subtitle">
        Everything you need to <strong>create a website</strong> with Bulma
      </p>
    </div>
  </section>

15.下拉菜单分隔符

你可以在navbar-dropdown 添加navbar-divider 以显示一个水平分割线。

<hr class="navbar-divider">

16.颜色

New! 0.5.2

可以使用以下9个颜色修饰符更改导航栏的背景色:

  • is-primary
  • is-link
  • is-info
  • is-success
  • is-warning
  • is-danger
  • is-black
  • is-dark
  • is-light
  • is-white
<nav class="navbar is-primary">
    <!-- navbar brand, navbar menu... -->
  </nav>

17.辅助类,上下左右间距

Type Name Description
Spacing is-spaced 设置为 padding:1rem 2rem;或padding:1rem 2rem 1rem 2rem;
(顺序上、右、下、左,即从头上开始按照顺时针转一圈),
1rem等于html根元素设定的font-size的px值,也就是一个字宽度。

18.变量

Name
Type
Value
Computed Value
Computed Type
$navbar-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$navbar-box-shadow-size
size
0 2px 0 0
$navbar-box-shadow-color
variable
$background
hsl(0, 0%, 96%)
color
$navbar-height
size
3.25rem
$navbar-padding-vertical
size
1rem
$navbar-padding-horizontal
size
2rem
$navbar-z
string
30
$navbar-fixed-z
string
30
$navbar-item-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$navbar-item-hover-color
variable
$link
hsl(229, 53%,  53%)
color
$navbar-item-hover-background-color
variable
$scheme-main-bis
hsl(0, 0%, 98%)
color
$navbar-item-active-color
variable
$scheme-invert
hsl(0, 0%, 4%)
color
$navbar-item-active-background-color
string
transparent
$navbar-item-img-max-height
size
1.75rem
$navbar-burger-color
variable
$navbar-item-color
$navbar-tab-hover-background-color
string
transparent
$navbar-tab-hover-border-bottom-color
variable
$link
hsl(229, 53%,  53%)
color
$navbar-tab-active-color
variable
$link
hsl(229, 53%,  53%)
color
$navbar-tab-active-background-color
string
transparent
$navbar-tab-active-border-bottom-color
variable
$link
hsl(229, 53%,  53%)
color
$navbar-tab-active-border-bottom-style
string
solid
$navbar-tab-active-border-bottom-width
size
3px
$navbar-dropdown-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$navbar-dropdown-border-top
size
2px solid $border
$navbar-dropdown-offset
size
-4px
$navbar-dropdown-arrow
variable
$link
hsl(229, 53%,  53%)
color
$navbar-dropdown-radius
variable
$radius-large
6px
size
$navbar-dropdown-z
string
20
$navbar-dropdown-boxed-radius
variable
$radius-large
6px
size
$navbar-dropdown-boxed-shadow
shadow
0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1)
$navbar-dropdown-item-hover-color
variable
$scheme-invert
hsl(0, 0%, 4%)
color
$navbar-dropdown-item-hover-background-color
variable
$background
hsl(0, 0%, 96%)
color
$navbar-dropdown-item-active-color
variable
$link
hsl(229, 53%,  53%)
color
$navbar-dropdown-item-active-background-color
variable
$background
hsl(0, 0%, 96%)
color
$navbar-divider-background-color
variable
$background
hsl(0, 0%, 96%)
color
$navbar-divider-height
size
2px
$navbar-bottom-box-shadow-size
size
0 -2px 0 0
$navbar-breakpoint
variable
$desktop
960px + (2 * $gap)
computed
$navbar-colors
variable
$colors
Bulma colors
map

返回头部

问题反馈
返回顶部