使用隱藏的複選框輸入及其標(biāo)籤來(lái)切換菜單狀態(tài)，而無(wú)需JavaScript。 2。使用左側(cè)的CS將菜單放置在屏幕外：-250px並設(shè)置固定尺寸。 3。應(yīng)用：檢查偽級(jí)，以將菜單移至視圖左設(shè)置：0當(dāng)複選框切換時(shí)0。 4。添加菜單打開(kāi)時(shí)出現(xiàn)的半透明疊加層，增強(qiáng)UX並通過(guò)單擊啟用關(guān)閉。 5。使用媒體查詢使菜單響應(yīng)迅速，切換到較大屏幕上的水平佈局。結(jié)果是僅使用HTML和CSS的輕巧，易於訪問(wèn)和動(dòng)畫的外面菜單。

創(chuàng)建僅CSS的動(dòng)畫外面的玻璃菜單是完全可行的 - 這是保持網(wǎng)站輕量級(jí)而不依賴JavaScript的好方法。訣竅是使用隱藏的複選框輸入和:checked偽級(jí)來(lái)切換菜單狀態(tài)，並結(jié)合光滑的CSS過(guò)渡以進(jìn)行動(dòng)畫。

這是逐步建立一個(gè)方法：

?1。 html結(jié)構(gòu)：使用隱藏的複選框作為切換

我們將使用<input type="checkbox">來(lái)控制菜單的開(kāi)放/關(guān)閉狀態(tài)。它在視覺(jué)上保持隱藏，但可以驅(qū)動(dòng)互動(dòng)。

 <nav class =“ off-canvas-menu”>
  <input type =“複選框” id =“菜單toggle” class =“菜單toggle”>
  <標(biāo)籤=“菜單toggle” class =“菜單button”>?菜單</label>

  <ul class =“菜單符合”>
    <li> <a href =“?！?gt; home </a> </li>
    <li> <a href =“＃”>關(guān)於</a> </li>
    <li> <a href =“?！?gt;服務(wù)</a> </li>
    <li> <a href =“?！?gt;聯(lián)繫人</a> </li>
  </ul>
</nav>

<label>單擊時(shí)可切換複選框的可見(jiàn)按鈕。

?2。樣式菜單並將其放置

我們最初將菜單放在屏幕上，並在切換時(shí)將其滑入。

 .off-canvas-menu {
  位置：相對(duì)；
  z索引：1000;
}

.menu-toggle {
  顯示：無(wú)； / *隱藏複選框 */
}

.menu-button {
  顯示：塊;
  填充：1REM；
  背景：＃333;
  顏色：白色；
  文字平衡：中心；
  光標(biāo)：指針；
  字體家庭：sans-serif;
}

.menu-content {
  位置：固定；
  頂部：0;
  左：-250px; / *啟動(dòng)屏幕外 */
  寬度：250px;
  身高：100％；
  背景：＃222;
  顏色：白色；
  過(guò)渡：左0.3s易於;
  填充：50px;
  盒子陰影：2PX 0 5PX RGBA（0,0,0,0.3）;
}

?3。使用:checked以滑動(dòng)菜單

選中復(fù)選框（菜單打開(kāi)）後，將.menu-content移動(dòng)到視圖中。

 .menu-toggle：檢查?.menu-content {
  左：0; / *滑入視圖 */
}

此選擇器的意思是：“檢查復(fù)選框後，選擇後出現(xiàn)的.menu-content並施加left: 0 ?！?/p>

?4。添加平滑的動(dòng)畫和覆蓋（可選）

通過(guò)微妙的覆蓋層使菜單打開(kāi)時(shí)，使頁(yè)面變暗。

 .menu-toggle：檢查?.menu-overlay {
  不透明度：1;
  可見(jiàn)性：可見(jiàn)；
}

.menu-overlay {
  位置：固定；
  頂部：0;
  左：0;
  寬度：100％；
  身高：100％；
  背景：RGBA（0,0,0,0.5）;
  不透明度：0;
  可見(jiàn)性：隱藏；
  過(guò)渡：不透明度0.3s易於;
  Z-Index：999;
}

在HTML中的菜單內(nèi)容之前添加覆蓋層：

 <標(biāo)籤=“菜單toggle” class =“菜單 - 覆蓋層”> </label>

現(xiàn)在，單擊覆蓋層也將關(guān)閉菜單 - 這要for="menu-toggle"行為的標(biāo)籤。

?5。使其響應(yīng)迅速（可選）

在較大的屏幕上，您可能希望菜單保持打開(kāi)狀態(tài)或切換到內(nèi)聯(lián)。通過(guò)媒體查詢進(jìn)行調(diào)整：

 @Media（最小寬度：768px）{
  .menu-content {
    位置：靜態(tài)；
    寬度：自動(dòng)；
    身高：自動(dòng)；
    背景：無(wú)；
    過(guò)渡：無(wú)；
    顯示：Flex;
    差距：1REM；
  }

  .menu-overlay，.menu-button {
    顯示：無(wú)；
  }

  .menu-toggle：檢查?.menu-content {
    左：自動(dòng)； / *忽略膠外行為 */
  }
}

?最後筆記

• 可訪問(wèn)性：如果需要，可以通過(guò)JavaScript添加aria-hidden和aria-expanded （但是純CSS無(wú)法處理）。
• 沒(méi)有JS ：沒(méi)有JavaScript，這可以正常工作，但是在CSS中無(wú)法平穩(wěn)地從0到auto ，因此固定height或transform / left可以更安全。
• 觸摸友好：在移動(dòng)設(shè)備上工作很棒；只需確保點(diǎn)擊目標(biāo)足夠大。

就是這樣！您僅使用HTML和CSS提供了平穩(wěn)，動(dòng)畫的外面菜單。關(guān)鍵是利用Checkbox Hack和同胞選擇器來(lái)創(chuàng)建交互性。它簡(jiǎn)單，快速且對(duì)於輕質(zhì)站點(diǎn)。

基本上只是：隱藏一個(gè)複選框，樣式標(biāo)籤，用left或transform移動(dòng)菜單，然後通過(guò)transition動(dòng)畫。

以上是如何創(chuàng)建僅CSS的動(dòng)畫外面菜單菜單？的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！