如何使用 HTML、CSS 和 JavaScript 建立一個展開的側邊欄？

在本教程中，我們將瞭解查詢字串中唯一字元的不同方法。簡單來說，如果一個字元在字串中出現過一次，則它將不再包含在字串中。

方法

我們將遵循以下步驟來建立我們的設計 −

  • 步驟 1 − 我們將建立必要的 HTML 元素，例如主頁、圖示、儀表盤和更多選項，這些選項將出現在側邊欄中。
  • 步驟 2 − 然後我們將使用 CSS 設計 HTML 元素，並將它們固定在正確的位置。在本教程中，我們將使用內聯 CSS 以避免為 CSS 和 JavaScript 建立不必要的外部檔案，但我建議您也為 CSS 和 JavaScript 建立一個外部檔案，這被認為是最佳實踐。
  • 步驟 3 − 然後我們將新增內部 JavaScript 程式碼，其中將包含事件監聽器和懸停效果。

HTML

我們將新增基本的 HTML 結構，然後新增 Font Awesome CDN 連結。

https://use.fontawesome.com/releases/v6.0.0/css/all.css

然後我們將新增一些div部分，其中包含側邊欄的選單項和描述等元素。在這個 style 標籤部分，我們將新增我們的CSS樣式程式碼，在 script 標籤部分，我們將新增我們的 JavaScript 程式碼。

因此，我們的基本 HTML 結構將是

<!DOCTYPE html>
<html>
<head>
   <title>Revealing sidebar using HTML, CSS and JavaScript</title>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css">
<style>
</style>
</head>
<body>
   <div class="Container">
      <div class="sidebar">
         <div class="details">
         </div>
      </div>
   </div>
   <script>
   </script>
</body>
</html>

現在我們將新增我們需要的項到 HTML 程式碼中，最終，我們的 HTML 部分將是。

<!DOCTYPE html>
<html>
<head>
   <title>Revealing item_side_container using HTML, CSS and JavaScript</title>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css">
</head>
<body>
   <div class="Container">
      <div class="section">
         <div class="navB">
            <div class="burgerSign">
               <a href="#">
                  <i class="fas fa-bars"></i>
               </a>
            </div>
         </div>
      </div>
      <div class="item_side_container"> 
         <div class="Details">
            <h3>TutorialsPoint</h3>
         </div>
         <ul>
            <li>
               <a href="#">
                  <span class="icon"><i class="fas fa-home"></i></span>
               </a>
            </li>
            <li>
               <a href="#">
                 <span class="icon"><i class="fas fa-desktop"></i></span>
               </a>
            </li>
            <li>
               <a href="#">
                  <span class="icon"><i class="fa-solid fa-robot"></i></i></span>
               </a>
            </li>
            <li>
               <a href="#">
                  <span class="icon"><i class="fa-solid fa-mobile"></i></span>
               </a>
            </li>
            <li>
               <a href="#">
                  <span class="icon"><i class="fas fa-database"></i></span>
               </a>
            </li>
            <li>
               <a href="#">
                  <span class="icon"><i class="fa-solid fa-code"></i></i></span>
               </a>
            </li>
            <li>
               <a href="#">
                  <span class="icon"><i class="fas fa-cog"></i></span>
               </a>
            </li>
         </ul>
      </div>
   </div>
</body>
</html>

CSS 樣式程式碼

現在我們將新增我們的樣式程式碼到 HTML 中，並在 HTML 元素上應用 CSS。

首先，我們將所有瀏覽器預設樣式設定為 none，然後我們將新增我們對容器、專案、導航欄、漢堡包圖示等的樣式。

這是我們的 CSS 程式碼。

<style>
   *{
      margin: 0;
      padding: 0;
      text-decoration: none;
      box-sizing: border-box;
      font-family:sans-serif;
   }
   body{
      background: skyblue;
      }
      .Container .section{
      width: calc(100% - 225px);
      margin-left: 225px;
      transition: all 0.5s ease;
   }
   .navB{
      background: rgba(22, 81, 84, 0.8);
      height: 50px;
      display: flex;
      align-items: center;
      padding: 0 30px;
   }
   .burgerSign a{
      font-size: 28px;
      color: #f4fbff;
   }
   .Container .section .navB .burgerSign a:hover{
      color: red;
   }
   .item_side_container{
      background: rgba(11, 119, 124, 0.46);
      position: fixed;
         width: 225px;
      height: 100%;
      padding: 20px 0;
      top: 0px;
      left: 0px;
      transition: all 0.5s ease;
   }
   .Details{
      margin-top: 60px;
      margin-bottom: 30px;
      text-align: center;
   }
   .Details h3{
      color: #ffffff;
      margin: 10px 0 5px;
   }
   .item_side_container ul li a{
      display: block;
      font-size: 16px;
      position: relative;
      padding: 13px 30px;
      border-bottom: 1px solid #10558d;
      color: rgb(241, 237, 237);
   }
   .item_side_container ul li a .icon{
      color: black;
         width: 30px;
      display: inline-block;
      margin-left: 60px;
   }
   .item_side_container ul li a:hover .icon,
   .item_side_container ul li a.active .icon{
      color: red;
   }
   body.active .Container .item_side_container{
      left: -225px;
   }
   body.active .Container .section{
      margin-left: 0;
      width: 100%;
   }
</style>

JavaScript

在新增元素和 CSS 設計後，我們將向漢堡包圖示和側邊欄內的列表項新增一個事件監聽器，以便當我們懸停或點選它時，透過新增 active 類來更改其顏色。

最後，我們的 JavaScript 程式碼

<script>
   document.querySelector(".burgerSign").addEventListener("click", function(){
      document.querySelector("body").classList.toggle("active");
   })
</script>

完整程式

讓我們新增所有程式碼以使所有元素正常工作，這是我們的最終程式。

<!DOCTYPE html>
<html>
<head>
   <title>Revealing item_side_container using HTML, CSS and JavaScript</title>
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.0.0/css/all.css">
   <style>
      *{
         margin: 0;
         padding: 0;
         text-decoration: none;
         box-sizing: border-box;
         font-family:sans-serif;
      }
      body{
         background: skyblue;
      }
      .Container .section{
         width: calc(100% - 225px);
         margin-left: 225px;
         transition: all 0.5s ease;
      }
      .navB{
         background: rgba(22, 81, 84, 0.8);
         height: 50px;
         display: flex;
         align-items: center;
         padding: 0 30px;
      }
      .burgerSign a{
         font-size: 28px;
         color: #f4fbff;
      }
      .Container .section .navB .burgerSign a:hover{
         color: red;
      }
      .item_side_container{
         background: rgba(11, 119, 124, 0.46);
         position: fixed;
         width: 225px;
         height: 100%;
         padding: 20px 0;
         top: 0px;
         left: 0px;
         transition: all 0.5s ease;
      }
      .Details{
         margin-top: 60px;
         margin-bottom: 30px;
         text-align: center;
      }
      .Details h3{
         color: #ffffff;
         margin: 10px 0 5px;
      }
      .item_side_container ul li a{
         display: block;
         font-size: 16px;
         position: relative;
         padding: 13px 30px;
         border-bottom: 1px solid #10558d;
         color: rgb(241, 237, 237);
      }
      .item_side_container ul li a .icon{
         color: black;
         width: 30px;
         display: inline-block;
         margin-left: 60px;
      }
      .item_side_container ul li a:hover .icon,
      .item_side_container ul li a.active .icon{
         color: red;
      }
      body.active .Container .item_side_container{
         left: -225px;
      }
      body.active .Container .section{
         margin-left: 0;
         width: 100%;
      }
   </style>
</head>
<body>
   <div class="Container">
      <div class="section">
         <div class="navB">
            <div class="burgerSign">
               <a href="#">
                  <i class="fas fa-bars"></i>
               </a>
            </div>
         </div>
      </div>
   <div class="item_side_container">
      <div class="Details">
         <h3>TutorialsPoint</h3>
      </div>
   <ul>
   <li>
      <a href="#">
         <span class="icon"><i class="fas fa-home"></i></span>
      </a>
   </li>
   <li>
      <a href="#">
         <span class="icon"><i class="fas fa-desktop"></i></span>
      </a>
   </li>
   <li>
      <a href="#">
         <span class="icon"><i class="fa-solid fa-robot"></i></i></span>
      </a>
   </li>
   <li>
      <a href="#">
         <span class="icon"><i class="fa-solid fa-mobile"></i></span>
      </a>
   </li>
   <li>
      <a href="#">
         <span class="icon"><i class="fas fa-database"></i></span>
      </a>
   </li>
   <li>
      <a href="#">
      <span class="icon"><i class="fa-solid fa-code"></i></i></span> </a>
   </li>
   <li>
      <a href="#">
         <span class="icon"><i class="fas fa-cog"></i></span>
      </a>
   </li>
   </ul>
</div>
</div>
   <script>
      document.querySelector(".burgerSign").addEventListener("click", function(){
         document.querySelector("body").classList.toggle("active");
      })
   </script>
</body>
</html>

更新於： 2022-08-16

1K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告