کامپوننت‌ها - نوار پیمایش

استفاده

برای ساخت یک نوار پیمایشی به کمک جغد، باید ابتدا کلاس‌های اندازه و رنگ را به تگ nav داد، سپس محتوی آن را با بخش‌های مختلفی که وجود دارد پر نمود.

اچ‌تی‌ام‌ال

<nav class="joqd navbar thick-navbar indigo white-text">
  <div class="joqd container-narrow">
    <!-- محتوای نوار پیمایش -->
  </div>
</nav>

اندازه‌ها

نوارهای پیمایشی، از نظر اندازه، به دو نوع پهن و نازک تقسیم می‌شوند.

نوار پهن

نوار پهن که با کلاس thick-navbar ساخته می‌شوند. ارتفاع این نوارها ۶۲ پیکسل بوده (height: 62px) و اندازه‌ی قلم‌ها در آن برابر ۳۰ پیکسل است (font-size: 30px).

<!-- Navbar -->
<nav class="joqd navbar thick-navbar red white-text">
  <div class="joqd container-narrow">

    <!-- Sandwich -->
    <div class="joqd sandwich white-text red-lighten-1-hover">
      <i class="gorbeh gorbeh_menu"></i>
    </div>
    <!-- /Sandwich -->

    <!-- Logo -->
    <div class="joqd logo">
      <a href="http://ikacc.ir" class="joqd link white-text">
        <img src="img/ika-icon.png" alt="IKA">
      </a>
    </div>
    <!-- /Logo -->

    <!-- Content -->
    <ul class="joqd navbar-content">
      <li>
        <a href="#" class="joqd link white-text red-lighten-1-hover"><i class="gorbeh gorbeh_account_circle"></i></a>
      </li>
      <li>
        <a href="#" class="joqd link white-text red-lighten-1-hover"><i class="gorbeh gorbeh_search"></i></a>
      </li>
    </ul>
    <!-- /Content -->

  </div>
</nav>
<!-- /Navbar -->

نوار نازک

نوار نازک که با کلاس thin-navbar ساخته می‌شوند. ارتفاع این نوارها ۴۸ پیکسل بوده (height: 48px) و اندازه‌ی قلم‌ها در آن برابر ۱۶ پیکسل است (font-size: 16px).

<!-- Navbar -->
<nav class="joqd navbar thin-navbar blue white-text">
  <div class="joqd container-narrow">

    <!-- Sandwich -->
    <div class="joqd sandwich white-text blue-lighten-1-hover">
      <i class="gorbeh gorbeh_menu"></i>
    </div>
    <!-- /Sandwich -->

    <!-- Logo -->
    <div class="joqd logo">
      <a href="http://ikacc.ir" class="joqd link white-text">
        <img src="img/ika-icon.png" alt="IKA">
      </a>
    </div>
    <!-- /Logo -->

    <!-- Content -->
    <ul class="joqd navbar-content">
      <li>
        <a href="#" class="joqd link white-text blue-lighten-1-hover"><i class="gorbeh gorbeh_account_circle"></i></a>
      </li>
      <li>
        <a href="#" class="joqd link white-text blue-lighten-1-hover"><i class="gorbeh gorbeh_search"></i></a>
      </li>
    </ul>
    <!-- /Content -->

  </div>
</nav>
<!-- /Navbar -->

انواع

ثابت

نوارهای پیمایش به صورت پیش‌فرض ثابت هستند.

چسبان

برای متحرک سازی نوار پیمایشی، کلاس sticky-navbar را به تگ nav اضافه کنید. در این حالت نوار پیمایشی به اصطلاح به بالای صفحه‌ی نمایش چسبیده و در زمان اسکرول کردن، بالا و پایین می‌شود.

اچ‌تی‌ام‌ال

<nav class="joqd navbar sticky-navbar thick-navbar green white-text">
  <div class="joqd container-narrow">
    <!-- نوار چسبان است -->
  </div>
</nav>