下载

菜单


一个简单的菜单,适用于任何类型的垂直导航

Bulma menu 是一种垂直导航组件,包括

  • menu 容器
  • 信息性的 menu-label 标签
  • 交互式的 menu-list 列表,最多可嵌套 2 级

HTML

<aside class="menu">
  <p class="menu-label">General</p>
  <ul class="menu-list">
    <li><a>Dashboard</a></li>
    <li><a>Customers</a></li>
  </ul>
  <p class="menu-label">Administration</p>
  <ul class="menu-list">
    <li><a>Team Settings</a></li>
    <li>
      <a class="is-active">Manage Your Team</a>
      <ul>
        <li><a>Members</a></li>
        <li><a>Plugins</a></li>
        <li><a>Add a member</a></li>
      </ul>
    </li>
    <li><a>Invitations</a></li>
    <li><a>Cloud Storage Environment Settings</a></li>
    <li><a>Authentication</a></li>
  </ul>
  <p class="menu-label">Transactions</p>
  <ul class="menu-list">
    <li><a>Payments</a></li>
    <li><a>Transfers</a></li>
    <li><a>Balance</a></li>
  </ul>
</aside>

Sass 和 CSS 变量 #

Sass 变量
CSS 变量
$menu-item-radius
var(--bulma-menu-item-radius)
var(--bulma-radius-small)
$menu-list-border-left
var(--bulma-menu-list-border-left)
1px solid var(--bulma-border)
$menu-list-line-height
var(--bulma-menu-list-line-height)
1.25
$menu-list-link-padding
var(--bulma-menu-list-link-padding)
0.5em 0.75em
$menu-nested-list-margin
var(--bulma-menu-nested-list-margin)
0.75em
$menu-nested-list-padding-left
var(--bulma-menu-nested-list-padding-left)
0.75em
$menu-label-color
var(--bulma-menu-label-color)
var(--bulma-text-weak)
$menu-label-font-size
var(--bulma-menu-label-font-size)
0.75em
$menu-label-letter-spacing
var(--bulma-menu-label-letter-spacing)
0.1em
$menu-label-spacing
var(--bulma-menu-label-spacing)
1em

如何支持 Bulma

#native_company# #native_desc#
#native_cta#