<!-- 手機版時側邊滑動選單區域 --> <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>
.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; }