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

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

然而，滑出式菜單經(jīng)常與頁面內(nèi)容沖突。它至少會遮擋內(nèi)容，最壞則會完全從UI中移除內(nèi)容。

我嘗試了一種不同的方法，它兼具固定位置菜單的持久性和可用性，以及節(jié)省空間的隱藏式滑出菜單的特性，且不會將用戶從當前內(nèi)容中移除。

下面是我的實現(xiàn)方法。

切換開關

我們正在構建一個具有兩種狀態(tài)（打開和關閉）的菜單，并在兩者之間切換。這就是復選框技巧發(fā)揮作用的地方。它非常完美，因為復選框具有兩種常見的交互狀態(tài)——選中和未選中（還有不確定狀態(tài)）——可用于觸發(fā)這些狀態(tài)。

復選框隱藏在菜單圖標下方，并使用CSS進行定位，因此即使用戶與之交互，也看不到它。選中復選框（或者，咳咳，菜單圖標）會顯示菜單。取消選中則隱藏它。就這么簡單。我們甚至不需要JavaScript來完成這項工作！

當然，復選框技巧并不是唯一的方法，如果您想使用JavaScript切換類來打開和關閉菜單，那也完全沒問題。

重要的是，復選框在源代碼中應位于主要內(nèi)容之前，因為我們將最終編寫的:checked選擇器需要使用同級選擇器。如果這會引起布局問題，請使用Grid或Flexbox進行布局，因為它們與源代碼順序無關，就像我如何利用其優(yōu)勢進行CSS計數(shù)一樣。

使用appearance CSS屬性去除復選框的默認樣式（由瀏覽器添加），然后添加帶有菜單圖標的偽元素，這樣用戶就看不到復選框的方塊。

首先，基本的標記：

<input type="checkbox" id="menu-toggle">
<div id="page">
  <!-- 頁面內(nèi)容 -->
</div>
<div id="menu">
  <!-- 菜單內(nèi)容 -->
</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%;
}

/* 頁面內(nèi)容容器 */
#page {
  background: url("earbuds.jpg") #ebebeb center/cover;
  width: 100%; height: 100%;
}

我還添加了#page內(nèi)容的樣式，它將是一個全尺寸背景圖像。

過渡效果

點擊菜單控件時會發(fā)生兩件事。首先，菜單圖標更改為“×”標記，表示可以點擊它來關閉菜單。因此，當輸入處于:checked狀態(tài)時，我們選擇復選框輸入的::after偽元素：

input:checked::after {
  content: "\00d7"; /* 更改為“×”標記 */
  color: #ebebeb;
}

其次，主要內(nèi)容（我們的“耳機”圖像）進行轉換，顯示下方的菜單。它向右移動、旋轉并縮小，其左側角變?yōu)榻切?。這是為了使內(nèi)容看起來像被推回，就像一個打開的門。

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

即使我們已經(jīng)得到了想要的東西，還有一件事可以提升用戶體驗：點擊（或點擊）#page元素時關閉菜單。這樣，用戶無需查找甚至使用“×”標記即可返回內(nèi)容。

由于這僅僅是隱藏菜單的另一種方法，我們可以使用JavaScript。如果由于某種原因禁用了JavaScript？沒關系。它只是一個增強功能，不會阻止菜單在沒有它的情況下工作。

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

這三行代碼的作用是在#page元素上添加一個點擊事件處理程序，如果復選框處于:checked狀態(tài)，則取消選中復選框，從而關閉菜單。

我們一直在查看為垂直/縱向設計制作的演示，但根據(jù)我們正在使用的內(nèi)容，它在大屏幕尺寸下也能同樣有效。

這只是對典型滑出式菜單的一種方法或嘗試。動畫打開了大量的可能性，您可能還會想到其他幾十個想法。事實上，我很想聽聽（或者更好的是，看到）它們，所以請分享！

以上是菜單揭示頁面旋轉動畫的詳細內(nèi)容。更多信息請關注PHP中文網(wǎng)其他相關文章！