SVG 汉堡菜单 | CSS-Tricks

三条线应该很容易画。这里有一些不同的方法来在网络上实现它。也就是说，SVG 绝对是最漂亮的方式。汉堡菜单非常简单，我们可以用 SVG 手动绘制它。

三个矩形，均匀分布

<svg viewBox="0 0 100 80" width="40" height="40">
  <rect width="100" height="20"></rect>
  <rect y="30" width="100" height="20"></rect>
  <rect y="60" width="100" height="20"></rect>
</svg>

随意调整这些数字，以获得你喜欢的尺寸和样式。

你可能不知道的一个很酷的东西？SVG 有圆角，就像 CSS 有 border-radius！它以 rx 属性的形式出现。试试看

如果你的设计更柔和，并且使用了圆角元素，这可能更适合你的设计。

Ana Tudor

# 2020 年 1 月 22 日

我会使用 line 元素来编写第一个（没有圆角）代码，这将导致一个不到 150 字节的 .svg 文件（包括 xmlns 属性）。

<svg viewBox='-5 0 10 8' width='40'>
  <line y2='8' 
        stroke='#000' 
        stroke-width='10' 
        stroke-dasharray='2 1'/>
</svg>

第二个（圆角）可以用一个 path（绘制 3 条水平 h 线，基本上是整个视窗宽度减去描边宽度）进行编码。

<svg viewBox='0 0 10 8' width='40'>
  <path d='M1 1h8M1 4h 8M1 7h8' 
        stroke='#000' 
        stroke-width='2' 
        stroke-linecap='round'/>
</svg>

James

# 2020 年 1 月 23 日

我通常用

(或 ) 以及一些 ::before 和 ::after 来设置顶部和底部边框。这样也更容易在需要时动画转换为 X 图标。更简单是指可以使用 CSS 过渡而不是 SVG 动画。

Joe

# 2022 年 8 月 6 日

非常感谢你提供这段很棒的代码。我最近安装了 WordPress 主题 2022。我无法将默认的 2 行汉堡图标更改为 3 行，除非使用插件。我在 Chrome 浏览器中检查了网站，复制粘贴了你的代码，然后就完成了。

一个问题。如何在按钮后面添加“菜单”文本？

谢谢。

评论

回复 取消回复

回复取消回复