Utilisez des cases à cocher cachées pour contr?ler l'état du menu; 2. Positionnez le menu hors écran par défaut via CSS; 3. Utilisez des sélecteurs vérifiés et des frères pour développer l'effet; 4. Ajouter une transition pour réaliser une animation en douceur; 5. Contenu poussé en option ou ajouter des masques pour améliorer l'expérience utilisateur. Cette méthode peut réaliser un menu de barres latéraux CSS léger et efficace sans JavaScript, ce qui convient aux sites Web simples ou aux scénarios d'apprentissage, complet et efficace.

La création d'un menu hors canalisation avec CSS est un moyen propre et efficace d'économiser de l'espace, en particulier sur les appareils mobiles, tout en offrant une navigation facile. Vous pouvez le construire en utilisant uniquement HTML et CSS (pas de JavaScript requis pour les fonctionnalités de base), en tirant parti des transformations et des cases à cocher pour la baisse.

Voici comment le faire étape par étape:

? 1. Structure HTML de base

Commencez par une disposition simple: un bouton à bascule, une zone de contenu principale et la barre latérale hors canalisation.

 <input type = "checkbox" id = "menu-toggle" class = "menu-toggle">
<étiquette pour = "menu-toggle" class = "menu-button"> ? </ labe>

<nav class = "off-canvas-menu">
  <ul>
    <li> <a href = "#"> Accueil </a> </li>
    <li> <a href = "#"> à propos de </a> </li>
    <li> <a href = "#"> Services </a> </li>
    <li> <a href = "#"> Contact </a> </li>
  </ul>
</ nav>

<Main class = "Main-content">
  <h1> Contenu de votre site Web </h1>
  <p> Cliquez sur l&#39;ic?ne du menu pour ouvrir la navigation hors canalisation. </p>
</-main>

Nous utilisons une case à cocher cachée ( menu-toggle ) pour contr?ler l'état du menu via CSS. L'étiquette agit comme le bouton à bascule.

? 2. Styliser le menu hors canapé avec CSS

L'idée clé est de positionner le menu hors écran par défaut et de le faire glisser en utilisant transform .

 / * Réinitialiser les styles de base * /
corps {
  marge: 0;
  Font-Family: Arial, Sans-Serif;
  Overflow-X: Hidden; / * Empêcher le défilement horizontal * /
}

.Menu-Toggle {
  Affichage: aucun; / * Caché mais fonctionnel * /
}

.Menu-bouton {
  Position: fixe;
  En haut: 10px;
  Gauche: 10px;
  Contexte: # 333;
  Couleur: blanc;
  rembourrage: 10px;
  curseur: pointeur;
  Border-Radius: 4px;
  Z-Index: 3;
}

/ * Menu hors canaux * /
.off-canvas-menu {
  Position: fixe;
  en haut: 0;
  à gauche: 0;
  Largeur: 250px;
  hauteur: 100%;
  Contexte: # 222;
  Couleur: blanc;
  Transform: Translatex (-100%); / * Caché par défaut * /
  transition: transformer 0,3 s facilité;
  Z-Index: 2;
  Tableau de rembourrage: 60px;
}

.off-canvas-menu ul {
  Style de liste: aucun;
  rembourrage: 0;
  marge: 0;
}

.off-canvas-menu a {
  Affichage: bloc;
  rembourrage: 15px 20px;
  Couleur: blanc;
  Décoration du texte: aucune;
  Border-Bottom: 1px solide # 444;
}

.off-canvas-menu A: Hover {
  Contexte: # 444;
}

/ * Contenu principal * /
.
  rembourrage: 20px;
  transition: transformer 0,3 s facilité;
}

? 3. Basculer le menu à l'aide du piratage de la case à cocher

Utilisez la pseudo-classe :checked pour déclencher l'apparence du menu lorsque la case est basée.

 / * Afficher le menu lorsque la bo?te à cocher est cochée * /
.Menu-toggle: vérifié ~ .off-canvas-menu {
  transformée: tradlatex (0); / * Glisser dans * /
}

/ * Facultatif: appuyez sur le contenu principal lorsque le menu est ouvert * /
.Menu-toggle: vérifié ~ .main-content {
  transform: tradlatex (250px);
}

Le ~ (combinateur de frères généraux) nous permet de styliser des éléments qui viennent après la case à cocher dans le DOM.

? 4. Facultatif: ajouter une superposition ou un comportement réactif

Pour un meilleur UX, vous voudrez peut-être diminuer l'arrière-plan lorsque le menu est ouvert.

 / * Ajouter une superposition semi-transparente * /
.Menu-toggle: vérifié ~ .main-content :: avant {
  contenu: '';
  Position: fixe;
  en haut: 0;
  à gauche: 0;
  à droite: 0;
  en bas: 0;
  Contexte: RGBA (0, 0, 0, 0,5);
  Z-Index: 1;
}

Cette superposition aide également à fermer le menu lorsque vous cliquez sur (depuis que cliquez en dehors du menu déclenche l'étiquette ou le corps, décochez l'entrée).

? Résumé des points clés

• Utilisez une case à cocher cachée comme état à bascule.
• Positionnez le menu hors écran avec transform: translateX(-100%) .
• Utilisation :checked et s?urs pour déclencher l'effet de diapositive .
• Ajoutez des transitions lisses avec transition .
• Puyez éventuellement le contenu ou ajoutez une superposition pour un meilleur UX.

Cette méthode est légère et fonctionne sans javascript. Alors que les applications modernes utilisent souvent JS pour un comportement plus complexe, cette solution Pure-CSS est parfaite pour des sites simples ou des fins d'apprentissage.

Fondamentalement, il s'agit de positionnement, de transformations et d'utilisation intelligente du piratage de la case à cocher. Pas flashy, mais efficace.

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!