Verwenden Sie versteckte Kontrollk?stchen, um den Menüstatus zu steuern. 2. Positionieren Sie das Menü au?erhalb des Bildschirms standardm??ig über CSS. 3.. Verwenden Sie die überprüfung und die Bruderauswahl, um den Effekt zu entwickeln. 4. Fügen Sie übergang hinzu, um eine reibungslose Animation zu erreichen. 5. Optionale Push -Inhalte oder Masken hinzufügen, um die Benutzererfahrung zu verbessern. Diese Methode kann ein leichtes und effizientes CSS -Seitenleistenmenü ohne JavaScript erreichen, das für einfache Websites oder Lernszenarien geeignet ist, vollst?ndig und effektiv.

Das Erstellen eines Off-Canvas-Menüs mit CSS ist eine saubere und effiziente M?glichkeit, Platz zu sparen-insbesondere auf mobilen Ger?ten-und gleichzeitig eine einfache Navigation bietet. Sie k?nnen es nur mit HTML und CSS erstellen (kein JavaScript, das für die grundlegende Funktionalit?t erforderlich ist), um Transformationen und Kontrollk?stchen zum Umschalten zu nutzen.

Hier erfahren Sie, wie man es Schritt für Schritt macht:

? 1. Grundlegende HTML -Struktur

Beginnen Sie mit einem einfachen Layout: einer Schaltfl?che umschalten, einen Hauptinhaltsbereich und die Seitenleiste au?erhalb der Kanal.

 <Eingabe type = "checkBox" id = "Menü-Toggle" class = "Menü-Toggle">
<Label für = "Menü-Toggle" class = "Menü-Button"> ? </label>

<nav class = "off-canvas-menu">
  <ul>
    <li> <a href = "#"> home </a> </li>
    <li> <a href = "#"> über </a> </li>
    <li> <a href = "#"> dienste </a> </li>
    <li> <a href = "#"> Kontakt </a> </li>
  </ul>
</nav>

<main class = "Main-In-Incontent">
  <h1> Ihr Website -Inhalt </h1>
  <P> Klicken Sie auf das Menüsymbol, um die Off-Canvas-Navigation zu ?ffnen. </p>
</main>

Wir verwenden ein verstecktes Kontrollk?stchen ( menu-toggle ), um den Menüstatus über CSS zu steuern. Das Etikett fungiert als Umschalttaste.

? 2. Stylen des Off-Canvas-Menüs mit CSS

Die Schlüsselidee besteht darin, das Menü standardm??ig au?erhalb des Bildschirms zu positionieren und es mit transform einzuschlagen.

 / * Zurücksetzen und Basisstile *//
K?rper {
  Rand: 0;
  Schriftfamilie: Arial, Sans-Serif;
  überlauf-X: versteckt; / * Horizontale Schriftrolle verhindern *//
}

.Menu-Toggle {
  Anzeige: Keine; / * Versteckt aber funktional */
}

.Menu-Button {
  Position: fest;
  Top: 10px;
  links: 10px;
  Hintergrund: #333;
  Farbe: wei?;
  Polsterung: 10px;
  Cursor: Zeiger;
  Border-Radius: 4px;
  Z-Index: 3;
}

/ * Off-Canvas-Menü *//
.off-canvas-menu {
  Position: fest;
  Top: 0;
  links: 0;
  Breite: 250px;
  H?he: 100%;
  Hintergrund: #222;
  Farbe: wei?;
  Transformation: Translatex (-100%); / * Standardm??ig versteckt *//
  übergang: 0,3S -Leichtigkeit;
  Z-Index: 2;
  Padding-Top: 60px;
}

.off-canvas-menu ul {
  Listenstil: Keine;
  Polsterung: 0;
  Rand: 0;
}

.off-canvas-menu a {
  Anzeige: Block;
  Polsterung: 15px 20px;
  Farbe: wei?;
  Textdekoration: Keine;
  Border-Bottom: 1PX Solid #444;
}

.off-canvas-menu a: hover {
  Hintergrund: #444;
}

/ * Hauptinhalt */
. Main-Content {
  Polsterung: 20px;
  übergang: 0,3S -Leichtigkeit;
}

? 3. Schalten Sie das Menü mit dem Kontrollk?stchen -Hack um

Verwenden Sie die :checked Pseudo-Klasse, um das Menüaussehen zu ausl?sen, wenn das Kontrollk?stchen umgeschaltet ist.

 / * Menü anzeigen, wenn das Kontrollk?stchen geprüft wird */
.Menu-Toggle: überprüft ~ .off-canvas-menu {
  Transformation: Translatex (0); / * Rutschen ein */
}

/ * Optional: Hauptinhalt drücken, wenn das Menü ge?ffnet ist */
.Menu-Toggle: überprüft ~. Main-Content {
  Transformation: Translatex (250px);
}

Mit dem ~ (allgemeinen Geschwister -Kombinierer) k?nnen wir Elemente stylen, die nach dem Kontrollk?stchen im DOM erfolgen.

? 4. Optional: überlagerung oder reaktionsschnelles Verhalten hinzufügen

Für eine bessere UX m?chten Sie den Hintergrund m?glicherweise dimmen, wenn das Menü ge?ffnet ist.

 / * Fügen Sie eine halbtransparente Overlay hinzu */
.Menu-Toggle: Checked ~. Main-Content :: vor {
  Inhalt: '';
  Position: fest;
  Top: 0;
  links: 0;
  Rechts: 0;
  unten: 0;
  Hintergrund: RGBA (0, 0, 0, 0,5);
  Z-Index: 1;
}

Dieses Overlay hilft auch beim Klicken das Menü (da klicken, da das Menü auf das Menü klickt, das Etikett oder den K?rper ausl?st und die Eingabe nicht deaktiviert).

? Zusammenfassung der wichtigsten Punkte

• Verwenden Sie ein verstecktes Kontrollk?stchen als Umschaltstatus.
• Positionieren Sie das Menü au?erhalb des Bildschirms mit transform: translateX(-100%) .
• Verwenden :checked und Geschwisterauswahlern, um den Einrutscheneffekt auszul?sen .
• Fügen Sie mit transition reibungslose überg?nge hinzu.
• Optional in den Inhalt drücken oder ein Overlay für eine bessere UX hinzufügen.

Diese Methode ist leicht und funktioniert ohne JavaScript. W?hrend moderne Apps JS h?ufig für komplexeres Verhalten verwenden, ist diese Pure-CSS-L?sung perfekt für einfache Websites oder Lernzwecke.

Grunds?tzlich dreht sich alles um Positionierung, Transformationen und clevere Verwendung des Checkbox -Hacks. Nicht auff?llig, aber effektiv.

Das obige ist der detaillierte Inhalt vonWie erstelle ich ein Off-Canvas-Menü mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!