Maison > interface Web > tutoriel CSS > le corps du texte

Créez des barres latérales pliables en utilisant uniquement CSS

Mary-Kate Olsen
Libérer: 2024-10-27 11:37:30
original
223 Les gens l'ont consulté

En travaillant sur un projet NextJS, je suis tombé sur une situation où je voulais que mon composant de barre latérale soit pliable. À première vue, cela semblait simple et facilement réalisable en utilisant des hooks de réaction tels que useState pour maintenir l'état de bascule.
Mais utiliser des hooks m'aurait obligé à rendre mon composant côté client, ce que je ne voulais pas.
J'ai donc erré dans la mer d'Internet à la recherche de solutions possibles à mon problème, et j'ai découvert une porte dérobée pour obtenir le résultat souhaité et c'était ainsi... roulement de tambour.... cases à cocher, oui vous lisez-le bien, les cases à cocher agiraient comme un basculeur.
Nous pouvons utiliser les cases à cocher cochées pour activer notre barre latérale précieuse, petite, rendue par le serveur.
Laissant tout cela de côté, passons tout de suite au code.
Notez que j'utiliserai tailwind css pour le style.
D'accord, commençons par configurer un code passe-partout pour notre application, nous voulons une barre latérale et une section de tableau de bord principal. Nous pouvons y parvenir en utilisant le code ci-dessous

<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>
Copier après la connexion

Maintenant que notre passe-partout est prêt, nous arrivons maintenant à la partie principale, c'est-à-dire ajouter un bouton pour basculer cette barre latérale. Pour cela, nous devrons ajouter une case à cocher avec une étiquette comme icône de bascule, disons hamburger. Nous masquerons cette case à cocher car elle aura l'air moche et conserverons simplement l'étiquette pour la cocher/décocher.

<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 ...>
...
Copier après la connexion

Cool, nous avons notre case à cocher. Nous devons simplement connecter quelques fils pour pouvoir masquer notre menu lorsque la case n'est pas cochée et lorsqu'elle est cochée, afficher ce menu.
Nous pouvons y parvenir en utilisant la pseudo-classe checked.
D'accord, j'ai compris votre indice, pas de conneries, nous savons tout ça, montre-moi juste le code.., ouais, attends mon milkshake

<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">
...
Copier après la connexion

Oui, c'était tout ce dont vous aviez besoin pour obtenir un comportement pliable.
Que voulez-vous de meilleurs styles pour pouvoir l'utiliser directement ?
Je te soutiens, c'est parti

<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>
Copier après la connexion

Essayez-le ici
Build collapsible sidebars using just CSS

J'espère avoir été utile, consultez mon portfolio de développement ici.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!