僅使用 CSS 建立可折疊側邊欄

在從事 NextJS 專案時，我偶然發現了一種情況，我希望我的側邊欄組件可折疊。乍一看，它看起來很簡單，可以使用諸如 useState 之類的 React hook 來維護切換狀態。
但是使用鉤子會迫使我將元件製作為客戶端，這是我不想要的。
因此，我在互聯網的海洋中徘徊，尋找可能的解決方案來解決我的問題，並找到了一個後門來實現我想要的結果，那就是..鼓聲.... 複選框，是的，你沒看錯，複選框將充當切換器。
我們可以使用複選框選中狀態來切換我們的珍貴的、小的、伺服器渲染的側邊欄。
拋開所有這些，讓我們立即開始編寫程式碼。
請注意，我將使用 tailwind css 進行樣式設定。
好的，首先讓我們為我們的應用程式設定一個樣板程式碼，我們需要一個側邊欄和一個主儀表板部分。我們可以使用下面的程式碼來實作

<main class="grid grid-cols-[auto_1fr] min-h-screen">
  <nav class="min-h-screen w-64 bg-red-500">
    <ul class="p-8">
      <li>Element 1</li>
      <li>Element 2</li>
      <li>Element 3</li>
      <li>Element 4</li>
    </ul>
  </nav>
  {/* Main Content */}
  <section class="px-8 py-12">
    Hello, dev!
  </section>
</main>

現在我們已經準備好了樣板，現在我們進入主要部分，即新增一個按鈕來切換側邊欄。為此，我們必須添加帶有標籤的複選框作為切換圖標，例如漢堡。我們將隱藏該複選框，因為它看起來很難看，只需保留標籤來選取/取消選取它。

<main ...>
  <div>
    <input type="checkbox" id="toggler" class="hidden"/>
    <label for="toggler" class="fixed top-1 left-4 z-50 cursor-pointer">
      &#9776;
    </label>
  </div>
  <nav ...>
...

酷，我們有複選框了。我們只需要連接一些電線，這樣我們就可以在取消選取核取方塊時隱藏我們的選單，並在選取它時顯示該選單。
我們可以使用 checked 偽類來實現這一點。
好吧，我明白你的提示了，不廢話，我們知道這一切，只需告訴我代碼..，是的，拿著我的奶昔

<main ...>
  <div>
    <input type="checkbox" id="toggler" class="hidden peer"/>
    <label for="toggler" class="fixed top-1 left-4 z-50 cursor-pointer">
    <nav class="min-h-screen w-64 bg-red-500 fixed z-40 hidden peer-checked:block">
...

是的，這就是實現可折疊行為所需的全部。
您想要什麼更好的樣式以便直接使用？
我支持你，你走吧

<main class="grid grid-cols-[auto_1fr] min-h-screen">
  <input type="checkbox" id="toggler" class="hidden peer"/>

  <label for="toggler" class="fixed top-1 left-4 z-50 cursor-pointer peer-checked:hidden">
    &#9776;
  </label>
  <label for="toggler" class="fixed top-1 left-4 z-50 cursor-pointer hidden peer-checked:inline">
    X
  </label>

  <!-- overlay -->
  <div class="fixed inset-0 bg-black opacity-50 peer-checked:block hidden" />

  <nav class="min-h-screen w-64 bg-red-500 fixed z-40 transition-transform -translate-x-full peer-checked:translate-x-0">
    <ul class="p-8">
      <li>Element 1</li>
      <li>Element 2</li>
      <li>Element 3</li>
      <li>Element 4</li>
    </ul>
  </nav>

  <section class="px-8 py-12">
    Hello, collapsible sidebar is made just using CSS
  </section>
</main>

在這裡試試看

希望我能有所幫助，請在此處查看我的開發作品集。

以上是僅使用 CSS 建立可折疊側邊欄的詳細內容。更多資訊請關注PHP中文網其他相關文章！