774 lines
25 KiB
HTML
774 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-TW">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>導航元件 - Drama Ling Component Library</title>
|
||
<link rel="stylesheet" href="../../assets/styles/base.css">
|
||
<link rel="stylesheet" href="../../assets/styles/components.css">
|
||
<style>
|
||
/* Navigation Components Specific Styles */
|
||
|
||
/* Navbar */
|
||
.navbar {
|
||
background: var(--white);
|
||
border-bottom: 1px solid var(--gray-200);
|
||
padding: 0;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.navbar-container {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 1rem 1.5rem;
|
||
max-width: 1280px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.navbar-brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
font-size: 1.25rem;
|
||
font-weight: 600;
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.navbar-logo {
|
||
width: 32px;
|
||
height: 32px;
|
||
background: var(--primary);
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: white;
|
||
}
|
||
|
||
.navbar-nav {
|
||
display: flex;
|
||
gap: 2rem;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.navbar-link {
|
||
color: var(--gray-700);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
padding: 0.5rem 0;
|
||
border-bottom: 2px solid transparent;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.navbar-link:hover {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.navbar-link.active {
|
||
color: var(--primary);
|
||
border-bottom-color: var(--primary);
|
||
}
|
||
|
||
.navbar-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 1rem;
|
||
}
|
||
|
||
/* Sidebar */
|
||
.sidebar {
|
||
background: var(--white);
|
||
border-right: 1px solid var(--gray-200);
|
||
width: 260px;
|
||
height: 100vh;
|
||
overflow-y: auto;
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
}
|
||
|
||
.sidebar-header {
|
||
padding: 1.5rem;
|
||
border-bottom: 1px solid var(--gray-200);
|
||
}
|
||
|
||
.sidebar-menu {
|
||
padding: 1rem 0;
|
||
}
|
||
|
||
.sidebar-section {
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.sidebar-section-title {
|
||
padding: 0.5rem 1.5rem;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
color: var(--gray-500);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.sidebar-item {
|
||
display: block;
|
||
padding: 0.75rem 1.5rem;
|
||
color: var(--gray-700);
|
||
text-decoration: none;
|
||
transition: all 0.2s;
|
||
position: relative;
|
||
}
|
||
|
||
.sidebar-item:hover {
|
||
background: var(--gray-50);
|
||
color: var(--primary);
|
||
}
|
||
|
||
.sidebar-item.active {
|
||
background: var(--primary-50);
|
||
color: var(--primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.sidebar-item.active::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 3px;
|
||
background: var(--primary);
|
||
}
|
||
|
||
.sidebar-icon {
|
||
display: inline-flex;
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 0.75rem;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
.sidebar-item:hover .sidebar-icon,
|
||
.sidebar-item.active .sidebar-icon {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Breadcrumb */
|
||
.breadcrumb {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
padding: 1rem 0;
|
||
font-size: 0.875rem;
|
||
}
|
||
|
||
.breadcrumb-item {
|
||
color: var(--gray-600);
|
||
text-decoration: none;
|
||
transition: color 0.2s;
|
||
}
|
||
|
||
.breadcrumb-item:hover {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.breadcrumb-separator {
|
||
color: var(--gray-400);
|
||
}
|
||
|
||
.breadcrumb-current {
|
||
color: var(--gray-900);
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* Tabs */
|
||
.tabs {
|
||
border-bottom: 1px solid var(--gray-200);
|
||
}
|
||
|
||
.tabs-list {
|
||
display: flex;
|
||
gap: 2rem;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.tab-item {
|
||
position: relative;
|
||
padding: 1rem 0;
|
||
color: var(--gray-600);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
transition: color 0.2s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.tab-item:hover {
|
||
color: var(--gray-900);
|
||
}
|
||
|
||
.tab-item.active {
|
||
color: var(--primary);
|
||
}
|
||
|
||
.tab-item.active::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -1px;
|
||
left: 0;
|
||
right: 0;
|
||
height: 2px;
|
||
background: var(--primary);
|
||
}
|
||
|
||
.tab-badge {
|
||
background: var(--gray-100);
|
||
color: var(--gray-600);
|
||
padding: 0.125rem 0.5rem;
|
||
border-radius: 12px;
|
||
font-size: 0.75rem;
|
||
margin-left: 0.5rem;
|
||
}
|
||
|
||
.tab-item.active .tab-badge {
|
||
background: var(--primary-100);
|
||
color: var(--primary);
|
||
}
|
||
|
||
/* Pagination */
|
||
.pagination {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.pagination-item {
|
||
min-width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border: 1px solid var(--gray-200);
|
||
border-radius: 8px;
|
||
color: var(--gray-700);
|
||
text-decoration: none;
|
||
font-weight: 500;
|
||
transition: all 0.2s;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.pagination-item:hover {
|
||
background: var(--gray-50);
|
||
border-color: var(--gray-300);
|
||
}
|
||
|
||
.pagination-item.active {
|
||
background: var(--primary);
|
||
border-color: var(--primary);
|
||
color: white;
|
||
}
|
||
|
||
.pagination-item.disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.pagination-ellipsis {
|
||
color: var(--gray-400);
|
||
padding: 0 0.5rem;
|
||
}
|
||
|
||
/* Stepper */
|
||
.stepper {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.stepper-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.stepper-item:not(:last-child)::after {
|
||
content: '';
|
||
position: absolute;
|
||
left: 2.5rem;
|
||
right: -50%;
|
||
height: 2px;
|
||
background: var(--gray-200);
|
||
top: 1.25rem;
|
||
z-index: 0;
|
||
}
|
||
|
||
.stepper-item.completed:not(:last-child)::after {
|
||
background: var(--success);
|
||
}
|
||
|
||
.stepper-circle {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: var(--gray-100);
|
||
border: 2px solid var(--gray-300);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-weight: 600;
|
||
color: var(--gray-600);
|
||
position: relative;
|
||
z-index: 1;
|
||
}
|
||
|
||
.stepper-item.active .stepper-circle {
|
||
background: var(--primary);
|
||
border-color: var(--primary);
|
||
color: white;
|
||
}
|
||
|
||
.stepper-item.completed .stepper-circle {
|
||
background: var(--success);
|
||
border-color: var(--success);
|
||
color: white;
|
||
}
|
||
|
||
.stepper-content {
|
||
margin-left: 1rem;
|
||
}
|
||
|
||
.stepper-title {
|
||
font-weight: 600;
|
||
color: var(--gray-900);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.stepper-description {
|
||
font-size: 0.875rem;
|
||
color: var(--gray-600);
|
||
}
|
||
|
||
/* Mobile Menu */
|
||
.mobile-menu-toggle {
|
||
display: none;
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 1px solid var(--gray-200);
|
||
border-radius: 8px;
|
||
background: white;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.mobile-menu-icon {
|
||
width: 24px;
|
||
height: 24px;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.navbar-nav {
|
||
display: none;
|
||
}
|
||
|
||
.mobile-menu-toggle {
|
||
display: flex;
|
||
}
|
||
|
||
.navbar-nav.mobile-active {
|
||
display: flex;
|
||
flex-direction: column;
|
||
position: absolute;
|
||
top: 100%;
|
||
left: 0;
|
||
right: 0;
|
||
background: white;
|
||
border-bottom: 1px solid var(--gray-200);
|
||
padding: 1rem;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>🧭 導航元件</h1>
|
||
<p>導航欄、側邊欄、分頁標籤、麵包屑等導航元件</p>
|
||
<a href="../../index.html" class="btn btn-secondary">← 返回主頁</a>
|
||
</div>
|
||
|
||
<!-- Navbar -->
|
||
<section class="component-section">
|
||
<h2>導航欄 (Navbar)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<nav class="navbar">
|
||
<div class="navbar-container">
|
||
<a href="#" class="navbar-brand">
|
||
<div class="navbar-logo">🎭</div>
|
||
<span>Drama Ling</span>
|
||
</a>
|
||
|
||
<ul class="navbar-nav">
|
||
<li><a href="#" class="navbar-link active">首頁</a></li>
|
||
<li><a href="#" class="navbar-link">學習</a></li>
|
||
<li><a href="#" class="navbar-link">練習</a></li>
|
||
<li><a href="#" class="navbar-link">成就</a></li>
|
||
<li><a href="#" class="navbar-link">商店</a></li>
|
||
</ul>
|
||
|
||
<div class="navbar-actions">
|
||
<button class="btn btn-secondary">登入</button>
|
||
<button class="btn btn-primary">註冊</button>
|
||
</div>
|
||
|
||
<button class="mobile-menu-toggle">
|
||
<span class="mobile-menu-icon">☰</span>
|
||
</button>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><nav class="navbar">
|
||
<div class="navbar-container">
|
||
<a href="#" class="navbar-brand">
|
||
<div class="navbar-logo">🎭</div>
|
||
<span>Drama Ling</span>
|
||
</a>
|
||
|
||
<ul class="navbar-nav">
|
||
<li><a href="#" class="navbar-link active">首頁</a></li>
|
||
<li><a href="#" class="navbar-link">學習</a></li>
|
||
<li><a href="#" class="navbar-link">練習</a></li>
|
||
</ul>
|
||
|
||
<div class="navbar-actions">
|
||
<button class="btn btn-secondary">登入</button>
|
||
<button class="btn btn-primary">註冊</button>
|
||
</div>
|
||
</div>
|
||
</nav></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Sidebar -->
|
||
<section class="component-section">
|
||
<h2>側邊欄 (Sidebar)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview" style="height: 500px; position: relative; overflow: hidden;">
|
||
<aside class="sidebar" style="position: absolute;">
|
||
<div class="sidebar-header">
|
||
<div class="navbar-brand">
|
||
<div class="navbar-logo">🎭</div>
|
||
<span>Drama Ling</span>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="sidebar-menu">
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-section-title">主要功能</div>
|
||
<a href="#" class="sidebar-item active">
|
||
<span class="sidebar-icon">🏠</span>
|
||
儀表板
|
||
</a>
|
||
<a href="#" class="sidebar-item">
|
||
<span class="sidebar-icon">📚</span>
|
||
詞彙學習
|
||
</a>
|
||
<a href="#" class="sidebar-item">
|
||
<span class="sidebar-icon">🗣️</span>
|
||
口說練習
|
||
</a>
|
||
<a href="#" class="sidebar-item">
|
||
<span class="sidebar-icon">💬</span>
|
||
情境對話
|
||
</a>
|
||
</div>
|
||
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-section-title">個人</div>
|
||
<a href="#" class="sidebar-item">
|
||
<span class="sidebar-icon">👤</span>
|
||
個人檔案
|
||
</a>
|
||
<a href="#" class="sidebar-item">
|
||
<span class="sidebar-icon">🏆</span>
|
||
成就系統
|
||
</a>
|
||
<a href="#" class="sidebar-item">
|
||
<span class="sidebar-icon">⚙️</span>
|
||
設定
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
</aside>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><aside class="sidebar">
|
||
<div class="sidebar-header">
|
||
<div class="navbar-brand">
|
||
<div class="navbar-logo">🎭</div>
|
||
<span>Drama Ling</span>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="sidebar-menu">
|
||
<div class="sidebar-section">
|
||
<div class="sidebar-section-title">主要功能</div>
|
||
<a href="#" class="sidebar-item active">
|
||
<span class="sidebar-icon">🏠</span>
|
||
儀表板
|
||
</a>
|
||
<a href="#" class="sidebar-item">
|
||
<span class="sidebar-icon">📚</span>
|
||
詞彙學習
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
</aside></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Breadcrumb -->
|
||
<section class="component-section">
|
||
<h2>麵包屑 (Breadcrumb)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<nav class="breadcrumb">
|
||
<a href="#" class="breadcrumb-item">首頁</a>
|
||
<span class="breadcrumb-separator">›</span>
|
||
<a href="#" class="breadcrumb-item">學習中心</a>
|
||
<span class="breadcrumb-separator">›</span>
|
||
<a href="#" class="breadcrumb-item">詞彙學習</a>
|
||
<span class="breadcrumb-separator">›</span>
|
||
<span class="breadcrumb-current">第一課</span>
|
||
</nav>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><nav class="breadcrumb">
|
||
<a href="#" class="breadcrumb-item">首頁</a>
|
||
<span class="breadcrumb-separator">›</span>
|
||
<a href="#" class="breadcrumb-item">學習中心</a>
|
||
<span class="breadcrumb-separator">›</span>
|
||
<span class="breadcrumb-current">第一課</span>
|
||
</nav></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Tabs -->
|
||
<section class="component-section">
|
||
<h2>分頁標籤 (Tabs)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="tabs">
|
||
<ul class="tabs-list">
|
||
<li>
|
||
<a href="#" class="tab-item active">
|
||
總覽
|
||
<span class="tab-badge">12</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="tab-item">
|
||
詞彙
|
||
<span class="tab-badge">48</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="tab-item">
|
||
口說
|
||
<span class="tab-badge">5</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="tab-item">
|
||
對話
|
||
<span class="tab-badge">8</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="tab-item">設定</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><div class="tabs">
|
||
<ul class="tabs-list">
|
||
<li>
|
||
<a href="#" class="tab-item active">
|
||
總覽
|
||
<span class="tab-badge">12</span>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="#" class="tab-item">
|
||
詞彙
|
||
<span class="tab-badge">48</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Pagination -->
|
||
<section class="component-section">
|
||
<h2>分頁 (Pagination)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<nav class="pagination">
|
||
<a href="#" class="pagination-item disabled">
|
||
‹
|
||
</a>
|
||
<a href="#" class="pagination-item">1</a>
|
||
<a href="#" class="pagination-item active">2</a>
|
||
<a href="#" class="pagination-item">3</a>
|
||
<a href="#" class="pagination-item">4</a>
|
||
<span class="pagination-ellipsis">...</span>
|
||
<a href="#" class="pagination-item">12</a>
|
||
<a href="#" class="pagination-item">
|
||
›
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><nav class="pagination">
|
||
<a href="#" class="pagination-item disabled">‹</a>
|
||
<a href="#" class="pagination-item">1</a>
|
||
<a href="#" class="pagination-item active">2</a>
|
||
<a href="#" class="pagination-item">3</a>
|
||
<span class="pagination-ellipsis">...</span>
|
||
<a href="#" class="pagination-item">12</a>
|
||
<a href="#" class="pagination-item">›</a>
|
||
</nav></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Stepper -->
|
||
<section class="component-section">
|
||
<h2>步驟指示器 (Stepper)</h2>
|
||
<div class="component-showcase">
|
||
<div class="showcase-preview">
|
||
<div class="stepper">
|
||
<div class="stepper-item completed">
|
||
<div class="stepper-circle">✓</div>
|
||
<div class="stepper-content">
|
||
<div class="stepper-title">基本資料</div>
|
||
<div class="stepper-description">填寫個人資訊</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stepper-item active">
|
||
<div class="stepper-circle">2</div>
|
||
<div class="stepper-content">
|
||
<div class="stepper-title">學習目標</div>
|
||
<div class="stepper-description">選擇學習方向</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stepper-item">
|
||
<div class="stepper-circle">3</div>
|
||
<div class="stepper-content">
|
||
<div class="stepper-title">程度評估</div>
|
||
<div class="stepper-description">測試您的程度</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stepper-item">
|
||
<div class="stepper-circle">4</div>
|
||
<div class="stepper-content">
|
||
<div class="stepper-title">完成</div>
|
||
<div class="stepper-description">開始學習</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="showcase-code">
|
||
<pre><code><div class="stepper">
|
||
<div class="stepper-item completed">
|
||
<div class="stepper-circle">✓</div>
|
||
<div class="stepper-content">
|
||
<div class="stepper-title">基本資料</div>
|
||
<div class="stepper-description">填寫個人資訊</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="stepper-item active">
|
||
<div class="stepper-circle">2</div>
|
||
<div class="stepper-content">
|
||
<div class="stepper-title">學習目標</div>
|
||
<div class="stepper-description">選擇學習方向</div>
|
||
</div>
|
||
</div>
|
||
</div></code></pre>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="footer">
|
||
<p>© 2024 Drama Ling. Component Library v1.0</p>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// Tab switching functionality
|
||
document.querySelectorAll('.tab-item').forEach(tab => {
|
||
tab.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
|
||
// Remove active class from all tabs
|
||
document.querySelectorAll('.tab-item').forEach(t => {
|
||
t.classList.remove('active');
|
||
});
|
||
|
||
// Add active class to clicked tab
|
||
this.classList.add('active');
|
||
});
|
||
});
|
||
|
||
// Mobile menu toggle
|
||
const mobileToggle = document.querySelector('.mobile-menu-toggle');
|
||
const navbarNav = document.querySelector('.navbar-nav');
|
||
|
||
if (mobileToggle) {
|
||
mobileToggle.addEventListener('click', function() {
|
||
navbarNav.classList.toggle('mobile-active');
|
||
});
|
||
}
|
||
|
||
// Pagination click handling
|
||
document.querySelectorAll('.pagination-item:not(.disabled)').forEach(item => {
|
||
item.addEventListener('click', function(e) {
|
||
e.preventDefault();
|
||
|
||
// Remove active class from all items
|
||
document.querySelectorAll('.pagination-item').forEach(i => {
|
||
i.classList.remove('active');
|
||
});
|
||
|
||
// Add active class to clicked item
|
||
if (!this.textContent.includes('‹') && !this.textContent.includes('›')) {
|
||
this.classList.add('active');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |