نوار ناوبر ترکیبی

نوار ناوبر ترکیبی یک سیستم طرح بندی اضافی از Falcon است که می توانید هر دو نوار نوار بالا و نوار عمودی را در یک صفحه قرار دهید.

صفحه مثال نوار ناوبر ترکیبی
Html

با استفاده از Falcon's Navbar Vertical و Navbar Top به راحتی هر صفحه را به طرح بندی نوار ناوبر ترکیبی تبدیل کنید. ساختار طرح ناوبری ترکیبی به این صورت خواهد بود:

<main class="main">
  <div class="container" data-layout="container">

    <!-- Set data-navbar-top="combo" attribute to the navbar top element as describe in step 1 in the responsive behaviours section-->
    <nav class="navbar navbar-vertical navbar-expand-xl navbar-light">
      <div class="collapse navbar-collapse">
        <div class="navbar-vertical-content scrollbar">

          <!-- Your navbar vertical content-->

          <!-- Set a unique ID to the navbar vertical element as describe in step 2 in the responsive behaviours section  -->
          <div class="navbar-nav" id="yourUniqueID">

            <!-- Nav elements-->
          </div>
        </div>
      </div>
    </nav>
    <div class="content">

      <!-- Set the unique ID to data-move-target attribute which you added in step 2 as describe in step 3 in the responsive behaviours section -->
      <nav class="navbar navbar-expand-lg navbar-light navbar-glass navbar-top" data-move-target="#yourUniqueID" data-navbar-top="combo">

        <!-- Your navbar top content here-->
      </nav>

      <!-- Your page content wil go here-->
    </div>
  </div>
</main>
رفتارهای پاسخگو

Falcon نقطه شکست را از navbar-expand{-sm|-md|-lg|-xl|-xxl} کلاس نوار ناوبری بالا دریافت می کند و اگر اندازه صفحه کمتر از نقطه شکست باشد، محتوا را به نوار ناوبری عمودی منتقل می کند.

برای ریسپانسیو کردن نوار ناوبر ترکیبی مراحل زیر را دنبال کنید:

  1. data-navbar-top="combo" ویژگی را به .navbar-top عنصر اضافه کنید.
  2. پس از جایی که می‌خواهید محتوای بالای نوار ناوبری خود را در حالت واکنش‌گرا قرار دهید، یک شناسه منحصربه‌فرد به هر عنصر عمودی نوار ناوبری اضافه کنید.
  3. data-move-target ویژگی را با شناسه (تنظیم در مرحله 2) به عنصر اضافه data-navbar-top="combo" کنید تا محتوای جمع‌شده نوار ناوبری به نوار ناوبری عمودی منتقل شود.

ممنون که با فالکون خلق کردید

نسخه 3.4.0

تنظیمات

سبک سفارشی خود را تنظیم کنید

طرح رنگ بندی

حالت رنگ مناسب را برای برنامه خود انتخاب کنید.


RTL حالت

جهت زبان خود را تغییر دهید

RTL راهنما

چیدمان سیال

سیستم چیدمان کانتینر را تغییر دهید

راهنما سیال

موقعیت ناوبری

یک سیستم ناوبری مناسب برای برنامه وب خود انتخاب کنید


سبک نوار ناوبری عمودی

برای نوار ناوبری عمودی خود بین سبک ها جابه جا شوید

دیدن راهنما

چیزی که میبینی را دوست داری؟

برای خرید قالب فالکون از راستچین اقدام کنید.

خرید
شخصی سازی