WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

3-7. Offcanvas 運用「畫布」設計手機版的側邊滑動選單

資料參考： Bootstrap說明網站(中) 、 w3schools(英) 、 RUNOOB(中)

複製Offcanvas的基本結構再加以修改

<!-- 手機版時側邊滑動選單區域 -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="mobilMenu" aria-labelledby="mobilMenuLabel">

  <!-- 側邊選單的header區域 -->
  <div class="offcanvas-header">
    <h2 class="offcanvas-title" id="mobilMenuLabel">蒂莫絲保養品</h2>
    <button type="button" class="btn-close text-reset" 
            data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>

  <!-- 側邊選單的body區域 -->
  <div class="offcanvas-body">
    <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
      <li class="nav-item"><a class="nav-link" aria-current="page" href="#sec1">最新消息</a></li>
      <li class="nav-item"><a class="nav-link" href="#sec2">新品介紹</a></li>
      <li class="nav-item"><a class="nav-link" href="#sec3">商品推薦</a></li>
      <li class="nav-item"><a class="nav-link" href="#sec4">保養有道</a></li>
      <li class="nav-item"><a class="nav-link" href="#sec5">聯絡我們</a></li>
    </ul>
  </div>

</div>

更換手機版控制選單的按鈕

原來的按鈕

  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 
      data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" 
      aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
  </button>

調整更換按鈕成以下

  <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas"  
          data-bs-target="#sidebarmenu" aria-controls="sidebarmenu">
          <span class="navbar-toggler-icon"></span>
  </button>

調整 CSS 樣式設計 (以下參考使用, 不一定要相同的設定)

.offcanvas { 
  background-image: url(img/sec2_f2.png), url(img/body_bg.png); 
  background-repeat: no-repeat, repeat; 
  background-position: right bottom; 
  background-size: 70% auto, 100% auto;
}
.offcanvas-end { width: 82%; box-shadow: -10vw 0 10vw var(--c-black-05); }
.offcanvas-header h2 { font-weight: bold; }
.offcanvas-body { 
  background: url(img/shadow1.png) no-repeat center top; 
  background-size: 120% auto;  
}
.navbar-dark .offcanvas-body .navbar-nav .nav-link { 
  color: var(--c-black); text-align: center; 
  line-height: 1.8; font-size: 18px!important; 
}
.offcanvas-header .btn-close { padding: 1.5rem 1.5rem; }

 

 

go TOP