WEB
<!-- 一組導覽列，lg 991px md 767px 以下會轉為手機版 -->
<!-- navbar-light 是配合亮底版面字為黑色，navbar-dark 是配合暗底版面字為白色 -->
<!-- bg-light 才是背景顏色,不需要刪除, fixed-top 固定畫面上方 -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<!-- 設定區域範圍 -->
<div class="container-xl">
<!-- 表現LOGO連結的區域，可以加上LOGO圖片 -->
<a class="navbar-brand" href="#">
<img src="./img/logo.png" width="80" alt=""> 蒂莫絲保養品
</a>
<!-- 以下是手機版才出現的按鈕，負責控制顯示導覽選單 -->
<!-- 注意：data-bs-target的名字必須與可收合部份的ID相同 -->
<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>
<!-- 以下區域是在手機版會收合的選單部份 -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- 這是一組選單，me-auto負責margin都在右邊，ms-auto負責margin都在左邊 -->
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" 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>
<!-- 含有下拉式選單的按鈕項目START (不要就刪除) -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
data-bs-toggle="dropdown" aria-expanded="false"> Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<!-- 含有下拉式選單的按鈕項目END -->
<!-- 這是一個不能按的按鈕項目 (不要就刪除) -->
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<!-- 這是一個表單，可以是搜尋用的表單 (不要就刪除) -->
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
<!-- 手機版可收合的選單部份END -->
</div>
<!-- 區域範圍END -->
</nav>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500&family=Righteous&display=swap');
:root {
--c-gray1: #222;
--c-gray2: #999;
--c-gray3: #ddd;
--c-nav-10: rgba(50, 15, 60, 1);
--c-nav-05: rgba(50, 15, 60, 0.5);
--c-nav-00: rgba(50, 15, 60, 0);
--c-assist1: rgba(76, 18, 92, 1);
--c-assist1-07: rgba(76, 18, 92, 0.7);
--c-assist2: rgba(103, 35, 122, 1);
--c-assist2-03: rgba(103, 35, 122, 0.3);
--c-assist2-01: rgba(103, 35, 122, 0.1);
--c-assist2-00: rgba(103, 35, 122, 0);
--c-red: #f00;
--c-black: #000;
--c-black-05: rgba(0, 0, 0, 0.5);;
--c-white: #fff;
--c-white-08: rgba(255, 255, 255, 0.8);
--c-white-06: rgba(255, 255, 255, 0.6);
--f-family-1: 'Righteous', 'Noto Sans TC', sans-serif;
}
/* min()函數負責二個數值取最小值，calc()可以計算不同單位的運算 */
.navbar-brand { font-size: min( calc(18px + 1vw) , 30px); font-weight: bold; }
.navbar-brand img { width: calc(50px + 1vw); }
/* var()函數負責取用變數的值 */
header.fixedtop { background-color: var(--c-nav-05); }
/* 以下設計桌機版時需要調整的部份 ====================================== */
@media (min-width: 768px){
header {
transition: 1s; background: var(--c-nav-05);
/* linear-gradient()函數負責設計線性漸層色彩 */
/* linear-gradient( 角度決定漸層方向, 色彩1 色彩1的位置, 色彩2, 色彩2的位置, ... ) */
background: linear-gradient(180deg, var(---c-nav-10) 0%, var(--c-nav-05) 50%, var(--c-nav-00) 90%);
}
header:hover { background-color: var(--c-nav-10); }
}
針對滑動監聽時，按鈕上的變化，CSS設計上的調整參考如下：
.navbar-dark .navbar-toggler {
border-color: var(--c-white-06);
padding: 0.25rem 0.5rem;
}
.navbar-dark .navbar-nav .nav-link {
color: var(--c-white-08);
font-size: min( calc(15px + .15vw) , 18px);
}
.navbar-dark .navbar-nav .nav-link.active, .navbar-dark .navbar-nav .show>.nav-link {
font-weight: bold;
font-size: min( calc(15px + .2vw) , 20px);
transform: translateY(-1px);
}