菜單揭示頁面旋轉動畫

網站菜單設計方法多樣，有些菜單始終可見，直接顯示所有選項；另一些則隱藏起來，需要點擊才能展開。隱藏菜單的展開方式也各有不同：有的滑出並覆蓋內容，有的推開內容，有的則採用全屏顯示。

每種方法都有優缺點，最佳選擇取決於具體應用場景。我個人通常更喜歡滑出式菜單，當然並非所有情況都適用。但如果需要節省空間且易於訪問的菜單，滑出式菜單很難被超越。

然而，滑出式菜單經常與頁面內容衝突。它至少會遮擋內容，最壞則會完全從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中文網其他相關文章！