如何使用 HTML 和 CSS 创建关闭菜单图标

有关如何创建悬停时转换为关闭图标的菜单图标的分步指南

HTML

对于 HTML，我们需要一个包含 3 个 div 元素的容器——每一行一个元素。
容器将有一个类“menu_icon”。

<div class="menu_icon">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS
对于 CSS，首先我们将设置容器的样式。
我们将使用 Flexbox 在列中显示子元素，并在它们之间添加一点间隙。
然后我们将宽度设置为 8 px，这意味着每条线的宽度都是 8 像素。
由于该元素应该是可单击的，并且应该在单击时关闭菜单，因此我们将光标设置为指针。