Finder خرید قالب

سایدبار مخفی (Offcanvas)

میتوانید سایدبار های مخفی جهت ایجاد منو یا سبد خرید و غیره در پروژه خود استفاده نمایید.

مشاهده در سایت بوت استرپ

سمت چپ

کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.

سمت راست

کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.

سمت پایین

کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد.

اجزاء offcanvas

<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" id="offcanvas" tabindex="-1">

  <!-- Header -->
  <div class="offcanvas-header border-bottom">
    <h6 class="offcanvas-title">Menu</h6>
    <button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
  </div>

  <!-- Body -->
  <div class="offcanvas-body" data-simplebar>
    <ul class="nav flex-column">
      <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
      <li class="nav-item dropdown"><a class="nav-link" href="#">User Profile</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Services</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Our Works</a></li>
      <li class="nav-item"><a class="nav-link" href="#">About</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Our Team</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Vendor Dashboard</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Contacts</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Help Center</a></li>
      <li class="nav-item"><a class="nav-link" href="#">Support</a></li>
    </ul>
  </div>

  <!-- Footer -->
  <div class="offcanvas-footer border-top">
    <button class="btn btn-outline-primary btn-sm w-100 me-2" type="button">
      <i class="fi-login me-1"></i>
      Sign In
    </button>
    <button class="btn btn-primary btn-sm w-100" type="button">
      <i class="fi-user me-1"></i>
      Sign Up
    </button>
  </div>
</div>
// Offcanvas
.offcanvas.offcanvas-start(id="offcanvas", tabindex="-1")

  // Header
  .offcanvas-header.border-bottom
    h6.offcanvas-title Menu
    button(type="button", data-bs-dismiss="offcanvas").btn-close

  // Body
  .offcanvas-body(data-simplebar)
    ul.nav.flex-column
      li.nav-item
        a(href="#").nav-link.active
          | Home
      li.nav-item.dropdown
        a(href="#").nav-link
          | User Profile
      li.nav-item
        a(href="#").nav-link
          | Services
      li.nav-item
        a(href="#").nav-link
          | Our Works
      li.nav-item
        a(href="#").nav-link
          | About
      li.nav-item
        a(href="#").nav-link
          | Our Team
      li.nav-item
        a(href="#").nav-link
          | Vendor Dashboard
      li.nav-item
        a(href="#").nav-link
          | Contacts
      li.nav-item
        a(href="#").nav-link
          | Help Center
      li.nav-item
        a(href="#").nav-link
          | Support

  // Footer
  .offcanvas-footer.border-top
    button(type="button").btn.btn-outline-primary.btn-sm.w-100.me-2
      i.fi-login.me-1
      | Sign In
    button(type="button").btn.btn-primary.btn-sm.w-100
      i.fi-user.me-1
      | Sign Up

جهات مختلف

<!-- Offcanvas position: Left -->

<!-- Toogle button -->
<button class="btn btn-accent" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft">Toggle left offcanvas</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-start" id="offcanvasLeft" tabindex="-1">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title">Left offcanvas</h5>
    <button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body" data-simplebar>
    <p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
  </div>
</div>


<!-- Offcanvas position: Right -->

<!-- Toogle button -->
<button class="btn btn-accent" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight">Toggle right offcanvas</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-end" id="offcanvasRight" tabindex="-1">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title">Right offcanvas</h5>
    <button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body" data-simplebar>
    <p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
  </div>
</div>


<!-- Offcanvas position: Bottom -->

<!-- Toogle button -->
<button class="btn btn-accent" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom">Toggle bottom offcanvas</button>

<!-- Offcanvas -->
<div class="offcanvas offcanvas-bottom" id="offcanvasBottom" tabindex="-1">
  <div class="offcanvas-header border-bottom">
    <h5 class="offcanvas-title">Bottom offcanvas</h5>
    <button class="btn-close" type="button" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body" data-simplebar>
    <p class="fs-sm">Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.</p>
  </div>
</div>
// Offcanvas position: Left

// Toogle button
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#offcanvasLeft").btn.btn-accent
  | Toggle left offcanvas

// Offcanvas
.offcanvas.offcanvas-start(id="offcanvasLeft", tabindex="-1")
  .offcanvas-header.border-bottom
    h5.offcanvas-title Left offcanvas
    button(type="button", data-bs-dismiss="offcanvas").btn-close
  .offcanvas-body(data-simplebar)
    p.fs-sm Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.


// Offcanvas position: Right

// Toogle button
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#offcanvasRight").btn.btn-accent
  | Toggle right offcanvas

// Offcanvas
.offcanvas.offcanvas-end(id="offcanvasRight", tabindex="-1")
  .offcanvas-header.border-bottom
    h5.offcanvas-title Right offcanvas
    button(type="button", data-bs-dismiss="offcanvas").btn-close
  .offcanvas-body(data-simplebar)
    p.fs-sm Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.


// Offcanvas position: Bottom

// Toogle button
button(type="button", data-bs-toggle="offcanvas", data-bs-target="#offcanvasBottom").btn.btn-accent
  | Toggle bottom offcanvas

// Offcanvas
.offcanvas.offcanvas-bottom(id="offcanvasBottom", tabindex="-1")
  .offcanvas-header.border-bottom
    h5.offcanvas-title Bottom offcanvas
    button(type="button", data-bs-dismiss="offcanvas").btn-close
  .offcanvas-body(data-simplebar)
    p.fs-sm Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.

منو ریسپانسیو (Offcanvas)

<!-- Navbar with offcanvas menu on mobile -->
<header class="navbar navbar-expand-lg navbar-light bg-light shadow-sm">
  <div class="container">
    <a href="#" class="navbar-brand me-2 me-xl-4">
      <img class="d-block" src="path-to-logo-image" width="116" alt="Finder">
    </a>
    <button type="button" class="navbar-toggler ms-auto" data-bs-toggle="offcanvas" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <a href="#" class="btn btn-primary btn-sm ms-2 order-lg-3">
      <i class="fi-plus me-2"></i>
      Add<span class='d-none d-sm-inline'> listing</span>
    </a>
    <div class="offcanvas offcanvas-collapse order-lg-2" id="navbarNav">
      <div class="offcanvas-header shadow-sm">
        <h6 class="offcanvas-title">Menu</h6>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
      </div>
      <ul class="navbar-nav offcanvas-body mt-0 py-4 px-3 p-lg-0">
        <li class="nav-item active">
          <a href="#" class="nav-link">Home</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
          <ul class="dropdown-menu">
            <li>
              <a href="#" class="dropdown-item">Action link</a>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-item dropdown-toggle" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
              <ul class="dropdown-menu">
                <li>
                  <a href="#" class="dropdown-item">Action link</a>
                </li>
                <li>
                  <a href="#" class="dropdown-item">Another action</a>
                </li>
                <li>
                  <a href="#" class="dropdown-item">Something else here</a>
                </li>
                <li>
                  <a href="#" class="dropdown-item">Yet another link</a>
                </li>
              </ul>
            </li>
            <li>
              <a href="#" class="dropdown-item">Another action</a>
            </li>
            <li>
              <a href="#" class="dropdown-item">Something else here</a>
            </li>
          </ul>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link disabled" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</header>
// Navbar with offcanvas menu on mobile
header.navbar.navbar-expand-lg.navbar-light.bg-light.shadow-sm
  .container
    a(href="#").navbar-brand.me-2.me-xl-4
      img(src="path-to-logo-image", width="116", alt="Finder").d-block
    button(type="button", data-bs-toggle="offcanvas", data-bs-target="#navbarNav", aria-controls="navbarNav", aria-expanded="false", aria-label="Toggle navigation").navbar-toggler.ms-auto
      span.navbar-toggler-icon
    a(href="#").btn.btn-primary.btn-sm.ms-2.order-lg-3
      i.fi-plus.me-2
      | Add<span class="d-none d-sm-inline"> listing</span>
    #navbarNav.offcanvas.offcanvas-collapse.order-lg-2
      .offcanvas-header.shadow-sm
        h6.offcanvas-title Menu
        button(type="button", data-bs-dismiss="offcanvas").btn-close
      ul.navbar-nav.offcanvas-body.mt-0.py-4.px-3.p-lg-0
        li.nav-item.active
          a(href="#").nav-link
            | Home
        li.nav-item
          a(href="#").nav-link
            | Link
        li.nav-item.dropdown
          a(href="#", role="button", data-bs-toggle="dropdown", aria-expanded="false").nav-link.dropdown-toggle
            | Dropdown
          ul.dropdown-menu
            li
              a(href="#").dropdown-item
                | Action link
            li.dropdown
              a(href="#", role="button", data-bs-toggle="dropdown", aria-expanded="false").dropdown-item.dropdown-toggle
                | Dropdown
              ul.dropdown-menu
                li
                  a(href="#").dropdown-item
                    | Action link
                li
                  a(href="#").dropdown-item
                    | Another action
                li
                  a(href="#").dropdown-item
                    | Something else here
                li
                  a(href="#").dropdown-item
                    | Yet another link
            li
              a(href="#").dropdown-item
                | Another action
            li
              a(href="#").dropdown-item
                | Something else here
        li.nav-item
          a(href="#", tabindex="-1", aria-disabled="true").nav-link.disabled
            | Disabled
بالا