菜单揭示页面旋转动画

网站菜单设计方法多样，有些菜单始终可见，直接显示所有选项；另一些则隐藏起来，需要点击才能展开。隐藏菜单的展开方式也各有不同：有的滑出并覆盖内容，有的推开内容，有的则采用全屏显示。

每种方法都有优缺点，最佳选择取决于具体应用场景。我个人通常更喜欢滑出式菜单，当然并非所有情况都适用。但如果需要节省空间且易于访问的菜单，滑出式菜单很难被超越。

然而，滑出式菜单经常与页面内容冲突。它至少会遮挡内容，最坏则会完全从UI中移除内容。

我尝试了一种不同的方法，它兼具固定位置菜单的持久性和可用性，以及节省空间的隐藏式滑出菜单的特性，且不会将用户从当前内容中移除。

下面是我的实现方法。

切换开关

我们正在构建一个具有两种状态（打开和关闭）的菜单，并在两者之间切换。这就是复选框技巧发挥作用的地方。它非常完美，因为复选框具有两种常见的交互状态——选中和未选中（还有不确定状态）——可用于触发这些状态。

复选框隐藏在菜单图标下方，并使用CSS进行定位，因此即使用户与之交互，也看不到它。选中复选框（或者，咳咳，菜单图标）会显示菜单。取消选中则隐藏它。就这么简单。我们甚至不需要JavaScript来完成这项工作！

当然，复选框技巧并不是唯一的方法，如果您想使用JavaScript切换类来打开和关闭菜单，那也完全没问题。

重要的是，复选框在源代码中应位于主要内容之前，因为我们将最终编写的:checked选择器需要使用同级选择器。如果这会引起布局问题，请使用Grid或Flexbox进行布局，因为它们与源代码顺序无关，就像我如何利用其优势进行CSS计数一样。

使用appearance CSS属性去除复选框的默认样式（由浏览器添加），然后添加带有菜单图标的伪元素，这样用户就看不到复选框的方块。

首先，基本的标记：

<input type="checkbox" id="menu-toggle">
<div id="page">
  <!-- 页面内容 -->
</div>
<div id="menu">
  <!-- 菜单内容 -->
</div>

以及复选框技巧和菜单图标的基本CSS：

/* 隐藏复选框并重置样式 */
input[type="checkbox"] {
  appearance: initial; /* 删除方框 */
  border: 0; margin: 0; outline: none; /* 删除默认边距、边框和轮廓 */
  width: 30px; height: 30px; /* 设置菜单图标尺寸 */
  z-index: 1; /* 确保它位于顶部 */
}

/* 菜单图标 */
input::after {
  content: "\2255";
  display: block;
  font: 25pt/30px "georgia";
  text-indent: 10px;
  width: 100%; height: 100%;
}

/* 页面内容容器 */
#page {
  background: url("earbuds.jpg") #ebebeb center/cover;
  width: 100%; height: 100%;
}

我还添加了#page内容的样式，它将是一个全尺寸背景图像。

过渡效果

点击菜单控件时会发生两件事。首先，菜单图标更改为“×”标记，表示可以点击它来关闭菜单。因此，当输入处于:checked状态时，我们选择复选框输入的::after伪元素：

input:checked::after {
  content: "\00d7"; /* 更改为“×”标记 */
  color: #ebebeb;
}

其次，主要内容（我们的“耳机”图像）进行转换，显示下方的菜单。它向右移动、旋转并缩小，其左侧角变为角形。这是为了使内容看起来像被推回，就像一个打开的门。

input:checked ~ #page {
  clip-path: polygon(0 8%, 100% 0, 100% 100%, 0 92%);
  transform: translateX(40%) rotateY(10deg) scale(0.8);
  transform-origin: right center;
  transition: all .3s linear;
}

我使用clip-path来更改图像的角。

由于我们正在对转换应用过渡，因此#page需要一个初始clip-path值，以便有东西可以进行过渡。我们还将在#page上添加一个过渡，因为它将允许它像打开一样平滑地关闭。

#page {
  background: url("earbuds.jpeg") #ebebeb center/cover;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: all .3s linear;
  width: 100%; height: 100%;
}

我们基本上完成了核心设计和代码。当复选框取消选中（通过点击“×”标记）时，耳机图像上的转换将自动撤消，它将被带回中心位置。

一点JavaScript

即使我们已经得到了想要的东西，还有一件事可以提升用户体验：点击（或点击）#page元素时关闭菜单。这样，用户无需查找甚至使用“×”标记即可返回内容。

由于这仅仅是隐藏菜单的另一种方法，我们可以使用JavaScript。如果由于某种原因禁用了JavaScript？没关系。它只是一个增强功能，不会阻止菜单在没有它的情况下工作。

document.querySelector("#page").addEventListener('click', (e, checkbox = document.querySelector('input')) => {
  if (checkbox.checked) { checkbox.checked = false; e.stopPropagation(); }
});

这三行代码的作用是在#page元素上添加一个点击事件处理程序，如果复选框处于:checked状态，则取消选中复选框，从而关闭菜单。

我们一直在查看为垂直/纵向设计制作的演示，但根据我们正在使用的内容，它在大屏幕尺寸下也能同样有效。

这只是对典型滑出式菜单的一种方法或尝试。动画打开了大量的可能性，您可能还会想到其他几十个想法。事实上，我很想听听（或者更好的是，看到）它们，所以请分享！

以上是菜单揭示页面旋转动画的详细内容。更多信息请关注PHP中文网其他相关文章！