菜单导航(Menu)

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

1

Bulma菜单是一个垂直导航组件,包括:

  • the menu 菜单容器
  • menu-label 信息菜单标签
  • menu-list 交互式菜单列表,最多可嵌套两层

俺老刘提示:menu-label 里面可以换成链地址为#的a标签,使用is-active后变为浅蓝色。
这个菜单比价简单,可定制性也不是很强,你可以自己写css文件来丰富颜色和页面效果。还可以通过js改变css的hide属性控制菜单收缩展开。

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>

变量 #

Name
Type
Value
Computed Value
Computed Type
$menu-item-color
variable
$text
hsl(0, 0%, 29%)
color
$menu-item-radius
variable
$radius-small
2px
size
$menu-item-hover-color
variable
$text-strong
hsl(0, 0%, 21%)
color
$menu-item-hover-background-color
variable
$background
hsl(0, 0%, 96%)
color
$menu-item-active-color
variable
$link-invert
#fff
color
$menu-item-active-background-color
variable
$link
hsl(229, 53%,  53%)
color
$menu-list-border-left
size
1px solid $border
$menu-list-line-height
unitless
1.25
$menu-list-link-padding
size
0.5em 0.75em
$menu-nested-list-margin
size
0.75em
$menu-nested-list-padding-left
size
0.75em
$menu-label-color
variable
$text-light
hsl(0, 0%, 48%)
color
$menu-label-font-size
size
0.75em
$menu-label-letter-spacing
size
0.1em
$menu-label-spacing
size
1em

返回头部

23222

问题反馈
返回顶部