汉堡菜单 CSS（无 JS）
根据大家对我最初发布的 Twitter 帖子的反馈，我编写了这个关于如何在不使用 js 的情况下制作汉堡菜单的简短教程。
尽情享用吧😁！
：目标
你听说过 CSS 伪类吗:target？
它为通过链接调用的具有锚点 ID的元素设置样式。
例如，一个p带有 idhome和a链接的元素href=#home：
<p id="home">Home</p>
<a href="#home">Go to Home</a>
p:target {
color: red;
}
当我们点击链接时a，目标文本p会变成红色。
点击另一个链接，:target样式就会隐藏。
<p id="home">Home</p>
<a href="#home">Go to Home</a>
<a href="#">Go somewhere else</a>
以下是完整的HTML代码。
我通过在 html 文件的头部添加它们的 cdn来使用material 图标。
<head>
<!-- ... -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<ul class="menu" id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contacts</a></li>
<a class="close" href="#">
<span class="material-icons">
close
</span>
</a>
</ul>
<a class="hamburger" href="#menu">
<span class="material-icons">
menu
</span>
</a>
Material 图标的工作原理是定义一个带有material-iconsclass 的 span 标签，并在标签之间添加关键字：
<span class="material-icons">
close
</span>
-
该元素
ul具有 id 值menu。它包含菜单和关闭图标链接。 -
a带有 class 属性的元素hamburger有 href 属性#menu，点击它将显示:target菜单的样式ul。 -
点击其他链接（首页、个人资料、关于、联系方式）和
close链接将移除.:targetul
现在我们只需要添加一点 CSS 代码 ✨。
汉堡菜单链接的位置fixed可以调整，使其脱离页面流程。
菜单fixed也有自己的位置，而且比汉堡链接更大z-index，可以将菜单放在链接上方。
为了保持一致性，我把汉堡包和香肠放在了同一个角落。
css
.hamburger {
position: fixed;
/* a large z-index puts the ham button above the rest of the page*/
z-index: 99;
background: white;
border: none;
cursor: pointer;
top: 1rem;
right: 1rem;
}
.menu {
position: fixed;
/* give the menu a larger z-index than the ham link
to put the menu above it */
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100vh;
/* basic menu styling*/
list-style: none;
background: black;
display: flex;
flex-direction: column;
/* animate slide up/down */
transform: translateY(-100%);
transition: transform 0.2s ease;
}
.close {
position: absolute;
border: none;
color: white;
cursor: pointer;
top: 1rem;
right: 1rem;
}
菜单默认隐藏transform: translateY(-100%);。沿 Y 轴平移 -100% 会将其向上移动到屏幕上方 100%。
通过在 transform 上添加过渡效果，transition: transform 0.2s;当 transform translateY 的值发生变化时，我们就能得到一个小小的滑入滑出动画。
我们将 Y 轴的平移量重置为 0，并在其上显示菜单:target。
css
.menu:target {
/* show menu */
transform: translateY(0);
}
感谢阅读😄！
- 感谢Martin告诉我应该对变换进行动画处理而不是对高度进行动画处理，以获得 GPU 支持。