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

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

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

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

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

切換開(kāi)關(guān)

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

復(fù)選框隱藏在菜單圖標(biāo)下方，并使用CSS進(jìn)行定位，因此即使用戶(hù)與之交互，也看不到它。選中復(fù)選框（或者，咳咳，菜單圖標(biāo)）會(huì)顯示菜單。取消選中則隱藏它。就這么簡(jiǎn)單。我們甚至不需要JavaScript來(lái)完成這項(xiàng)工作！

當(dāng)然，復(fù)選框技巧并不是唯一的方法，如果您想使用JavaScript切換類(lèi)來(lái)打開(kāi)和關(guān)閉菜單，那也完全沒(méi)問(wèn)題。

重要的是，復(fù)選框在源代碼中應(yīng)位于主要內(nèi)容之前，因?yàn)槲覀儗⒆罱K編寫(xiě)的:checked選擇器需要使用同級(jí)選擇器。如果這會(huì)引起布局問(wèn)題，請(qǐng)使用Grid或Flexbox進(jìn)行布局，因?yàn)樗鼈兣c源代碼順序無(wú)關(guān)，就像我如何利用其優(yōu)勢(shì)進(jìn)行CSS計(jì)數(shù)一樣。

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

首先，基本的標(biāo)記：

<input type="checkbox" id="menu-toggle">
<div id="page">
  <!-- 頁(yè)面內(nèi)容 -->
</div>
<div id="menu">
  <!-- 菜單內(nèi)容 -->
</div>

以及復(fù)選框技巧和菜單圖標(biāo)的基本CSS：

/* 隱藏復(fù)選框并重置樣式 */
input[type="checkbox"] {
  appearance: initial; /* 刪除方框 */
  border: 0; margin: 0; outline: none; /* 刪除默認(rèn)邊距、邊框和輪廓 */
  width: 30px; height: 30px; /* 設(shè)置菜單圖標(biāo)尺寸 */
  z-index: 1; /* 確保它位于頂部 */
}

/* 菜單圖標(biāo) */
input::after {
  content: "\2255";
  display: block;
  font: 25pt/30px "georgia";
  text-indent: 10px;
  width: 100%; height: 100%;
}

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

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

過(guò)渡效果

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

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

其次，主要內(nèi)容（我們的“耳機(jī)”圖像）進(jìn)行轉(zhuǎn)換，顯示下方的菜單。它向右移動(dòng)、旋轉(zhuǎn)并縮小，其左側(cè)角變?yōu)榻切巍＿@是為了使內(nèi)容看起來(lái)像被推回，就像一個(gè)打開(kāi)的門(mén)。

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來(lái)更改圖像的角。

由于我們正在對(duì)轉(zhuǎn)換應(yīng)用過(guò)渡，因此#page需要一個(gè)初始clip-path值，以便有東西可以進(jìn)行過(guò)渡。我們還將在#page上添加一個(gè)過(guò)渡，因?yàn)樗鼘⒃试S它像打開(kāi)一樣平滑地關(guān)閉。

#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%;
}

我們基本上完成了核心設(shè)計(jì)和代碼。當(dāng)復(fù)選框取消選中（通過(guò)點(diǎn)擊“×”標(biāo)記）時(shí)，耳機(jī)圖像上的轉(zhuǎn)換將自動(dòng)撤消，它將被帶回中心位置。

一點(diǎn)JavaScript

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

由于這僅僅是隱藏菜單的另一種方法，我們可以使用JavaScript。如果由于某種原因禁用了JavaScript？沒(méi)關(guān)系。它只是一個(gè)增強(qiáng)功能，不會(huì)阻止菜單在沒(méi)有它的情況下工作。

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

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

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

這只是對(duì)典型滑出式菜單的一種方法或嘗試。動(dòng)畫(huà)打開(kāi)了大量的可能性，您可能還會(huì)想到其他幾十個(gè)想法。事實(shí)上，我很想聽(tīng)聽(tīng)（或者更好的是，看到）它們，所以請(qǐng)分享！

以上是菜單揭示頁(yè)面旋轉(zhuǎn)動(dòng)畫(huà)的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！