汉堡菜单图标（三线菜单图标/Navicon）的不同方式

最近，许多人都在思考“菜单”的通用符号。（“Navicon”，明白了吗？！）。Jordan Moore 为 Smashing Magazine 撰写了一篇关于此的大文章。Jeremy Keith 撰写了关于此的文章。Stuart Robson 撰写了关于此的文章。Tim Kadlec 撰写了关于此的文章。 如果您想阅读更多关于此类内容背后的思考并查看示例，请阅读这些文章。

在这篇文章中，我将重点关注“三线”符号（而不是向下箭头或其他可能的 navicon）。我非常喜欢三线符号作为表示菜单的符号。如果我们必须选择一个，我完全支持这个。

我们将探讨如何通过多种不同的方式创建此符号。

使用图像

我们如何将符号放到网站上……从什么时候开始？图像。这没什么问题。这个图像非常简单，非常适合使用 SVG。SVG 表示它 1) 文件大小极小，以及 2) 可以清晰地缩放至任何大小。HTML 可能如下所示

<a href="#menu">
  <img src="menu.svg" alt="">
  Menu
</a>

如果您要使用不带文本的符号，请务必包含alt文本。您也可以使用 PNG 或其他格式，但 SVG 非常适合此类简单的绘图。

使用伪元素

使用元素没什么问题，但是如果我们使用伪元素和一些技巧，就可以在无需图像所需的额外 HTTP 请求的情况下创建此符号。（是的，它可以放在您的精灵图中，但您知道我的意思）。

伪盒阴影

仅使用语义标记

<a href="#menu" class="box-shadow-menu">
  Menu
</a>

在 CSS 中，使用一些padding-left在链接左侧留出一些空间。使用相对定位设置定位上下文。然后，将一条黑色线条绝对定位到左上角的空间。然后，使用box-shadow在它下方创建两条线。

.box-shadow-menu {
  position: relative;
  padding-left: 1.25em;
}
.box-shadow-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 1em;
  height: 0.15em;
  background: black;
  box-shadow: 
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}

伪渐变

与上面的标记相同。创建用于伪元素的空间的相同想法。只是这次，使用渐变来创建三条线。请记住，如果您使用“硬停止”在同一颜色停止处立即将颜色更改为另一种颜色，则渐变实际上不需要从一种颜色淡入到另一种颜色。

.gradient-menu {
  padding-left: 1.25em;
  position: relative;
}
.gradient-menu:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.21em;
  bottom: 0.21em;
  width: 1em;
  background: linear-gradient(
    to bottom, 
    black, black 20%, 
    white 20%, white 40%, 
    black 40%, black 60%, 
    white 60%, white 80%, 
    black 80%, black 100%
  );
}

伪边框

感谢 Robson 先生 的贡献。他通过将双实线和单实线边框应用于伪元素来创建它。他还在演示中使用了像素值。Tim Kadlec 将它们转换为 em，以便它们随着文本缩放，这很好。

.border-menu {
  position: relative;
  padding-left: 1.25em;
}
.border-menu:before {
  content: "";
  position: absolute;
  top: 0.25em;
  left: 0;
  width: 1em;
  height: 0.125em;
  border-top: 0.375em double #000;
  border-bottom: 0.125em solid #000;
}

使用字体

有一个包含三条线的 Unicode 符号。

<a href="#menu">
  &#9776; Menu
</a>

您可能会认为这很完美，但实际上，它最终会变得非常模糊。在我的视网膜显示屏上看起来还可以，但在非视网膜显示屏上看起来很糟糕。这种东西应该在任何地方都尽可能清晰。

您也可以始终使用图标字体。Entypo 在其免费集中包含此符号。线条是圆形的，在我看来，这看起来很好。Pictos 有一个点线点线点线的符号，这也很好。

我使用图标字体时，并没有遇到像那个 Unicode 图标那样模糊的问题。我不知道为什么会出现这种情况，但这就是生活。

更新：读者 G S 写道

关于文章 https://css-tricks.org.cn/three-line-menu-navicon/，一部较旧的诺基亚手机使用 Opera 12 能够显示 “与……相同”（U+2261） 的 Unicode 字符，但不能显示 “乾卦”（U+2630）。

似乎数学运算符比易经符号更有可能在字体中实现。

哪种方式最好？

我可能会避免使用 Unicode 符号，因为它没有正确的语义含义。我可能会避免仅仅为了这个符号而发出 HTTP 请求来获取图像。渐变方法很好，但它是一大块需要维护的代码。

我可能会选择内联 SVG。