如何使用 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+ 浏览量

开启你的 职业生涯

通过完成课程获得认证

立即开始
广告