Navbar

navbar افقی ریسپانسیو که از images، links، buttons و dropdowns پشتیبانی می کند

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

کامپوننت navbar یک فهرست افقی ریسپانسیو و همه کاره است که شامل ساختار زیر می باشد:

  • navbar بخش اصلی
    • navbar-brand در سمت چپ، همیشه فعال است, که معمولا شامل لوگو و لینک ها و آیکون های اختیاری است.
      • navbar-burger آیکون فهرست، که فهرست را در موبایل باز و بسته می کند
    • navbar-menu در سمت راست، در حالت موبایل مخفی و در حالت دسکتاپ فعال
      • navbar-start بخش چپ از فهرست، که در کنار برند navbar در دسکتاب ظاهر می شود.
      • navbar-end بخش راست از فهرشت, که در پایان فهرست ظاهر می شود.
        • navbar-item هر موردی از navbar، که می تواند یک a یا یک div باشد
          • navbar-link یک لینک از dropdown با یک جهت
          • navbar-dropdown dropdown menu ، که می تواند شامل آیتم های navbar و تقسیم کننده ها باشد.
            • navbar-divider یک خط افقی برای فاصله بین آیتم ها

فهرست پایه #

برای شروع سریع، فهرست پایه ای کاملی ایجاد کرده ایم:


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

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 brand همیشه فعال است: در هر دو دیوایس < 1024px و در دسکتاپ >= 1024px . در نتیجه ، توصیه می شود فقط از چند مورد navbar استفاده کنید تا از ریزش افقی در دستگاه های کوچک جلوگیری شود.


<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
        <img src="../../../assets/images/bulma-logo-white.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 , the navbar brand will only take up the space it needs.


navbar-burger فقط در حالت موبایل ظاهر می شود. شامل سه تگ خالی 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 را اضافه کنید.


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>

navbar-menu در حالت موبایل مخفی است < 1024px برای نمایش آن باید کلاس اصلاح کننده is-active را اضافه کنید.


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

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

در حالت دسکتاپ >= 1024px

  • navbar-start
  • navbar-end


navbar-start and navbar-end دو کلاس فرزند navbar-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>
                    

navbar-item یک عنصر قابل تکرار است که می تواند:

  • یک link فهرست
    
    <a class="navbar-item">
        Home
    </a>
  • بخشی برای brand logo
    <a class="navbar-item">
                                        <img src="https://bulma.io/images/bulma-logo-white.png" width="112" height="28" alt="Bulma">
    </a>
  • کلاس والد dropdown menu
    
    <div class="navbar-item has-dropdown">
                                        <a class="navbar-link">
        Docs
                                        </a>
    
                                        <div class="navbar-dropdown">
                                        <!-- Other navbar items -->
                                        </div>
    </div>
                        
  • یک کلاس فرزند navbar dropdown
    
    <div class="navbar-dropdown">
        <a class="navbar-item">
        Overview
        </a>
    </div>
                        
  • بخشی برای هر چیزی مانند field
    
    <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>
    </div>
                        

آن می تواند یک تگ لینک <a> یا یک <div>باشد، مانند یک زیرمجوعه از هر کدام:

  • navbar
  • navbar-brand
  • navbar-start
  • navbar-end
  • navbar-dropdown

می توانید کلاس هاس اصلاح کننده زیر را اضافه کنید:

  • is-expanded تا آن را به یک المان full-width تبدیل کند
  • is-tab برای افزودن bottom border هنگام hover و نمایش bottom border با is-active

Transparent navbar #

برای ادغام یکپارجه navbar در هر زمینه تصویری, باید کلاس اصلاح کننده is-transparent به کامپوننت navbar اضافه کرد. دراینصورت افکت های active و hover پس زمینه از کل آیتم ها حذف می شود.


<nav class="navbar is-transparent">
    <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
        <img src="../../../assets/images/made-with-bulma.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/">
        صفحه اصلی
        </a>
        <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link" href="#">
            دستورالعملها
        </a>
        <div class="navbar-dropdown is-boxed">
            <a class="navbar-item" href="#">
            مرور کلی
            </a>
            <a class="navbar-item" href="#">
            اصلاح کننده ها
            </a>
            <a class="navbar-item" href="#">
            ستون ها
            </a>
            <a class="navbar-item" href="#">
            چیدمان
            </a>
            <a class="navbar-item" href="#">
            فرم
            </a>
            <hr class="navbar-divider">
            <a class="navbar-item" href="#">
            المان ها
            </a>
            <a class="navbar-item is-active" href="#">
            کامپوننت ها
            </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>دانلود</span>
            </a>
            </p>
        </div>
        </div>
    </div>
    </div>
</nav>
                                    

navbar ثابت #

از 0.6.1

می توانید navbar را در بالا یا پایین صفحه ثابت کنید این یک فرایند 2 مرحله ای است:

  • یکی از دو کلاسis-fixed-top یا is-fixed-bottom را به کامپوننت navbar اضافه کنید
    
    <nav class="navbar is-fixed-top">
                                            
  • یکی از کلاس های اصلاح کننده has-navbar-fixed-top یا has-navbar-fixed-bottom به یکی از المان های <html> یا <body> اضافه کنید تا padding مناسبی به صفحه اعمال کند
    
    <html class="has-navbar-fixed-top">
                                            

آن را امتحان کنید!


برای ایجاد یک dropdown menu, به 4المان نیاز دارید:

  • navbar-item ب کلاس اصلاح کننده has-dropdown
  • navbar-link شامل جهت های dropdown
  • navbar-dropdown شامل هر چیزی از navbar-item and navbar-divider

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
    <div class="navbar-item has-dropdown">
    <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">
        <div class="navbar-item">
        ورژن 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-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">
                                <div class="navbar-item">
        ورژن 0.9.1
                                </div>
                                </div>
                                </div>
</nav>
                    

dropdown جهت راست

اگر 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>
                                    

Dropup

از 0.6.1

اگر از یک navbar در پایین استفاده می کنید ،مانند navbar در پایین ثابت است، ممکن است از dropup menu استفاده کنید. به سادگی کلاسهای اصلاح کننده has-dropdown و has-dropdown-up را به تگ والد navbar-item اضافه کنید .


<div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
    <a class="navbar-link" href="https://bulma.io/documentation/overview/start/">
    دستورالعملها
    </a>
    <div class="navbar-dropdown">
    <a class="navbar-item" href="https://bulma.io/documentation/overview/start/">
        مرور کلی
    </a>
    </div>
</div>
                    

دستورالعملها

هر چیزی که برای ساخت یک وب سایت با Bulma نیاز است.


<section class="hero is-primary">
    <div class="hero-body">
    <p class="title">
        دستورالعملها
    </p>
    <p class="subtitle">
    هر چیزی که برای <strong>ساخت یک وب سایت</strong> با 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">
            مرور کلی
            </a>
            <a class="navbar-item">
            المان ها
            </a>
            <a class="navbar-item">
            کامپوننت ها
            </a>
            <hr class="navbar-divider">
            <div class="navbar-item">
            ورژن 0.9.1
            </div>
        </div>
        </div>
    </div>
    </div>
</nav>
                                    

Dropdown بدون جهت

با اضافه کردن کلاس اصلاحی is-arrowless می توانید علانت جهت را از آیتم های navbar جذف کنید.


    <div class="navbar-item has-dropdown is-hoverable">
    <div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link is-arrowless">
    دستورالعملها
    </a>
    <!-- navbar-dropdowns -->
    </div>

    <div class="navbar-item has-dropdown is-hoverable">

استایل برای dropdown menu

به طور پیش فرض، navbar-dropdown دارای:

  • border-top خاکستری
  • یک border-radius در هر دو گوشه پایین

دستورالعملها

هر چیزی که برای ساخت یک وب سایت با Bulma نیاز است.


<nav class="navbar" role="navigation" aria-label="dropdown navigation">
    <a class="navbar-item">
    <img src="../../../assets/images/made-with-bulma.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">
        دستورالعملها
    </a>

    <div class="navbar-dropdown">
        <a class="navbar-item">
        مرور کلی
        </a>
        <a class="navbar-item">
        المان ها
        </a>
        <a class="navbar-item">
        کامپوننت ها
        </a>
        <hr class="navbar-divider">
        <div class="navbar-item">
        ورژن 0.9.1
        </div>
    </div>
    </div>
</nav>

<section class="hero is-primary">
    <div class="hero-body">
        <p class="title">
            دستورالعملها
        </p>
        <p class="subtitle">
        هر چیزی که برای <strong>ساخت یک وب سایت</strong> با Bulma نیاز است
        </p>
    </div>
</section>

در صورت وجود navbar شفاف، استفاده از ورژن boxed، با استفاده از کلاس اصلاح کننده is-boxed توصیه می شود.

  • border خاکستری حذف شده است
  • سایه داخلی کمی اضافه شده است
  • تمامی گوشه ها گرد شده است
  • حالت hover/active متحرک شده است

دستورالعملها

هر چیزی که برای ساخت یک وب سایت با 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">
        دستورالعملها
      </a>

      <div class="navbar-dropdown">
        <a class="navbar-item">
          مرور کلی
        </a>
        <a class="navbar-item">
            المان ها
        </a>
        <a class="navbar-item">
            کامپوننت ها
        </a>
        <hr class="navbar-divider">
        <div class="navbar-item">
ورژن 0.9.1  
        </div>
      </div>
    </div>
  </nav>

  <section class="hero">
    <div class="hero-body">
      <p class="title">
         دستورالعملها
      </p>
      <p class="subtitle">
      هر چیزی که برای <strong>ساخت یک وب سایت</strong> با Bulma نیاز است
     </p>
    </div>
  </section>

آیتم فعال dropdown navbar

دستورالعملها

هر چیزی که برای ساخت یک وب سایت با 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">
        دستورالعملها
    </a>

    <div class="navbar-dropdown">
        <a class="navbar-item">
        مرور کلی
        </a>
        <a class="navbar-item is-active">
        المان ها
        </a>
        <a class="navbar-item">
        کامپوننت ها
        </a>
        <hr class="navbar-divider">
        <div class="navbar-item">
        ورژن 0.9.1
        </div>
    </div>
    </div>
</nav>

<section class="hero is-primary">
    <div class="hero-body">
    <p class="title">
        دستورالعملها
    </p>
    <p class="subtitle">
        هر چیزی که برای <strong>ساخت یک وب سایت</strong> با Bulma نیاز است
    </p>
    </div>
</section>
                    

تقسیم کننده Dropdown

برای نمایش خط افقی در navbar-dropdown می توانید یک navbar-divider اضافه کنید.


<hr class="navbar-divider">
                            

رنگ ها #

جدید! 0.5.2

می توانید پس زمینه navbar را با استفاده از 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>
                            

نوع نام توضیحات
فاصله is-spaced padding بالا و پایین را با 1rem,
padding چپ و راست را با 2rem تنظیم ی کند.

متغیرها #

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

نام نوع مقدار پیش فرض مقدار ماسبه شده
نام نوع مقدار پیش فرض مقدار ماسبه شده
$navbar-background-color color $scheme-main hsl(0, 0%, 100%)
$navbar-box-shadow-size size 0 2px 0 0
$navbar-box-shadow-color color $background hsl(0, 0%, 96%)
$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 color $text hsl(0, 0%, 29%)
$navbar-item-hover-color color $link hsl(217, 71%, 53%)
$navbar-item-hover-background-color color $scheme-main-bis hsl(0, 0%, 98%)
$navbar-item-active-color color $scheme-invert hsl(0, 0%, 4%)
$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 color $link hsl(217, 71%, 53%)
$navbar-tab-active-color color $link hsl(217, 71%, 53%)
$navbar-tab-active-background-color string transparent
$navbar-tab-active-border-bottom-color color $link hsl(217, 71%, 53%)
$navbar-tab-active-border-bottom-style string solid
$navbar-tab-active-border-bottom-width size 3px
$navbar-dropdown-background-color color $scheme-main hsl(0, 0%, 100%)
$navbar-dropdown-border-top size 2px solid $border
$navbar-dropdown-offset size -4px
$navbar-dropdown-arrow color $link hsl(217, 71%, 53%)
$navbar-dropdown-radius size $radius-large 6px
$navbar-dropdown-z string 20
$navbar-dropdown-boxed-radius size $radius-large 6px
$navbar-dropdown-boxed-shadow size 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1)
$navbar-dropdown-item-hover-color color $scheme-invert hsl(0, 0%, 4%)
$navbar-dropdown-item-hover-background-color color $background hsl(0, 0%, 96%)
$navbar-dropdown-item-active-color color $link hsl(217, 71%, 53%)
$navbar-dropdown-item-active-background-color color $background hsl(0, 0%, 96%)
$navbar-divider-background-color color $background hsl(0, 0%, 96%)
$navbar-divider-height size 2px
$navbar-bottom-box-shadow-size size 0 -2px 0 0
$navbar-breakpoint computed $desktop 960px + (2 * $gap)
$navbar-colors function $colors mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)