如何使用HTML和CSS設計一個現代的側邊欄選單？-html教學-PHP中文網

首頁

web前端

html教學

如何使用HTML和CSS設計一個現代的側邊欄選單？

PHPz

Aug 31, 2023 pm 09:53 PM

csshtml側邊欄

如何使用HTML和CSS設計一個現代的側邊欄選單？

當你考慮一個典型網站的佈局時，很可能會在主要內容區域的右側或左側包含一列重要的連結（用於網頁中各個部分的導航鏈接）。

這個元件被稱為“側邊欄”，通常用作網頁上的選單。雖然它被廣泛使用，但開發人員通常將此元素添加到網站上，用於在頁面之間導航，甚至導航到網頁的不同部分。

讓我們了解這個功能，並嘗試只使用HTML和CSS來建立一個現代的側邊欄。

什麼是側邊欄選單？

側邊欄是位於主要內容區域右側或左側的靜態列。此元件包含網站中的導覽連結、小工具或其他必要的連結（用於主頁、內容或其他部分）。

下面給出一個範例，示範如何建立一個簡單的側邊欄選單。此選單位於主內容區域的左側（與大多數網站的佈局相同）。

範例

在這個範例中，我們使用 CSS 網格將網頁分成兩個部分。網頁的 15% 構成側邊欄選單，85% 構成主要內容。

CSS網格

透過設定 display: grid，它使開發人員能夠將任何元素轉換為網格容器。要新增列，我們使用，

grid-template-columns: value value;

value代表列的寬度。它可以用長度（px、cm、em）或百分比來表示。

標籤（錨元素）

它用於在網頁內部連結外部頁面。它也可以用於連結文檔內部的部分。 id屬性唯一地定義了元素。

<a href= "#"> </a>

href屬性包含外部頁面的url或文檔內部部分的id。

<!DOCTYPE html>
<html>
<head>
   <title> Sidebar menu </title>
   <style>
      #main-doc {
         display: grid;
         grid-template-columns: 15% 85%;
         grid-template-rows: auto;
         grid-template-areas: "advert content";
      }

      .item1 {
         padding: 10px;
      }

      #head {
         font-family: serif !important;
         color: #8b0000 !important;
         font-weight: 900;
         margin: 5px;
         padding: 0 5px 5px;
      }

      .main-section {
         font-family: Brush Script MT;
         font-size: 20px;
         color: #000080;
      }

      .item2 {
         background: linear-gradient(-35deg, #fff000, #ffb6c1, #afeeee);
         padding: 6px 8px 6px 16px;
         margin: 0
      }

      .contents {
         font-size: 26px !important;
         color: grey;
      }

      .item1 a {
         border-radius: 5px;
         padding: 6px 16px 6px 16px;
         display: block;
      }
      a:hover {
         color: red;
         transform: scale(1.1);
      }
   </style>
</head>
<body>
   <main id="main-doc">
   <div class="item1">
      <nav id="navbar">
         <header class="contents">
            <strong> Contents </strong>
         </header>
         <br>
         <a href="https://www.php.cn/link/115c51eb37365df2d4f4e2482b964822" class="nav-link"> Background </a>
         <br>
         <hr>
         <a href="#romance" class="nav-link"> Romance </a>
         <br>
         <hr>
         <a href="#relations" class="nav-link"> Relations </a>
         <br>
         <hr>
         <a href="#voice_actors" class="nav-link"> Voice Actors </a>
         <br>
         <hr>
         <a href="#costumes" class="nav-link"> Costumes </a>
         <br>
         <hr>
         <a href="#gallery" class="nav-link"> Gallery </a>
         <br>
         <hr>
      </nav>
   </div>
   <div class="item2">
   <header id="head">
      <h1 id="Animation-Character"> Animation Character </h1>
   </header>
   <section class="main-section" id="background">
      <header>
         <h1 id="Background"> Background </h1>
      </header>
      <hr>
      <p> This is placeholder text. This paragraph contains information about the background of the character. </p>
   </section>
   <section class="main-section" id="romance">
      <header>
         <h1> Romance <h1>
         <hr>
      </header>
      <p> This paragraph contains text related to the life of the character. </p>
   </section>
   <section class="main-section" id="relations">
      <header>
      <h1 id="Relations"> Relations </h1>
      </header>
      <hr>
      <ul>
         <li> Mother <br>
         <p> Text about character's mother </p>
         <li> Father <br>
         <p> Information about the father. </p>
         <li> Sister <br>
         <p> Text about character's sister </p>
         <li> Friend <br>
         <p> Text about friend </p>
      </ul>
   </section>
   <section class="main-section" id="voice_actors">
      <header>
         <h1> Voice actors
            <hr>
         </h1>
      </header>
      <p> This contains information about voice actors in the animation </p>
   </section>
   <section class="main-section" id="costumes">
      <header>
         <h1> Costumes
            <hr>
         </h1>
      </header>
      <br>
      <br>
   </section>
</body>
</html>

範例

在這裡，我們將建立一個可切換的側邊欄。在這個例子中，我們建立了一個側邊欄，並將其定位在內容區域的左側。我們在內容區域中有一個按鈕，點擊該按鈕可以折疊我們建立的側邊欄。

我們使用了 CSS 過渡屬性 來平滑地改變側邊欄的位置。點選按鈕時，側邊欄的位置從 0 到 -160px（與側邊欄的寬度相等）會改變。換句話說，側邊欄向左側移動了其寬度的距離。

<!DOCTYPE html>
<html>
<head>
   <title> Toggle Sidebar </title>
   <style>
      body {
         margin: 0;
      }
      .container {
         display: flex;
         min-height: 90px;
      }
      .sidebar {
         position: relative;
         left: 0;
         margin-right: 20px;
         width: 160px;
         background-color: #ccc;
         transition: all 0.20s;
      }

      .sidebar.collapsed {
         left: -160px;
         margin-right: -150px;
      }
   </style>
</head>
<body>
   <div class="container">
      <div class="sidebar" id="sidebar">
         <strong> Sidebar menu </strong>
         <ul>
            <a href="#" class="nav-link">
               <li> Link 1 </li>
            </a>
            <a href="#" class="nav-link">
               <li> Link 2 </li>
            </a>
            <a href="#" class="nav-link">
               <li> Link 3 </li>
            </a>
            <a href="#" class="nav-link">
               <li> Link 4 </li>
            </a>
         </ul>
      </div>
      <div class="content">
         <h2 id="This-is-an-example-This-contains-the-main-content-area"> This is an example. This contains the main content area. </h2>
         <br> Click the button below to toggle the sidebar <br>
         <br>
         <button onclick="document.getElementsByClassName('sidebar')[0].classList.toggle('collapsed')"> toggle Sidebar </button>
      </div>
   </div>
</body>
</html>

結論

在本文中，我們討論了網頁中兩種類型的側邊欄選單。其中一個是基本側邊欄，另一個是切換側邊欄。它們都是只使用 HTML 和 CSS 設計的。

以上是如何使用HTML和CSS設計一個現代的側邊欄選單？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

See all articles