CSS만 사용하여 접이식 사이드바 구축-CSS 튜토리얼-php.cn

CSS만 사용하여 접이식 사이드바 구축

Mary-Kate Olsen

풀어 주다： 2024-10-27 11:37:30

원래의

302명이 탐색했습니다.

NextJS 프로젝트를 진행하는 동안 사이드바 구성요소를 접을 수 있기를 원하는 상황을 우연히 발견했습니다. 언뜻 보면 토글 상태를 유지하기 위해 useState와 같은 반응 후크를 사용하여 간단하고 쉽게 수행할 수 있는 것처럼 보였습니다.
하지만 후크를 사용하면 내가 원하지 않는 구성 요소를 클라이언트 측으로 만들 수밖에 없었을 것입니다.
그래서 나는 내 문제에 대한 가능한 해결책을 찾기 위해 인터넷 바다를 헤매다가 내가 원하는 결과를 얻을 수 있는 백도어를 발견했고 그 방법은 .... 드럼 롤 .... 체크박스, 네 당신이었습니다. 제대로 읽어보세요. 체크박스는 토글러 역할을 합니다.
확인란이 선택된 상태를 사용하여 귀중하고 작은 서버 렌더링 사이드 바
를 전환할 수 있습니다. 이 모든 것을 제쳐두고 바로 코드로 넘어가겠습니다.
스타일링에는 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>

로그인 후 복사

여기서 한번 체험해 보세요
Build collapsible sidebars using just CSS