带有 HTML、CSS 和 JavaScript 的侧边栏

带有 HTML、CSS 和 JavaScript 的侧边栏

一群人，不飞溅

在本文中，我将解释创建响应式侧边栏所需的步骤，该侧边栏可用于在您想到的任何 Web 项目上进行导航。我确信有上百万种不同的方式来构建侧边栏，但这是我所采用的方法。

我将本教程分为 4 个步骤，任何对 HTML、CSS 和 JavaScript 有基本了解的人都可以遵循这些步骤。我最初构建这个侧边栏的目的是为了在仪表板/CMS 上使用它，因为它允许添加很多菜单选项。

出于个人喜好，我使用了 vanilla JavaScript，而不是使用 jQuery。唯一需要的依赖是 Font Awesome 6.2，它是当前可用的最新版本。我使用了 Font Awesome 6.2 的免费版本 这里 .

Side Bar Preview

要开始使用，请按照以下步骤操作。随意从 GitHub 下载代码 点击这里 .

步骤 1) 设置 HTML 并确保将 Font Awesome 6.2 CDN 添加到 head 标签。

步骤 2) 设置 CSS

步骤 3) 添加 JS

为了进一步学习本教程，您可以合并收藏夹菜单选项，然后动态加载到您收藏的页面中。我相信任何使用 LAMP 堆栈的人都会大致了解如何添加此功能。

这实际上是我的第一篇 Medium 文章，任何反馈将不胜感激。随意从 GitHub 下载代码 点击这里 .

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38126/22162011