仅使用 HTML 和 CSS 的侧边栏菜单
使用 HTML 和 CSS 创建侧边栏菜单的视频教程
使用 HTML 和 CSS 实现侧边导航栏 [源代码]
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
各位读者朋友们，大家好！今天这篇博客将教大家如何仅使用 HTML 和 CSS 创建侧边栏菜单。之前我分享过一个仅使用 HTML 和 CSS 实现的响应式导航菜单栏，现在我们将创建一个可以从左侧或右侧滑出的侧边导航菜单栏。
如图所示，这是一个完全基于 HTML 和 CSS 的侧边导航菜单栏。我们使用复选框标签来显示和隐藏侧边栏。也就是说，当您点击“X”按钮时，侧边栏会滑到左侧，并显示一个菜单按钮（三条横线）；再次点击这三条横线时，侧边栏会滑到右侧。
点击这三条横线，复选框会被选中，侧边菜单栏会显示出来；再次点击，复选框会被取消选中，侧边菜单栏会隐藏。整个过程仅通过 HTML 标签即可完成。
如果您觉得我的讲解不够清晰，请继续阅读。您可以观看有关此程序（侧边导航菜单栏）的完整视频教程。
使用 HTML 和 CSS 创建侧边栏菜单的视频教程
希望您在观看本视频教程后已经理解了侧边栏菜单的基本概念。我认为本视频可以帮助初学者深入了解 CSS。您可以根据需要进行一些修改，然后将此程序或设计应用到您的网站或项目中。此外，您还可以重新设计此程序，使其侧边栏菜单更上一层楼。
如果您喜欢此登录表单设计并想要获取源代码，您可以轻松获取此程序的源代码。只需向下滚动即可找到源代码。
使用 HTML 和 CSS 实现侧边导航栏 [源代码]
在分享此程序（侧边导航菜单栏）的源代码之前，我们先来简单了解一下该程序的主要标签和代码。我仅使用 HTML 和 CSS 创建了这个侧边导航菜单栏，也就是说这是一个纯 CSS 程序。
正如您在视频中看到的，该程序完全基于 ul 和 li 标签，因此我们可以轻松创建菜单。您可以直接调用此 CSS 侧边导航栏，无需使用 JavaScript。我使用了 type="checkbox" 和 for="" 的 label 标签来切换移动版菜单栏的显示/隐藏状态。我还使用了 Font Awesome 图标来显示三条横线和“X”按钮。Font Awesome 是一个网站，我们可以在上面找到数千个免费图标用于我们的项目。
您也可以通过提供的链接下载源代码文件。源代码文件中还包含此程序的背景图片。