CSS樣式設計

接下來，我們將使用CSS來設計導航欄的樣式。以下是一些基本的CSS屬性，用于創建一個左邊導航欄：

/* 基本樣式 */
.sidebar {
    width: 200px; /* 導航欄寬度 */
    height: 100vh; /* 高度占滿視口 */
    background-color: #333; /* 背景顏色 */
    position: fixed; /* 固定位置 */
    left: 0; /* 左邊對齊 */
    top: 0; /* 頂部對齊 */
    overflow-x: hidden; /* 隱藏水平滾動條 */
}

/* 列表和鏈接樣式 */
.sidebar ul {
    list-style-type: none; /* 移除列表項標記 */
    padding: 0;
    margin: 0;
}

.sidebar li {
    padding: 10px 20px; /* 內邊距 */
}

.sidebar a {
    text-decoration: none; /* 移除下劃線 */
    color: white; /* 文字顏色 */
    display: block; /* 鏈接顯示為塊級元素 */
    transition: background-color 0.3s; /* 背景顏色變化過渡效果 */
}

/* 鼠標懸停效果 */
.sidebar a:hover {
    background-color: #555; /* 鼠標懸停時的背景顏色 */
}

響應式設計

為了確保導航欄在不同設備上都能良好顯示，我們可以使用媒體查詢來實現響應式設計：

@media (max-width: 768px) {
    .sidebar {
        width: 100%; /* 在小屏幕上全屏顯示 */
        height: auto; /* 高度自適應 */
        position: relative; /* 取消固定位置 */
    }
}

交互性增強

為了提高用戶體驗，我們可以為導航欄添加一些交互效果，例如，使用JavaScript或CSS來實現點擊時展開/收起子菜單的功能。

結語

通過上述步驟，你可以創建一個基本的左邊導航欄。CSS的強大功能允許你進一步定制導航欄的樣式和行為，以滿足你的設計需求。記得在設計過程中考慮用戶體驗和可訪問性，確保你的導航欄既美觀又實用。

請注意，這只是一個基本的示例，實際應用中可能需要根據具體需求進行調整和優化。