阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈
小編精選 - 技術文章翻譯  ·  06月13日

僅使用 HTML 和 CSS 建立側邊欄選單

僅使用 HTML 和 CSS 建立側邊欄選單

如果您是 Web 開發新手，您可能在不同網站上看過側邊欄。您是否想知道它們是如何僅使用 HTML 和 CSS 建立的？僅使用 HTML 和 CSS 製作側邊欄是學習網頁設計基礎知識和獲得實務經驗的好方法。

在這篇文章中，我將指導您僅使用HTML和CSS建立響應式側邊欄。最初，側邊欄將被隱藏，僅顯示每個連結的圖示。但是，將滑鼠懸停在側邊欄上將平滑展開以顯示與每個圖示關聯的連結。

為了建立這個側邊欄，我們將使用基本的 HTML 語意元素，例如<aside> 、 <ul> 、 <li>和<a>以及常見的 CSS 屬性來設定其樣式。這是一個簡單的專案，因此您應該毫無困難地遵循這些步驟或理解程式碼。

HTML 和 CSS 中的響應式側邊欄選單影片教學

https://www.youtube.com/watch?v=VU74s-XAn7M

如果您喜歡從影片教學中學習，上面的 YouTube 影片是一個很好的資源。在本影片中，我解釋了每一行程式碼並提供了資訊豐富的註釋，以使建立 HTML 側邊欄的過程易於遵循，尤其是對於初學者而言。

但是，如果您喜歡閱讀部落格文章或需要此專案的逐步指南，您可以繼續閱讀這篇文章。

在 HTML 和 CSS 中建立響應式側邊欄的步驟

若要僅使用 HTML 和 CSS 建立響應式側邊欄，請按照以下簡單的逐步說明進行操作：

  • 首先，建立一個具有任何您喜歡的名稱的資料夾。然後，在其中建立必要的文件。

  • 建立一個名為index.html的檔案作為主檔案。

  • 為 CSS 程式碼建立一個名為style.css檔案。

  • 最後，下載Images資料夾並將其放置在您的專案目錄中。該資料夾包含該側邊欄專案所需的所有圖像。

首先，將以下 HTML 程式碼新增至您的index.html檔案： 此程式碼包含具有不同語意標籤（如<aside> 、 <ul> 、 <li>和<a>的基本HTML 標記，用於建立我們的側邊欄佈局。

<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sidebar Menu HTML and CSS | CodingNepal</title>
    <!-- Linking Google Font Link For Icons -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <aside class="sidebar">
      <div class="sidebar-header">
        <img src="images/logo.png" alt="logo" />
        <h2>CodingLab</h2>
      </div>
      <ul class="sidebar-links">
        <h4>
          <span>Main Menu</span>
          <div class="menu-separator"></div>
        </h4>
        <li>
          <a href="#">
            <span class="material-symbols-outlined"> dashboard </span
            >Dashboard</a
          >
        </li>
        <li>
          <a href="#"
            ><span class="material-symbols-outlined"> overview </span
            >Overview</a
          >
        </li>
        <li>
          <a href="#"
            ><span class="material-symbols-outlined"> monitoring </span
            >Analytic</a
          >
        </li>
        <h4>
          <span>General</span>
          <div class="menu-separator"></div>
        </h4>
        <li>
          <a href="#"
            ><span class="material-symbols-outlined"> folder </span>Projects</a
          >
        </li>
        <li>
          <a href="#"
            ><span class="material-symbols-outlined"> groups </span>Groups</a
          >
        </li>
        <li>
          <a href="#"
            ><span class="material-symbols-outlined"> move_up </span>Transfer</a
          >
        </li>
        <li>
          <a href="#"
            ><span class="material-symbols-outlined"> flag </span>All Reports</a
          >
        </li>
        <li>
          <a href="#"
            ><span class="material-symbols-outlined">
              notifications_active </span
            >Notifications</a
          >
        </li>
        <h4>
          <span>Account</span>
          <div class="menu-separator"></div>
        </h4>
        <li>
          <a href="#"
            ><span class="material-symbols-outlined"> account_circle </span
            >Profile</a
          >
        </li>
        <li>
          <a href="#"
            ><span class="material-symbols-outlined"> settings </span
            >Settings</a
          >
        </li>
        <li>
          <a href="#"
            ><span class="material-symbols-outlined"> logout </span>Logout</a
          >
        </li>
      </ul>
      <div class="user-account">
        <div class="user-profile">
          <img src="images/profile-img.jpg" alt="Profile Image" />
          <div class="user-detail">
            <h3>Eva Murphy</h3>
            <span>Web Developer</span>
          </div>
        </div>
      </div>
    </aside>
  </body>
</html>

接下來，將以下 CSS 程式碼新增至您的style.css檔案中，以使您的側邊欄實用且具有視覺吸引力。請隨意嘗試不同的 CSS 屬性，例如顏色、字體、背景等，以使您的側邊欄更具吸引力。

/* Importing Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body {
  min-height: 100vh;
  background: #F0F4FF;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 85px;
  display: flex;
  overflow-x: hidden;
  flex-direction: column;
  background: #161a2d;
  padding: 25px 20px;
  transition: all 0.4s ease;
}

.sidebar:hover {
  width: 260px;
}

.sidebar .sidebar-header {
  display: flex;
  align-items: center;
}

.sidebar .sidebar-header img {
  width: 42px;
  border-radius: 50%;
}

.sidebar .sidebar-header h2 {
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 23px;
}

.sidebar-links h4 {
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  margin: 10px 0;
  position: relative;
}

.sidebar-links h4 span {
  opacity: 0;
}

.sidebar:hover .sidebar-links h4 span {
  opacity: 1;
}

.sidebar-links .menu-separator {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  transform: scaleX(1);
  transform: translateY(-50%);
  background: #4f52ba;
  transform-origin: right;
  transition-delay: 0.2s;
}

.sidebar:hover .sidebar-links .menu-separator {
  transition-delay: 0s;
  transform: scaleX(0);
}

.sidebar-links {
  list-style: none;
  margin-top: 20px;
  height: 80%;
  overflow-y: auto;
  scrollbar-width: none;
}

.sidebar-links::-webkit-scrollbar {
  display: none;
}

.sidebar-links li a {
  display: flex;
  align-items: center;
  gap: 0 20px;
  color: #fff;
  font-weight: 500;
  white-space: nowrap;
  padding: 15px 10px;
  text-decoration: none;
  transition: 0.2s ease;
}

.sidebar-links li a:hover {
  color: #161a2d;
  background: #fff;
  border-radius: 4px;
}

.user-account {
  margin-top: auto;
  padding: 12px 10px;
  margin-left: -10px;
}

.user-profile {
  display: flex;
  align-items: center;
  color: #161a2d;
}

.user-profile img {
  width: 42px;
  border-radius: 50%;
  border: 2px solid #fff;
}

.user-profile h3 {
  font-size: 1rem;
  font-weight: 600;
}

.user-profile span {
  font-size: 0.775rem;
  font-weight: 600;
}

.user-detail {
  margin-left: 23px;
  white-space: nowrap;
}

.sidebar:hover .user-account {
  background: #fff;
  border-radius: 4px;
}

結論和最後的話

對於 Web 開發初學者來說，使用 HTML 和 CSS 建立響應式側邊欄是一項可以完成的任務。透過遵循本文中提供的步驟和程式碼，您應該能夠成功建立自己的響應式和功能性側邊欄。

為了進一步提高您的網頁開發技能，我建議您嘗試重新建立本網站上提供的其他漂亮的側邊欄。其中一些側邊欄使用 JavaScript 來增強其功能，例如加入深色模式、下拉式選單等。

如果您在建立側邊欄時遇到任何問題，可以透過點擊「下載」按鈕免費下載專案的原始碼檔案。您也可以透過點擊“查看即時”按鈕來查看它的即時演示。

查看現場演示

下載程式碼文件

原文出處：https://dev.to/codingnepal/create-a-sidebar-menu-using-html-and-css-only-2e79

0個讚   0留言 877瀏覽
共有 0 則留言
登入之後發表留言
小編精選 - 技術文章翻譯
精選技術文章翻譯，幫助開發者持續吸收新知。

阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈
熱門文章
🔥 20 個 TypeScript 技巧 🚀
🔥 提升 MySQL InnoDB 緩衝池效能的小技巧
🔥 10 個最佳 Visual Studio Code 擴充
🔥 為什麼 React 元件需要以大寫字母開頭？
🔥 我測試了 OpenAI 的 o1-preview 幾個小時——你不會相信我的發現🤯
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式
熱門搜尋： 使用 開發 工作 ui 專案 ar javascript JavaScript 第一 分享 學習 Git id 網站 css for Ml COM 技術 搜尋 console 基礎 git 作為 js 作業 html 語言 ＣＳＳ 結構 JS 測試 網頁 研究 後端 Ai 架構 前端 jav JAVA app api Github 系列 Can ul CD %' Java javasc AI 工程師 ci github this java go GIT 框架 Javas 套件 資料庫 主題 react 清單 Node aws 部落格 Line user Python with 部署 伺服器 效率 公司 課程 API 開源 REACT Javascript bi CSS 編輯 Css py 非同步 分析 AWS json vs 乾淨 npm Vue create 登入 新手 HTML 聊天 Html
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。