小編精選 - 技術文章翻譯  ·  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留言 62瀏覽
共有 0 則留言
登入之後發表留言
小編精選 - 技術文章翻譯
精選技術文章翻譯，幫助開發者持續吸收新知。
熱門文章
🔥 僅使用 HTML 和 CSS 建立側邊欄選單
🔥 我學習了 JavaScript 並製作了一款火爆網頁應用程式 🤯
🔥 DNS 基礎：了解 Internet 的目錄服務
🔥 只需 2GB 記憶體即可將後端擴展到 1M 請求 ⚡️
🔥 如何使用 Ollama 和打開 WebUI 在本地執行 Llama 3
最新出爐作業包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式
熱門搜尋： oop 題 前 使用 學習 . COM 語言 ul 開發 ui 技術 java 專案 js C 前端 Ai ` Github go AI app 工作 第一 % HTML html 主題 2 JS 10 AWS CSS 網頁 Css id github 網站 GIT Html 作為 分享 Javascript ci JavaScript with Git node Node css ? 作業 測試 資料庫 " 研 結構 vs 50 Line json class React 工程師 user c javascript 系列 python this Can API 後端 vue JAVA 部落格 Java 4 CD component 查詢 1 jav 套件 20 javascript ejs api git fetch 新手 bi 遊戲 ＣＳＳ 19 py 謝謝 for ROS error
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。