我在网页上想使用一个"三横线"符号，这个符号在哪里可以获取？

Question

我正在尝试弄清楚如何在我的网页上获取这个符号：

这个符号叫什么？是否有方法可以像使用

<▾>

一样在我的网页上获取它？

▾

非常感谢您的提前帮助。

- INeedHelp

---

这个符号通常被称为“汉堡按钮”。在这里描述了几种制作它的方法：https://css-tricks.com/three-line-menu-navicon/ - Akatosh

动画效果的菜单图标：http://tympanus.net/Tutorials/AnimatedMenuIcon/，https://codepen.io/kyleHenwood/pen/Alayb，http://codepen.io/designcouch/pen/Atyop，http://callmenick.com/_development/css-hamburger-menu-icons/。 - Nenad Vracar

Answer 1

这是所谓的“汉堡菜单”。

最接近的HTML实体是≡，加粗 ≡ ≡ 或者 ≡，在几乎所有地方都有支持。

还有一个☰ ☰，但是它支持较少，特别是在Android上不可用。

对于一个小图标来说可能已经足够了，如果需要更大的可以使用一个纯CSS实现：

.ham-menu { display: inline-block; position: relative; margin: 35px 0; } /* margin = (width-height)/2 */
.ham-menu, .ham-menu::before, .ham-menu::after { width: 100px; height: 20px; border-radius: 7px; background-color: black; }
.ham-menu::before, .ham-menu::after { content: ""; display: block; position: absolute; }
.ham-menu::before { bottom: 130%; } .ham-menu::after { top: 130%; }

<span class="ham-menu"></span>

- user

Answer 2

提供在评论链接中的所有方法都很棒。但是还有一种方式没有在那里描述，就像bootstrap也在使用的方式一样。这种方法的优先选择是因为它是纯CSS可动画化的。

<div class="menu-icon">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
</div>

.menu-icon > .line {
    background-color: #292929;
    height: 2px;
    display: block;
}
.menu-icon > .line + .line {
    margin-top: 8px;
}

- Farzad Yousefzadeh

---

https://jsfiddle.net/znec584x/ 为Farzad的小修改，感谢大家！ - INeedHelp

Answer 3

你可以在这里找到Unicode和HTML实体代码: https://graphemica.com/%E2%98%B0 或者只需复制并粘贴这个简单的符号: ☰

- John Lloyd Gonzales

Answer 4

你可以使用 Font Awesome

<button class="btn"><i class="fa fa-bars"></i></button>

CSS 部分

.btn {
    border: none;
    background-color: ghostwhite;
    color: black;
    font-size: 30px;
    cursor: pointer;
}

如果要在单击时展开，您可能需要使用一些基于类的JavaScript选择器。

const closeBtn = document.querySelector(".btn");
const sidenav = document.querySelector(".sidenav");
const closeSideNav = document.querySelector(".closeSideNav");

closeBtn.addEventListener("click", function() {
    sidenav.classList.remove("hidden");
});

- George Njue