仅使用 CSS 构建可折叠侧边栏-css教程-PHP中文网

仅使用 CSS 构建可折叠侧边栏

聖光之護

发布： 2024-10-26 17:36:50

转载

946人浏览过

在从事 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 构建可折叠侧边栏