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

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《仅使用 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 构建可折叠侧边栏》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！