منو

یک menu ساده, برای هر فهرست عمودی

رنگ ندارد
سایز ندارد
متغیر دارد

Bulma menu یک کانپوننت فهرست عمودی است که شامل المان های زیر است:

  • بخش menu
  • برچسب های menu-label
  • لیست های menu-list تعاملی که می توانند تا 2 سطح قرار بگیرند

<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><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>
                                    

متغیر ها #

برای شخصی سازی این کامپوننت می توانید از این متغیرها استفاده کنید. قبل از وارد کردن Bulma یک یا چند متغیر مورد از متغیر هارا به سادگی تنظیم کنید.یاد بگیرید چگونه.

نام نوع مقدار پیش فرض مقدار محاسبه شده
نام نوع مقدار پیش فرض مقدار محاسبه شده
$menu-item-color color $text hsl(0, 0%, 29%)
$menu-item-radius size $radius-small 2px
$menu-item-hover-color color $text-strong hsl(0, 0%, 21%)
$menu-item-hover-background-color color $background hsl(0, 0%, 96%)
$menu-item-active-color color $link-invert #fff
$menu-item-active-background-color color $link hsl(217, 71%, 53%)
$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 color $text-light hsl(0, 0%, 48%)
$menu-label-font-size size 0.75em
$menu-label-letter-spacing size 0.1em
$menu-label-spacing size 1em