Erstellen Sie reduzierbare Seitenleisten nur mit CSS

Während der Arbeit an einem NextJS-Projekt bin ich auf eine Situation gestoßen, in der ich wollte, dass meine Seitenleistenkomponente zusammenklappbar ist. Auf den ersten Blick schien es einfach und leicht machbar zu sein, Reaktions-Hooks wie useState zu verwenden, um den Umschaltstatus beizubehalten.
Aber die Verwendung von Hooks hätte mich gezwungen, meine Komponente clientseitig zu machen, was ich nicht wollte.
Also suchte ich im Internet nach möglichen Lösungen für mein Problem und fand eine Hintertür, um mein gewünschtes Ergebnis zu erzielen, und das war ... Trommelwirbel ... Kontrollkästchen, Ja, Sie Lesen Sie es richtig, Kontrollkästchen würden als Umschalter fungieren.
Wir können den Status der aktivierten Kontrollkästchen verwenden, um unsere kostbare, kleine, vom Server gerenderte Seitenleiste umzuschalten.
Lassen wir das alles beiseite und machen wir gleich mit dem Coden weiter.
Beachten Sie, dass ich für das Styling Rückenwind-CSS verwenden werde.
Okay, also richten wir zunächst einen Standardcode für unsere App ein. Wir möchten eine Seitenleiste und einen Haupt-Dashboard-Bereich. Wir können dies mit dem folgenden Code erreichen

<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>

Da wir nun unser Boilerplate fertig haben, kommen wir nun zum Hauptteil, d. h. dem Hinzufügen einer Schaltfläche zum Umschalten dieser Seitenleiste. Dazu müssen wir ein Kontrollkästchen mit Beschriftung als Symbol zum Umschalten hinzufügen, sagen wir Hamburger. Wir werden dieses Kontrollkästchen ausblenden, da es hässlich aussieht, und behalten einfach die Beschriftung bei, um es zu aktivieren/deaktivieren.

<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 ...>
...

Cool, wir haben unser Kontrollkästchen. Wir müssen nur ein paar Drähte anschließen, damit wir unser Menü irgendwie ausblenden können, wenn das Kontrollkästchen deaktiviert ist, und dieses Menü anzeigen können, wenn es aktiviert ist.
Dies können wir mit der Pseudoklasse checked erreichen.
Okay, ich habe deinen Hinweis verstanden, Keine Scheiße, wir wissen das alles, zeig mir einfach den Code.., Ja, warte mal mit meinem Milchshake

<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">
...

Ja, das war alles, was Sie brauchten, um zusammenklappbares Verhalten zu erreichen.
Welche besseren Stile wünschen Sie sich, damit Sie sie einfach direkt verwenden können?
Ich stehe hinter dir, los geht's

<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>

Probieren Sie es hier aus

Ich hoffe, ich war hilfreich. Schauen Sie sich hier mein Entwicklerportfolio an.

Das obige ist der detaillierte Inhalt vonErstellen Sie reduzierbare Seitenleisten nur mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!