頁首 (Header)

  • 新提案
  • 封閉測試
  • 公開測試
  • 已穩定
成熟度說明
  • 新提案:未完成開發、請勿使用。
  • 封閉測試:開發暫時性完成,可使用。可能仍有親和力或其他使用上問題待透過實測發現。
  • 公開測試:開發暫時性完成,歡迎使用。具有完整親和力報告。
  • 已穩定:開發完成、歡迎使用。應無任何親和力或使用上問題。

基本頁首

  • 頁首包含網站 logo、導覽列,幫助使用者快速了解網站內容和瀏覽不同頁面。
HTML
<header class="headerfordemo" data-module="header">
    <div class="header-top">
        <div class="width-container header-top-container">
            <div class="header-actions">
                <a href="#" class="header-link small-text">網站導覽</a>
                <a href="#" class="header-link small-text" lang="zh-TW">中文</a>
                <a href="#" class="header-link small-text" lang="en">英文</a>
            </div>
        </div>
    </div>
    <div class="header-divider width-container"></div>
    <div class="header-bottom">
        <div class="width-container">
            <div class="header-logo">
                <a href="#" class="header-link">
                    <img src="https://guide.nics.nat.gov.tw/assets/favicon.png" alt="網站標誌" class="header-logotype">
                </a>
            </div>
        </div>
    </div>
</header>

頁首與導覽列

HTML
<header class="headerfordemo" data-module="header">
    <div class="header-top">
        <div class="width-container header-top-container">
            <div class="header-actions">
                <a href="#" class="header-link small-text">網站導覽</a>
                <a href="#" class="header-link small-text" lang="zh-TW">中文</a>
                <a href="#" class="header-link small-text" lang="en">英文</a>
            </div>
        </div>
    </div>
    <div class="header-divider width-container"></div>
    <div class="header-bottom">
        <div class="width-container header-container">
            <div class="header-logo">
                <a href="#" class="header-link">
                    <img src="https://guide.nics.nat.gov.tw/assets/favicon.png" alt="網站標誌" class="header-logotype">
                </a>
            </div>
            <button class="header-menu-button" aria-controls="navigation" aria-expanded="false"
                aria-label="Toggle navigation"></button>
            <div class="header-content">
                    <a href="#" class="header-link service-name">Service name 1 </a>
                    <a href="#" class="header-link service-name">Service name 2 </a>
                    <a href="#" class="header-link service-name">Service name 3 </a>
                <!-- Additional links for mobile view -->
                <div class="header-additional-links">
                    <div class="header-divider width-container"></div>
                    <div class="header-actions-row">
                        <a href="#" class="header-link small-text">網站導覽</a>
                        <a href="#" class="header-link small-text">中文</a>
                        <a href="#" class="header-link small-text">英文</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>