汉堡包菜单_7种制作“汉堡包”菜单图标的非光栅方法

最新推荐文章于 2023-06-13 16:42:47 发布

daique1908

最新推荐文章于 2023-06-13 16:42:47 发布

阅读量1.1k

点赞数

文章标签： python css java html js ViewUI

汉堡包菜单

无论您是否喜欢俗气的名字，似乎臭名昭著的“汉堡包”菜单图标都将保留在这里-至少要持续一段时间。

在本教程中，我们将介绍在不使用光栅图像的情况下创建和样式化此类图标的多种方法。我有七个选择向您展示，所以我们最好能破解...

为什么非光栅？

使用图像既快速又简单，那么为什么还要寻找替代方法呢？以下是一些我们将用来衡量每种潜在解决方案是否成功的原因：

加载更少的资产可以减少HTTP请求
非光栅图标可无限放大（上下）以实现高密度显示
我们可以添加额外的样式和与CSS的交互性
这是一个很好的挑战！

使用SVG＃1。

稍后我们将看一些使用CSS创建菜单图标的示例，但是如果不提及SVG图像作为可行的选择，我的清单将是不完整的。

如果编写代码不是您的强项，但是您仍然希望图像元素的优点和可扩展性可用于高密度显示器，则SVG格式的矢量图形是一个不错的选择。

SVG可以通过多种方式使用：

SVG `<img>`

可以将SVG添加到img标签的src ，就像使用其他任何图像格式一样。

<img src="path/to/menu-icon.svg" alt="menu icon" width="70" height="50">

SVG `background-image`

相同的SVG图像也可用作CSS中的背景图像

.menu-icon {
    width:70px;
    height:50px;
    background-image:url('path/to/menu-icon.svg');
}

内联SVG

SVG也可以使用XML内联编写。如果从Adobe Illustrator之类的应用程序导出SVG并在代码编辑器中打开它，您将看到基础代码的外观。

提示：从Illustrator复制对象，然后直接粘贴到文本编辑器中也将获得SVG代码。

尽管将此XML复制并粘贴到页面模板中可能感觉很奇怪，但是当采用这种方法时，您实际上可以在CSS中操纵SVG各个元素的样式。

svg line {
    stroke: white;
}

很漂亮吧？

对于更令人印象深刻的方法，可以对SVG进行动画处理。在Kyle Henwood撰写的有关制作SVG HTML Burger Button的精彩教程中，可以看到一个动画菜单图标的好例子。

如上所示，使用SVG可以减少请求并允许通过CSS进行操作。当使用SVG作为img标签或CSS background-image ，列表中满足的唯一条件就是无限的可扩展性。

我们可以做得更好。

使用图标字体＃2。

第二种方法是使用图标字体。

图标字体就像您通过@font-face添加的其他任何自定义字体一样，但不包含字母，而是包含一系列符号。这些通常通过:before或:after伪元素的content属性添加到页面中，以使标记保持整洁，并且没有表示元素。

我最喜欢的图标字体服务之一是Icomoon ，它有一个免费的图标字体库，您可以选择创建自己的图标字体。

要创建自己图标设计的完全自定义字体，可以通过“导入图标”按钮上传自己的SVG图像。该应用程序会生成字体以及使用手工字体所需的所有代码，方法是下载字体文件和CSS，或者使用link标签将其托管版本link到页面head 。我已经在客户项目中多次使用了这项服务，使用起来真的很快乐！

图标字体是可缩放的（尽管它们是字体，但是会受到抗锯齿处理），并且可以在CSS中作为文本进行操作，但是将它们加载到页面上确实需要对字体文件和样式表的额外请求。对于上图所示的更复杂的图标，这是一种很好的方法，但是由于菜单图标非常简单，我们可以使用CSS中的功能来制作它。

自举法＃3。

诸如ZURB Foundation或Twitter Bootstrap之类CSS框架非常受欢迎，因此也许我们可以向这些人寻求一种精益的精益方法来创建图标？

对于宽度小于768像素的浏览器， BootstrapJavaScript将自动折叠下拉菜单，并用导航栏切换按钮替换它们。

使用网络检查器查看其图标的制作方式时，我们将看到以下内容：

内部有四个span元素的button元素；其中的三个用于创建菜单图标的水平线，第一个仅用于屏幕阅读器，因为“切换导航”文本位于屏幕外。

添加到每个icon-barCSS会为每个icon-bar设置背景颜色以及尺寸和非常细微的圆角。

.navbar-default .navbar-toggle .icon-bar {
    background-color: #888;
}
.navbar-toggle .icon-bar {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 1px;
}

如果每条水平线上的稍微圆角对您来说很重要，那么这种方法就是少数CSS选项之一，可以实现这种效果。

将每一行分割成自己的元素的另一个好处是，如果要在切换时在打开状态和关闭状态之间设置动画，请对它们进行动画处理。在新的《星球大战》重新设计中可以看到一个很好的例子。

我惊讶地发现如此受欢迎的框架使用五个单独的元素来创建此相对简单的UI元素，但我确信它们有这样做的充分理由。我也曾在其他地方（没有Bootstrap）看到过类似的方法，因此我所期望的当然更普遍。看看Media Temple网站上的消息来源，您会发现他们非常采用汉堡包方法！

<a href="#siteNav" class="hamburger js-menuLink" id="LuckyAnchor_518835807_2">
    <span class="hamburger-bun hamburger-bun--top"></span>
    <span class="hamburger-patty"></span>
    <span class="hamburger-bun hamburger-bun--btm"></span>
</a>

如果您希望保持标记尽可能整洁，我们可以考虑其他几种方法。他们只使用一个元素...

CSS边框＃4。

典型的菜单图标设计非常简单。只有三条水平线。

可以使用设置为display:inline-block的锚标记的border-top和border-bottom创建第一行和最后一行。中间行可以在伪:after元素上添加边框。

<a href="#" class="menu-icon border-icon">menu icon</a>

body {
    background:#196e76; /* Tuts+ Green */
}
.menu-icon {
    position:relative;
    display:inline-block;
    width:70px;
    text-indent:-999px;
}

.border-icon {
    height:30px;
    border-top:10px solid #fff;
    border-bottom:10px solid #fff;
}

.border-icon:before {
    content:"";
    position:absolute; 
    top:10px;
    left:0;
    width:100%;
    border-top:10px solid #fff;
}

这种方法具有最深的浏览器支持。 IE8及更高版本支持伪元素，并且到处都支持边框和位置！

此方法在创建非栅格图标的所有复选框中打勾，但是在选择获胜者之前，我们还可以考虑其他两种CSS方法。

CSS Box阴影＃5。

如果您足够幸运，不需要IE8支持，则可以使用一些替代方法，这些替代方法使用CSS中的一些较新的功能。我想，如果您只需要在移动设备上显示菜单图标，则可以使用任何一种方法，而不必担心对旧版浏览器的支持...

一种方法是使用多个没有模糊的box-shadow声明来创建一系列实线。

为了确保图标具有正确的可单击区域，必须通过伪元素添加一系列阴影，然后对其进行定位，以使其在a元素下方显示为一层。

.shadow-icon {
    height:40px;
}

.shadow-icon:after {
    content:"";
    position:absolute;
    top:-50px;
    left:0;
    width:100%;
    height:100%;
    box-shadow: 0 10px 0 #fff,
                0 20px 0 #196e76,
                0 30px 0 #fff,
                0 40px 0 #196e76,
                0 50px 0 #fff;
}

这种方法的唯一缺点是，需要将图标放置在具有纯色背景的物体上（即Tuts +绿色的#196e76 ），以使条纹阴影效果起作用。在这种情况下，我将#196e76用作Tuts +绿色，但您需要将其换出以匹配您的背景色。

同样，这种方法可以满足要求列表，但是放置伪元素以将图标的可视部分置于其可点击部分之下的额外步骤对我来说感觉有点不好。看起来不错，但不是最优雅的解决方案。

CSS渐变＃6。

最终CSS方法是最精简的。使用单个元素，不包含伪元素，我们可以使用带有一系列色标的单个线性渐变为图标创建一系列水平线。

我在这里使用了不带前缀的渐变规范，以使示例看起来更干净。要生成渐变并获取供应商的前缀变体，请查看ColorzillaCSS Gradient Generator 。

.gradient-icon {
    height:50px;
    background:linear-gradient(to bottom, #fff 0%, #fff 20%, transparent 20%, transparent 40%, #fff 40%, #fff 60%, transparent 60%, transparent 80%, #fff 80%, #fff 100%);
}

到目前为止，这是最简单，最灵活的方法。其他的则有些脆弱，因为如果要调整它们的大小或位置，最终需要调整很多值。

通过在白线之间使用transparent色标，也消除了在图标后面需要纯色背景色的问题。

由于此渐变方法是使用百分比色标进行的，因此使图标变宽或变高就像更改元素的width和height属性一样简单。

在三种CSS方法中，这是我的最爱。如果要使用CSS创建图标，那么这就是我要使用的图标-实际上，我已经在我的个人网站上这样做了。但是在我们总结之前，我只想告诉你一个...

使用键盘？＃7。

我之前已经尝试过所有这些方法，但是有些方法比其他方法更适合；浏览器的支持和灵活性通常是一个因素，因此，如果您想使用上述任何一种，请务必考虑到这些因素。

但是，最近我在教授响应式Web开发课程时遇到了一种更加简单，容易得多的方法。

实际上，UTF-8字符集中有一个字符几乎与经典的“汉堡”图标相同。我在其“图形形状”部分的“ 复制粘贴字符”中寻找完全不同的东西时找到了它。

这个特殊字符：☰被称为Trigram for Heaven 。它是Unicode字符U+2630 ，与普遍存在的菜单图标异常相似。它是八种三合一符号之一，是在中国哲学中具有深层含义的一组符号。有关更多信息，您可以在此处阅读有关八个 Trigram的更多信息。

要在项目中使用它，请转到复制粘贴字符并单击将其复制到剪贴板的符号。只需将其粘贴到您希望在其中显示“图标”的文本编辑器即可。如果愿意，还可以直接从本文的正文复制它。

您将要确保您的文档使用的是页面head meta标记所指定的UTF-8字符集：

<meta charset="utf-8">

由于这只是文本内容，因此可以在CSS中对其进行样式设置以使其更大，为其提供间距，更改其颜色以及所有其他方式！

回顾

因此，我们研究了创建和向项目添加汉堡菜单图标的多种方法。我们研究了SVG和图标字体，并解决了三种仅CSS的方法，但最终找到了所有这两种方法中最简单的解决方案。使用unicode字符。

使用“天堂三叉戟”会剔除不使用光栅图像的所有要求：它需要零HTTP请求，它对于高密度屏幕可以无限扩展，可以用CSS进行操作，并且非常简单，它使我们可以自由地进行搜索应对其他令人兴奋的挑战！我想在开始精通CSS之前找到一个简单的解决方案总是值得的...

如果您还有其他创建“汉堡”图标的方法，我很乐意在评论中听到它们！

翻译自: https://webdesign.tutsplus.com/tutorials/7-non-raster-approaches-for-making-the-hamburger-menu-icon--cms-21686

汉堡包菜单

daique1908

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
汉堡包菜单_7种制作“汉堡包”菜单图标的非光栅方法

无论您是否喜欢俗气的名字，似乎臭名昭著的“汉堡包”菜单图标都将保留在这里-至少要持续一段时间。在TechCrunch上看到的汉堡包在本教程中，我们将介绍许多无需使用光栅图像即可创建和样式化图标的方法。我有七个选择向您展示，所以我们最好能破解... 为什么非光栅？使用图像既快速又简单，那么为什么还要寻找替代方法呢？以下是一些我们用来衡量每种潜在解决方案是否成功的原因： ...
复制链接

扫一扫