HTML+Sass实现HambergurMenu(汉堡包式菜单)

前几天看了国外一个大佬用HTML+CSS实现HamburgerMenu的视频，然后最近在看Sass，所以用Sass来实现一下。 最终效果图如下： 在VS Code中的文件结构（编译scss文件用的是easy sass）： 页面结构（index.html）： _config.scss: /*设置颜色及max-width*/ $primary-color: rgba(13,110,139,.75); $overlay-color: rgba(24,39,51,.85); $max-width: 980px; /*设置文本颜色，如果背景色浅，则设置为黑色，否则设置为白色*/ @function HTML+Sass实现汉堡包式菜单（Hamburger Menu）是一种常见的前端设计技巧，尤其适用于移动设备上的导航菜单。这种菜单以其独特的三线图标（汉堡图标）而得名，当用户点击时，图标会变形以展开或收起菜单项。在本案例中，我们将探讨如何结合HTML和Sass来创建这样一个功能。 Sass（Syntactically Awesome Style Sheets）是CSS的一个预处理器，它允许我们使用变量、嵌套规则、函数、混合（mixins）等高级特性编写更优雅、可维护的CSS代码。 在给定的文件中，`_config.scss` 文件定义了一些基本的颜色变量和一个用于设置文本颜色的函数。例如： ```scss $primary-color: rgba(13,110,139,.75); $overlay-color: rgba(24,39,51,.85); $max-width: 980px; ``` 这些变量可以在整个项目中重用，保持颜色一致性。`set-text-color` 函数则根据背景颜色的明暗程度动态设置文本颜色。 `style.scss` 文件中，使用了`@import`指令导入配置文件，并应用了全局样式。`.showcase` 类用于设置展示区域的背景颜色、图像和文本居中对齐。这里使用了CSS的伪元素 `:before` 来添加背景图片，并利用`flexbox`布局使内容垂直居中。 此外，还定义了一个名为`set-background`的混合器（mixin），它接受一个颜色参数，然后设置元素的背景颜色和相应的文本颜色。这个混合器在`.showcase`类的子元素`.btn`上被使用，以创建一个带有渐变背景色的按钮。 汉堡菜单的实现依赖于HTML的`<input type="checkbox">`元素。当用户点击汉堡图标时，实际上是在操作这个隐藏的checkbox。在Sass中，我们可以通过CSS的`:checked`伪类来控制与checkbox关联的其他元素的样式，从而实现菜单的显示和隐藏。`.menu-wrap`类设置了固定定位，以确保菜单始终覆盖整个屏幕，而`.toggle`类则用于设置汉堡图标的样式及其与checkbox的关联。 汉堡图标通常由三条水平线组成，我们可以使用`::before`, `::after` 和 `::checkbox` 的伪元素来创建这些线条，并通过CSS转换（`transform`）来实现动画效果。例如，当checkbox被选中时，这些线条可能会旋转或改变宽度以形成一个X形状，表示菜单已打开。 为了确保交互性，还需要设置适当的`z-index`值，以确保汉堡图标位于背景元素之上，且能响应点击事件。通过调整`opacity`和`cursor`属性，可以增强用户的交互体验，使其明白这是一个可点击的元素。 总结来说，这个HTML+Sass实现的汉堡包式菜单结合了Sass的变量、函数和混合器特性，以及HTML的checkbox技巧，创造出一种优雅、响应式的导航菜单解决方案。这样的菜单在移动设备上特别有用，因为它可以节省有限的屏幕空间，同时保持良好的用户体验。