H

HTML CSS 和 JavaScript 中的响应式侧边导航栏

2025-06-10

HTML CSS 和 JavaScript 中的响应式侧边导航栏

在本文中，您将学习如何使用 HTML、CSS、JavaScript 创建响应式侧边栏菜单。之前，我分享过如何设计更多类型的响应式侧边导航栏。

✅观看实时预览👉👉响应式侧边栏菜单

我使用 HTML、CSS 和 JavaScript 创建了这个项目。首先，我创建了一个顶部菜单栏。顶部菜单栏包含一个徽标和一个菜单按钮。然后，我在这里创建了一个包含大量图标和菜单项的站点栏。

此外，侧边栏可以通过悬停在此处来激活。下面我分享了一个视频教程，它将帮助您逐步了解如何制作这个响应式侧边导航栏。

通常情况下，侧边栏只能显示图标，文字会被隐藏。不过，点击此菜单按钮后，侧边栏将显示完整的文字和图标。

由于正常情况下该栏的宽度为 70px，因此可以轻松用于任何响应设备。

侧边导航栏的 HTML 代码

下面我提供了创建此侧边栏所需的 HTML 代码。不过，我已经逐步解释了这些代码。如果您复制代码有困难，可以使用源代码下载链接。

基本 HTML 结构

下面的代码基本上是这个侧边栏的基本结构，我已经将所有 HTML 代码添加到其中。

<div class="wrapper hover_collapse">

<!-- Top bar -->

<!-- Sidebar -->

</div>
Enter fullscreen mode Exit fullscreen mode

创建顶部导航栏

现在，我们已经使用以下 HTML 代码创建了顶部导航菜单。这里有一个 logo，我还添加了一个菜单按钮。

<div class="top_navbar">
<!-- logo -->
    <div class="logo">Foolish Dev</div>
<!-- menu button -->
   <div class="menu">
     <div class="hamburger">
     <i class="fas fa-bars"></i>
     </div>
   </div>

</div>
Enter fullscreen mode Exit fullscreen mode

创建侧边栏
现在我们已经创建了侧边栏的基本结构。下面的代码最初用于创建侧边栏的基本结构。我将在这段代码中添加所有菜单项。

<div class="sidebar">

</div>
Enter fullscreen mode Exit fullscreen mode

以下 HTML 代码用于在此侧边栏中添加菜单图标和文本。这里我添加了 7 个菜单项。您可以根据需要增加或减少数量。

<div class="sidebar_inner">
  <ul>
      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-qrcode"></i></span>
    <span class="text">Dashboard</span>
      </a>
      </li>

      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-link"></i></span>
    <span class="text">Shortcuts</span>
      </a>
      </li>
      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-eye"></i></span>
    <span class="text">Overview</span>
      </a>
      </li>
      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-book"></i></span>
    <span class="text">Event</span>
      </a>
      </li>
      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-question-circle"></i></span>
    <span class="text">About</span>
      </a>
      </li>
      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-pen"></i></span>
    <span class="text">Service</span>
      </a>
      </li>
      <li>
      <a href="#">
    <span class="icon"><i class="fa fa-id-card"></i></span>
    <span class="text">Contact</span>
      </a>
      </li>
  </ul>
</div>
Enter fullscreen mode Exit fullscreen mode

响应式侧边栏菜单的 CSS 代码

以下 CSS 代码有助于设计网页。

*{
 font-family: 'Baloo Paaji 2', cursive;
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
}

body{
 background: #f5f5f5;
}
Enter fullscreen mode Exit fullscreen mode

我使用以下代码设计了顶部导航栏。这里顶部导航栏的宽度为 100% height: 60px。

我使用浅黑色作为其背景颜色top: 0，并left: 0帮助将其保持在网页的最顶部。

.top_navbar{
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 60px;
 background: #323233;
 box-shadow: 1px 0 2px rgba(0,0,0,0.125);
 display: flex;
 align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

顶部导航栏
现在我已经设计好了标志。我已经习惯font-size: 25px增加文字大小。

.top_navbar .logo{
 width: 250px;
 font-size: 25px;
 font-weight: 700;
 padding: 0 25px;
 color: white;
 letter-spacing: 2px;
 text-transform: uppercase;
 border-right: 1px solid #f5f5f5;
}
Enter fullscreen mode Exit fullscreen mode

设计了标志
现在我已经设计好了菜单图标。Font-size: 25px已经用来放大菜单图标。

.top_navbar .menu{
 width: calc(100% - 250px);
 padding: 0 25px;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.top_navbar .hamburger{
 font-size: 25px;
 cursor: pointer;
 color: white;
}

.top_navbar .hamburger:hover{
 color: #007dc3;
}
Enter fullscreen mode Exit fullscreen mode

设计菜单图标
现在我已经设计好了基本的侧边栏。这里使用了 sidebar width: 220px，height: 100%其背景颜色为深蓝色。

.sidebar{
 position: fixed;
 top: 60px;
 left: 0;
 width: 220px;
 height: 100%;
 background: #042331;
}
Enter fullscreen mode Exit fullscreen mode

设计了基本的侧边栏
现在已经设计好了侧边栏的菜单项。在这里，我习惯于padding: 16px 25px在每个菜单项之间保持一定的距离。

.sidebar ul li a{
 display: block;
 padding: 16px 25px;
 border-bottom: 1px solid #03374e;
 color: #0e94d4;
}

.sidebar ul li a .icon{
 font-size: 18px;
 color: white;
 vertical-align: middle;
}

.sidebar ul li a .text{
 margin-left: 19px;
 color: #fff;
 font-family: sans-serif;
 font-size: 18px;
 letter-spacing: 2px;
}

.sidebar ul li a:hover{
 background: #0e94d4;
 color: #fff;
}
Enter fullscreen mode Exit fullscreen mode

设计菜单项
使用以下 CSS 代码，我们减小了侧边栏的宽度并隐藏了其中的文本。正常情况下，侧边栏的长度只有 70 像素，测试内容将完全隐藏。

.hover_collapse .sidebar{
 width: 70px;
}

.hover_collapse .sidebar ul li a .text{
 display: none;
}
Enter fullscreen mode Exit fullscreen mode

隐藏文本

响应式侧边导航栏的 JavaScript

我已经用上面的 HTML 和 CSS完成了侧边栏的基本设计。现在，我使用一些 JavaScript 来设计菜单按钮和悬停效果。

我已经逐一确定了三个类函数的常数。

var li_items = document.querySelectorAll(".sidebar ul li");
var hamburger = document.querySelector(".hamburger");
var wrapper = document.querySelector(".wrapper");
Enter fullscreen mode Exit fullscreen mode

现在我已经指示了当你在这个侧边栏移动鼠标时会发生什么样的变化。

正如我之前所说，当您将鼠标悬停在侧边栏上时，侧边栏将保持其完整大小并且文本将可见。

在这里我给出了指示，当你"mouseenter"这样做时"hover_collapse"将被删除，这意味着“hover_collapse”将从侧边栏中删除。

删除“hover_collapse”意味着站点栏将保留其旧形状。

li_items.forEach((li_item)=>{
   li_item.addEventListener("mouseenter", ()=>{

    li_item.closest(".wrapper").classList.remove("hover_collapse");

  })
})
Enter fullscreen mode Exit fullscreen mode

现在我已经指示了当你 时会发生什么样的变化"mouseleave"。然后"hover_collapse"将再次添加，这意味着文本将被完全隐藏。

li_items.forEach((li_item)=>{
   li_item.addEventListener("mouseleave", ()=>{

    li_item.closest(".wrapper").classList.add("hover_collapse");

   })
})
Enter fullscreen mode Exit fullscreen mode

上面我们已经安排好了菜单栏的悬停功能。现在我激活了菜单按钮。

点击菜单按钮时，侧边栏会保留原来的形状。为此，我借助了"classList.toggle"。

第一次单击时，"hover_collapse"将从侧边栏中删除，再次单击时，"hover_collapse"将被添加到侧边栏。

hamburger.addEventListener("click", () => {

    hamburger.closest(".wrapper").classList.toggle("hover_collapse");
})
Enter fullscreen mode Exit fullscreen mode

希望您能从本文中了解我如何使用 HTML、CSS 和 JavaScript 创建此响应式侧边导航栏。
相关文章：

  1. 响应式页脚 HTML CSS
  2. 海得拉巴的IB学校
  3. 使用 JavaScript 的简单秒表
  4. 怀特菲尔德的幼儿园
  5. javaScript 密码生成器
  6. 海得拉巴的国际学校
  7. 使用 HTML CSS 的侧边栏菜单

如果您喜欢这个设计，请评论。您可以通过此链接下载所需的内容。

您可以访问我的博客以获取更多类似的教程。😊
https://www.foolishdeveloper.com/

鏂囩珷鏉ユ簮锛�https://dev.to/shantanu_jana/responsive-side-navigation-bar-in-html-css-and-javascript-3mgm
Devto 翻译
PREV
使用 HTML、CSS 和 Javascript 的简单手风琴菜单
NEXT
如何创建具有自定义域、HTTPS 和持续部署要求的 AWS S3 托管 Angular 应用程序基本静态站点设置自定义域和 HTTPS 持续交付结束