小編精選 - 技術文章翻譯  ·  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留言 690瀏覽
共有 0 則留言
登入之後發表留言
小編精選 - 技術文章翻譯
精選技術文章翻譯，幫助開發者持續吸收新知。
熱門文章
🔥 好玩的資安學習方式：CTF 與入門指南！
🔥 使用 ToolJet 和 OpenAI 在 10 分鐘內建立 Grammarly 替代方案📝
🔥 Angular 18 的新增功能
🔥 僅使用 HTML 和 CSS 建立側邊欄選單
🔥 我如何在處理多個專案時提高工作效率
最新出爐專案包
⭐ 邁向資深之路：非同步 JS 訓練（二）—— 各種寫法的錯誤處理、收尾處理
⭐ 邁向資深之路：非同步 JS 訓練（一）—— 從 Callback Hell 到 Promise 介面
⭐ Github Desktop 新手入門教學 —— 用漂亮的 GUI 介面來學習 Git 基本觀念
⭐ 邁向資深之路：後端 JS 訓練（二）—— 玩玩看 Express，用純後端做做看部落格
⭐ 邁向資深之路：後端 JS 訓練（一）—— 玩玩看 Node，做做看老派 CLI 應用程式
熱門搜尋： 使用 開發 工作 專案 分享 ar 技術 for 網站 github id 學習 API 作為 Ml 作業 第一 js 測試 AI java html Javascript 搜尋 HTML javascript Git Java git app JAVA javasc %' 前端 api JavaScript 開源 系列 ui 語言 user jav 網頁 COM ul CD url 套件 架構 結構 ci py 框架 Line css ＣＳＳ AWS 清單 後端 編輯 go GIT 研究 Can Node Ai 主題 bi 工程師 部署 react 伺服器 資料庫 console REACT this Github 遊戲 create aws with JS 部落格 json component Javas 查詢 新手 分析 CSS 登入 Python class node 練習 新創 入門 乾淨 課程 design
🛡️ 隱私及網站安全：本站註冊過程「不須提供任何個資」，只要 E-Mail 與帳密即可註冊，請安心註冊！線上付款過程使用「綠界科技 ECPay 」第三方專業金流廠商，全程在「綠界科技 ECPay 」網站進行付款程序，本站「不會紀錄任何信用卡資訊」，請放心付款、解鎖課程！您隨時可以透過 FB 粉專或者 Email 聯絡站長，請求刪除網站上的個人資料。