<!-- 一組導覽列,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); }